HTML5のキャッシュマニフェスト
ファイル名拡張子
.appcache
インターネットメディアの種類
テキスト/キャッシュマニフェスト
開発者ワールドワイドウェブコンソーシアム
標準HTML5
オープンフォーマット?はい
Webサイトhtml .spec .whatwg .org /multipage /browsers .html #オフライン

HTML5のキャッシュマニフェストは、ネットワーク接続がなくてもウェブアプリケーションにアクセスできるようにするソフトウェアストレージ機能でした。 2014年10月28日にW3C勧告となりました。 [ 1 ]

2021年以降、この技術は広く利用できなくなりました。Firefox 85から削除され、[ 2 ] Chrome 84ではデフォルトで無効化され、Chrome 95でも削除されました。[ 3 ]現時点では、オフラインWebアプリケーション機能の使用は強く推奨されず、代わりにサービスワーカーの使用が推奨されます。[ 4 ]キャッシュマニフェストは、プログレッシブWebアプリ技術の一部であるJSONベースのファイル形式であるWebアプリケーションマニフェストとは異なります。2023年現在、W3Cで標準化プロセスが進行中です。[ 5 ]

背景

ウェブアプリケーションは、ネットワークからダウンロードする必要があるウェブページで構成されています。ダウンロードにはネットワーク接続が必要です。しかし、ユーザーが制御できない状況により、ネットワークに接続できないケースは数多くあります。HTML5では、キャッシュマニフェスト を使用することで、ネットワーク接続がなくてもウェブアプリケーションにアクセスできる機能を提供しています。

ウェブアプリケーションは、URLで識別されるリソースで構成されています。これらのリソースには、HTML、CSS、JavaScript、画像、またはウェブアプリケーションのレンダリングに必要なその他のソースが含まれます。これらのアドレスはマニフェストファイルにコピーされ、ウェブアプリケーションの作成者は、追加または削除された新しいウェブアドレスを示すために、定期的にマニフェストファイルを更新できます。初めてネットワークに接続すると、ウェブブラウザは HTML5 マニフェストファイルを読み取り、指定されたリソースをダウンロードしてローカルに保存します。その後、ネットワークに接続できない場合、ウェブブラウザは代わりにローカルコピーに切り替え、ウェブアプリケーションをオフラインでレンダリングします。

基本

オフラインアプリケーションが動作するには、ウェブ開発者がキャッシュマニフェストファイルを作成する必要があります。ウェブアプリケーションが複数のページにわたる場合は、各ページにキャッシュマニフェストを指すマニフェスト属性を設定する必要があります。マニフェストを参照するすべてのページはローカルに保存されます。[ 6 ]キャッシュマニフェストファイルは、サーバーの別の場所にあるテキストファイルです。コンテンツタイプは[ 7 ]で提供する必要があります。text/cache-manifest

キャッシュマニフェストファイルが機能するには、属性をhtmlmanifest="<path>"要素に追加する必要があります。 [ 7 ]例: 

<!DOCTYPE HTML> < htmlマニフェスト= "cache.appcache" > <本文> … </本体> </ html >

マニフェスト属性への引数は、マニフェスト ファイルへの相対パスまたは絶対パスです。

以下のHTMLファイルについて考えてみましょう。要素は、 cache.appcache<html>というファイルに、このウェブページをオフラインで動作させるために必要なリソース（test.js、test.cssなど）のリストが含まれることを示しています。このファイルの一般的な名前はcache.manifestとmanifest.appcacheです。 

<!—- test.html --> <!DOCTYPE HTML> < html manifest = "cache.appcache" > < head > < title >テスト</ title > < script src = "test.js" ></ script > < link rel = "stylesheet" href = "test.css" > </ head > < body > マニフェスト ファイルをテストしています。 </本体> </ html >

構文

マニフェストファイルは行で始まる必要がありますCACHE MANIFEST。コメントは で始まり#、スペースと空行は無視されます。[ 8 ]

以下にキャッシュ マニフェスト ファイルの例を示します。

例1:

キャッシュマニフェスト /テスト.css /テスト.js /テスト.png

このマニフェストファイルには、CSSファイル、JavaScriptファイル、PNG画像の3つのリソースがリストされています。上記のファイルが読み込まれると、ブラウザはウェブサーバーのルートディレクトリからtest.css、test.js、test.pngファイルをダウンロードします。[ 7 ]その結果、ネットワークに接続されていないときでも、オフラインでリソースを利用できるようになります。

キャッシュマニフェストでは、以下に示すように相対パスや絶対URLも使用できます。[ 8 ] [ 9 ] [ 10 ]

例2:

キャッシュマニフェスト /main/features.js /main/settings/index.css http://files/images/scene.jpg http://files/images/world.jpg

ファイルヘッダー

キャッシュマニフェストファイルは3つのセクションヘッダーで構成されています。[ 7 ]

  1. ヘッダー CACHE を持つ明示的なセクション。
  2. ヘッダーが「NETWORK」のオンライン ホワイトリスト セクション。
  3. ヘッダー FALLBACK を持つフォールバック セクション。

注: 上記の例 1 と例 2 は、セクション ヘッダーを示していないため、デフォルトで明示的なセクションと見なされます。

