Edited at

HTML5における no-cache

More than 1 year has passed since last update.


updated: 2018/01/25

本記事の投稿当時に紹介したアプリケーションキャッシュは、現在では廃止予定の機能となりました。

順次、各種ウェブブラウザからも廃止されていくことでしょう。

かわりに Service Workers / Cache API を使用するべきです。


はじめに

ちょっとした JavaScript ミニアプリの作成で、キャッシングを無効にしたコンテナ用 HTML ページを1枚用意したかったんですが、ひっさびさに W3C Validation Service にかけたらエラーの烙印を食らったのでメモしておきます。


留意事項

本稿執筆時点で HTML5 の仕様は「勧告候補」の段階ですので、情報の将来的な信頼性については保証しかねます。


実践


HTML4.x までの no-cache

<meta> 要素の http-equiv 属性に Pragma, Cache-Control, Expires などを指定して制御します。


sample-pre-html4.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>page title here</title>
</head>
<body>
...
</body>
</html>


HTML5 における no-cache

Offline application cache に従い、 CACHE MANIFEST ファイルで制御します。


sample-post-html5.html

<!DOCTYPE html>

<html lang="ja" manifest="sample.appcache">
<head>
<meta charset="UTF-8">
<title>page title here</title>
</head>
<body>
...
</body>
</html>

<html> 要素の manifest 属性でキャッシュマニフェストファイルの URI を指定します。

manifest 属性は、キャッシュ対象にするすべてのページに指定する必要があります。 manifest 属性が含まれていないと、キャッシュマニフェストファイルで明示されていない限り、ブラウザはそのページをキャッシュしません。

…のはずなのですが、現状は HTML4.x よろしくキャッシュされたりされなかったりします。

ですので、キャッシュする・しないはマニフェストで明示するのが無難かと思います。


sample.appcache

CACHE MANIFEST

# version: 1.0.0

CACHE:
ajax-loader.gif

FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg

NETWORK:
*


この例では、 ajax-loader.gif というファイルはキャッシュされ、それ以外のリソースはキャッシュせずにサーバーから取得させるようにしています。

また、



  • /main.py が取得できない時は /static.html


  • images/large/ 以下のリソースが取得できない時は images/offline.jpg

それぞれフォールバックリソースとして提供するようにしています。

簡単に解説します。


CACHE MANIFEST

1行目の CACHE MANIFEST はキーワードで、必ずこの文字列を1行目に記述する必要があります。


コメント

# で始まる行はコメントです。

キャッシュファイルを更新するようにブラウザに通知するには、マニフェストファイルが更新される必要がある ので、キーワードのすぐ後にバージョン番号等を入れる手法がよく見られます。


CACHE:

CACHE: セクション(または CACHE MANIFEST のすぐ下)に、キャッシングするリソースの URI を列挙します。ワイルドカードは使用できません。


NETWORK:

NETWORK: セクションには、サーバーへの接続を必要とするリソースの URI を列挙します。ワイルドカードを使用できます。


FALLBACK:

FALLBACK: は、リソースにアクセス出来ない場合のフォールバックページを指定する、オプションのセクションです。ワイルドカードを使用できます。

行の最初の URI は対象リソース(本丸)で、2つ目の URI がフォールバック(代替)です。

ネットワークへアクセスして Web アプリケーションの更新を促すようなページを指定したり、ネットワーク必須の機能を制限した代替アプリケーションのページを提供するといったことができます。


最小の no-cache 例


sample-no-cache.appcache

CACHE MANIFEST

NETWORK:
*


参考リンク

※引用元としての信頼性は W3C > WHATWG > HTML5Rocks ですが、 HTML5 については W3C もまだ「Candidate Recommendation / 勧告候補」の段階です。

以上です。