最終更新:2017-12-30 (土) 04:39:48 (173d)  

Application Cache はてなブックマークを見る
Top / Application Cache

オフライン時でもWebアプリケーションを使えるようにキャッシュする仕組み

https://developer.mozilla.org/ja/Offline_resources_in_Firefox

https://html.spec.whatwg.org/#appcache

利点

  • オフラインブラウジング: ユーザーがオフラインのときでも、すべてのサイトにアクセスできます。
  • 高速: キャッシュされたリソースはローカルなので、高速に読み込まれます。
  • サーバー負荷の軽減: ブラウザは、変更があったリソースのみをサーバーからダウンロードします。

チュートリアル

キャッシュマニフェストファイル

  • オフラインアクセスに備えてブラウザがキャッシュする必要があるリソースを列挙した、単純なテキストファイル
  • キャッシュファイルを更新するようにブラウザに通知するには、マニフェスト ファイルを変更する必要がある。
  • ひとつでもエラーがあると全体がキャッシュされない(構文エラー や404など)

読み込み

  • <html manifest="example.appcache">
      ...
    </html>

拡張子

  • .manifest?から.appcache?に変更があった

MIMEタイプ

フォーマット

  • CACHE MANIFEST
    • CACHE: - 初めてダウンロードされた後、明示的にキャッシュされます。
    • NETWORK: - ユーザーがオフラインでも、これらのリソースに対するすべての要求はキャッシュをバイパスします。ワイルドカードを使用できます。
    • FALLBACK: - リソースにアクセスできない場合のフォールバック ページを指定

ツール

キャッシュの更新

  • アプリケーションがオフラインになると、次のいずれかが発生するまで、キャッシュされた状態が保たれます。
    • ユーザーがブラウザでサイトのデータ ストレージをクリアする。
    • マニフェスト ファイルが変更される。
      • ※: マニフェストに列挙されているファイルを更新しても、ブラウザはそのリソースを再キャッシュしません。マニフェスト ファイル自体を変更する必要があります。
    • アプリケーション キャッシュをプログラムで更新する。

window.applicationCache

  • window.applicationCache オブジェクトを使用すると、ブラウザのアプリケーション キャッシュにプログラムからアクセスできます。
  • プログラムでキャッシュを更新するには、まず applicationCache.update() を呼び出します。これにより、ユーザーのキャッシュの更新が試行されます(この処理のために、マニフェスト ファイルを変更しておく必要があります)。
  • 最後に、applicationCache.status が UPDATEREADY 状態の場合、applicationCache.swapCache() を呼び出すと、古いキャッシュは新しいキャッシュに置き換えられます。

Google Chrome

  • サイトのキャッシュ データは 5MB 相当に制限されます。ただし、Chromeウェブストア向けのアプリケーションを作成する場合は、unlimitedStorage を使用するとこの制限はなくなります。

参考