HTML5における no-cache

  • 70
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

はじめに

ちょっとした 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 / 勧告候補」の段階です。

以上です。