NETWORKというヘッダーを持つオンラインホワイトリストセクション

例3:

キャッシュマニフェスト ネットワーク： /checking.cgi キャッシュ： /テスト.css /テスト.js /テスト.png

この例はヘッダーで構成されています。NETWORK: 行は「オンラインホワイトリスト」セクションの開始です。このセクションにリストされているリソースはキャッシュされず、オフラインでは利用できません。[ 7 ]そのため、オフラインでリソースを読み込もうとするとエラーが発生します。

ヘッダー CACHE: によって明示的なセクションに移行し、リソース (CSS スタイルシート、JavaScript、画像ファイル) をダウンロードしてオフラインで使用できるようになります。

ヘッダーFALLBACKを持つフォールバックセクション

キャッシュマニフェストファイルのフォールバックセクションは、キャッシュできない、または正常にキャッシュされなかったオンラインリソースを置き換えるために使用できます。[ 7 ]

例4:

キャッシュマニフェスト 後退する： / /オフライン.html ネットワーク： …

例4では、フォールバックセクションは1行（/ /offline.html）で構成されています。「offline」の前の1文字（/）は、サイト上の任意のURLパターンと一致します。[ 7 ]ブラウザがappcache内でページを見つけられない場合、アプリケーションは/offline.htmlページを表示します。

イベントフロー

イベントはApplicationCacheJavaScript オブジェクトの下にあります。

ブラウザがウェブページにアクセスし、以前にそのウェブページを見たことがなかったためにマニフェストファイルを認識しなかった場合、次のようなイベントが発生します。[ 8 ]

  • Checkingイベント - ブラウザが Web ページにアクセスし、<html>要素のマニフェスト属性を読み取ったときに発生します。
  • Downloadingイベント - マニフェスト ファイルに指定されたすべてのリソースをダウンロードします。
  • Progressイベント - ダウンロードされたファイルの数と、ダウンロードが残っているファイルの数に関する情報が含まれます。
  • Cachedイベント - すべてのファイルがダウンロードされ、オフライン Web アプリケーションがオフラインで使用できるようになると発生します。

ブラウザが以前にウェブページにアクセスしたことがあり、マニフェストファイルを認識した場合、次のイベントが発生します。[ 8 ]

  • Noupdateイベント - キャッシュ マニフェストが変更されていない場合に発生します。
  • Downloadingイベント - キャッシュ マニフェストによってリソースが変更された場合、ファイルは再度ダウンロードされます。
  • Progressイベント - ダウンロードされたファイルの数と、ダウンロードが残っているファイルの数に関する情報が含まれます。
  • Updatereadyイベント - 再ダウンロードが完了すると、このイベントがトリガーされ、新しいオフライン バージョンが使用可能になったことが示されます。

上記のイベントのいずれかの時点でエラーが発生した場合、ブラウザはエラーイベントをトリガーし、プロセスを停止します。以下は、リソースの再ダウンロード時に発生する可能性のあるエラーの一部です。[ 9 ]

  • ページが見つかりません ( HTTP エラー 404 ) またはページが完全に削除されました (HTTP エラー 410)。
  • マニフェストを指すHTMLページのダウンロードに失敗しました。[ 7 ]
  • 更新中にキャッシュマニフェストが変更されました。[ 7 ]
  • キャッシュマニフェストは変更されましたが、ブラウザはマニフェスト内のリソースをダウンロードしませんでした。[ 7 ]

参照

参考文献

  1. ^ 「W3C勧告の一部としてのアプリケーションキャッシュ」 2014年10月28日。 2016年5月30日閲覧。
  2. ^ 「アプリケーションキャッシュの使用 - HTML: HyperText Markup Language | MDN」 . developer.mozilla.org . 2019年2月15日時点のオリジナルよりアーカイブ。 2021年4月11日閲覧。
  3. ^ 「AppCache削除の準備」 . web.dev . 2020年5月20日時点のオリジナルよりアーカイブ。2021年9月2日閲覧。
  4. ^ "Window.applicationCache" . MDN Web Docs . Mozilla. 2023年5月2日時点のオリジナルよりアーカイブ。2020年12月29日閲覧。
  5. ^ 「Webアプリケーションマニフェスト」 . www.w3.org . 2023年4月9日閲覧。
  6. ^ Bidelman, Eric (2013年10月29日). 「アプリケーションキャッシュの使い方初心者ガイド」 . 2014年4月23日閲覧。
  7. ^ a b c d e f g h i j Pilgrim, Mark (2010). HTML5 Up and Running . O'Reilley. 2011年10月3日時点のオリジナルよりアーカイブ。 2018年11月16日閲覧。
  8. ^ a b c d「W3 HTML5 Manifests」 . HTML5 . 2010年12月24日時点のオリジナルよりアーカイブ。2011年4月3日閲覧。
  9. ^ a b "Dev.Opera" . HTML5 . 2011年4月3日閲覧。
  10. ^ "WHATWG" . HTML5 . 2011年4月14日時点のオリジナルよりアーカイブ。2011年4月3日閲覧。
「 https://en.wikipedia.org/w/index.php?title=Cache_manifest_in_HTML5&oldid=1317525272」より取得