オフラインアクセスは、Webベースのアプリケーションにとってますます重要になっています。すべてのブラウザにはキャッシュメカニズムがありますが、信頼性がなく、常に期待される役割を果たすとは限りません。 HTML5は、ApplicationCacheインターフェイスを使用して、オフライン使用によって引き起こされる問題のいくつかを解決します。
以下は、HTML5オフラインキャッシュマニフェストファイルのアプリケーションとコードの実用的なケースを説明する関連コンテンツです。この記事のチュートリアルでは、主にHTML5オフラインキャッシュマニフェストに関連するいくつかのテクノロジーと知識について説明しています。その他のコンテンツについては、http://www.vevb.comにアクセスして、より最新のチュートリアルを入手できます。以下はチュートリアルの説明です。
マニフェストとは何ですか?マニフェストは、接尾辞名のミニフェストを備えたファイルです。ファイルにキャッシュする必要があるファイルを定義します。マニフェストをサポートするブラウザは、マニフェストファイルのルールに従ってファイルをローカルに保存し、ネットワークリンクなしでページにアクセスできるようにします。
オフラインアクセスは、Webベースのアプリケーションにとってますます重要になっています。すべてのブラウザにはキャッシュメカニズムがありますが、信頼性がなく、常に期待される役割を果たすとは限りません。 HTML5は、ApplicationCacheインターフェイスを使用して、オフライン使用によって引き起こされる問題のいくつかを解決します。
キャッシュインターフェイスを使用すると、次の3つの利点をアプリケーションにもたらすことができます。
オフラインブラウジング - ユーザーはオフライン中に完全なウェブサイトを閲覧できます
速度 - キャッシュされたリソースはローカルリソースであるため、より速くロードされます。
サーバーの読み込みが少ない - ブラウザは、変更されたサーバーからリソースのみをダウンロードします。
App Cache(AppCacheとも呼ばれます)により、開発者は、オフラインユーザーにアクセスできるようにブラウザがキャッシュするファイルを指定できます。ユーザーがオフライン時に更新ボタンを押しても、アプリは通常ロードおよび実行されます。
参照マニフェストファイルアプリケーションのアプリケーションキャッシュを有効にするには、ドキュメントのHTMLタグにマニフェスト属性を追加します。
マニフェストプロパティは、絶対URLまたは相対パスを指すことができますが、絶対URLは対応するネットワークアプリケーションと同じでなければなりません。マニフェストファイルは任意のファイル拡張子を使用できますが、正しいMIMEタイプを提供する必要があります(以下を参照)。
<html manifest =/cache.manifest> ... </html>または<html manifest = http://www.example.com/example.mf> ... </html>
キャッシュするWebアプリの各ページにマニフェストプロパティを追加する必要があります。ページにマニフェスト属性が含まれていない場合、ブラウザはページをキャッシュしません(マニフェストファイルに明示的にリストされていない限り)。
これは、マニフェストでユーザーが閲覧するすべてのWebページがアプリケーションキャッシュに暗黙的に追加されることを意味します。したがって、リスト内の各ページをリストする必要はありません。
マニフェストファイルは、テキスト/キャッシュマニフェストMIMEタイプで提供する必要があります。ファイルの接尾辞名はカスタマイズできます(.manifestとして推奨)。そのため、 .manifestサフィックスのファイルタイプをサーバー上のテキスト/キャッシュマニフェストとして宣言する必要があります。
Apacheを例として取るには、追加する必要があります: AddType text/cache-manifest .manifest
シンプルなリスト形式は次のとおりです。
CACHE MANIFESTINDEX.HTMLSTYLESHEET.CSSIMAGES/LOGO.PNGSCRIPTS/MAIN.JS
この例は、このマニフェストファイルを指定するWebページに4つのファイルをキャッシュします。
次のポイントに注意する必要があります:
キャッシュマニフェスト文字列は最初の行にある必要があり、不可欠です。
ウェブサイト上のキャッシュデータの量は、5 MBを超えてはなりません。ただし、Chrome Web Storeのアプリを作成している場合は、UnlimitedStorageを使用して制限を無制限にすることができます。
マニフェストファイルまたはITで指定されたリソースをダウンロードできない場合、キャッシュ更新プロセス全体を実行できません。この場合、ブラウザは元のアプリケーションキャッシュを引き続き使用します。
より複雑な例を見てみましょう:
キャッシュマニフェスト#2010-06-18:V2#明示的に「マスターエントリ」。cache:/favicon.icoindex.htmlstylesheet.cssimages/logo.pngscripts/main.js#ユーザーがオンラインであることを要求するリソース。 static.htmlは、main.pyがアクセス不可の場合に提供されます#offline.jpgはすべての画像の代わりに配信されます/large/#offline.htmlは、他のすべての.html filesfheflyblack:/main.py /static.htmlimages/larege/ emages/offline.jpg*.html/offline.html
#で始まる行はコメント行ですが、他の目的にも使用できます。たとえば、キャッシュを更新します
アプリのキャッシュは、マニフェストファイルが変更された場合にのみ更新されます。たとえば、画像リソースを変更したり、JavaScript関数を変更したりした場合、これらの変更は再確認されません。マニフェストファイル自体を変更して、ブラウザにキャッシュされたファイルを更新する必要があります。生成されたバージョン番号、ファイルハッシュ値、またはタイムスタンプでコメント行を作成して、ユーザーがソフトウェアの最新バージョンを取得できるようにします。
更新キャッシュセクションで説明されているように、新しいバージョンが表示された後にキャッシュをプログラム的に更新することもできます。
ページにキャッシュマニフェストファイルを導入する場合、マニフェストファイルには、現在のページで必要なすべてのファイル(CSS、JS、画像...)が含まれている必要があります。それ以外の場合は、ロードされません。したがって、キャッシュする必要がある固定ファイルを削除する場合は、他のすべてのファイルを示すためにファイル内のネットワークアイテムにアスタリスク*を追加することをお勧めします。
リストには、キャッシュ、ネットワーク、フォールバックの3つの異なる部分を含めることができます。
キャッシュ:これがエントリのデフォルト部分です。このヘッダーの下にリストされているファイルは、初めて明示的にキャッシュされます(またはキャッシュマニフェストの直後)。
ネットワーク:このセクションにリストされているファイルは、サーバーに接続する必要があるホワイトリストリソースです。これらのリソースへのすべてのリクエストは、ユーザーがオフラインであるかどうかに関係なく、キャッシュをバイパスします。ワイルドカードを使用できます。
後退する:このセクションはオプションであり、リソースにアクセスできない場合のフォールバックページを指定するために使用されます。最初のURIはリソースを表し、2番目はバックアップWebページを表します。
終わり。チュートリアルはここで終了しました。読書から何かを手に入れましたか?このサイトは、HTML5オフラインキャッシュマニフェスト関連コンテンツも提供しています。