Help us understand the problem. What is going on with this article?

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 / 勧告候補」の段階です。

以上です。

hidekuro
雑食。私がQiitaで公開する独自コードは、特に記載がない限り CC0 https://creativecommons.org/publicdomain/zero/1.0/deed.ja とします。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした