ホームページ > 記事 > ウェブフロントエンド > h5オフラインキャッシュとは何ですか? h5 マニフェスト オフライン キャッシュ アプリケーション (コード付き)
h5オフラインキャッシュとは何ですか? h5 マニフェスト オフライン キャッシュ アプリケーション (コード付き)
- 不言オリジナル
- 2018-08-08 15:10:372917ブラウズ
マニフェストとは何ですか?マニフェストは、minifest という名前のサフィックスが付いたファイルです。キャッシュする必要があるファイルは、マニフェスト ファイルの規則に従ってファイルをローカルに保存するため、ネットワーク リンクがない場合でも保存されます。 , ページにアクセスできます。
オフライン アクセスは、Web ベースのアプリケーションにとってますます重要になっています。すべてのブラウザにはキャッシュ メカニズムが備わっていますが、信頼性が低く、常に期待どおりに動作するとは限りません。 HTML5 は、ApplicationCache インターフェイスを使用して、オフラインによって引き起こされる問題のいくつかを解決します。
キャッシュ インターフェイスを使用すると、アプリケーションに次の 3 つの利点がもたらされます:
オフライン ブラウジング - ユーザーはオフラインでも Web サイト全体を閲覧できます
速度 - キャッシュされたリソースはローカル リソースであるため、読み込み速度はゆっくり早く。
サーバー負荷の軽減 - ブラウザーは、変更されたサーバーからのみリソースをダウンロードします。
App Cache (AppCache とも呼ばれる) を使用すると、開発者は、オフライン ユーザーがアクセスできるようにブラウザーがキャッシュするファイルを指定できます。ユーザーがオフライン中に更新ボタンを押した場合でも、アプリは正常に読み込まれて実行されます。
マニフェスト ファイルを参照します
アプリケーションのアプリケーション キャッシュを有効にするには、ドキュメントの HTML タグにマニフェスト属性を追加します。
マニフェスト属性は絶対 URL または相対パスを指すことができますが、絶対 URL は対応する Web アプリケーションのソースと同じです。マニフェスト ファイルには任意のファイル拡張子を使用できますが、正しい MIME タイプで提供する必要があります (下記を参照)。
<html manifest="/cache.manifest"> ... </html> 或 <html manifest="http://www.example.com/example.mf"> ... </html>
キャッシュしたい Web アプリのすべてのページに、manifest 属性を追加する必要があります。 Web ページにマニフェスト属性が含まれていない場合、ブラウザはそのページをキャッシュしません (属性がマニフェスト ファイルに明示的にリストされている場合を除く)。
これは、ユーザーが閲覧するマニフェストを含むすべての Web ページが暗黙的にアプリケーション キャッシュに追加されることを意味します。したがって、在庫内のすべてのページをリストする必要はありません。
マニフェスト ファイルは text/cache-manifest MIME タイプとして提供する必要があります。ファイルのサフィックス名はカスタマイズできるため (.manifest が推奨されます)、サーバー上で .manifest サフィックスを持つファイル タイプを text/cache-manifest として宣言する必要があります。 .manifest后缀的文件类型声明为text/cache-manifest。
以apache为例，我们需要在httpd.conf中加上：AddType text/cache-manifest .manifestApache を例として、次の追加を行う必要があります: AddType text/cache-manifest .manifest
マニフェスト ファイル構造
簡単なマニフェスト形式は次のとおりです:
CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js
例は、このマニフェスト ファイルを指定する Web ページ上の 4 つのファイルをキャッシュします。
次の点に注意する必要があります:
CACHE MANIFEST 文字列は最初の行にある必要があり、必須です。
ウェブサイトのキャッシュデータサイズは5MBを超えてはなりません。ただし、Chrome ウェブストア用のアプリを作成している場合は、unlimitedStorage を使用してこの制限を解除できます。
マニフェスト ファイルまたはその中で指定されているリソースをダウンロードできない場合、キャッシュ更新プロセス全体を続行できません。この場合、ブラウザは元のアプリケーション キャッシュを引き続き使用します。
より複雑な例を見てみましょう:
CACHE MANIFEST # 2010-06-18:v2 # Explicitly cached 'master entries'. CACHE: /favicon.ico index.html stylesheet.css images/logo.png scripts/main.js # Resources that require the user to be online. NETWORK: login.php /myapi http://api.twitter.com # static.html will be served if main.py is inaccessible # offline.jpg will be served in place of all images in images/large/ # offline.html will be served in place of all other .html files FALLBACK: /main.py /static.html images/large/ images/offline.jpg *.html /offline.html
「#」で始まる行はコメント行ですが、他の目的にも使用できます。たとえば、キャッシュの更新
アプリケーション キャッシュは、マニフェスト ファイルが変更された場合にのみ更新されます。たとえば、画像リソースを変更したり、JavaScript 関数を変更した場合、それらの変更は再キャッシュされません。ブラウザがキャッシュ ファイルを更新できるようにするには、マニフェスト ファイル自体を変更する必要があります。生成されたバージョン番号、ファイル ハッシュ、またはタイムスタンプを含むコメント行を作成すると、ユーザーはソフトウェアの最新バージョンを確実に入手できます。
「キャッシュの更新」セクションで説明されているように、新しいバージョンが表示された後にプログラムでキャッシュを更新することもできます。
ページにキャッシュ マニフェスト ファイルが導入されている場合、マニフェスト ファイルには現在のページで必要なすべてのファイル (css、js、image...) が含まれている必要があります。そうでない場合、キャッシュ マニフェスト ファイルはロードされません。他のすべてのファイルを示すには、NETWORK 項目にアスタリスク * を追加します。リストには CACHE、NETWORK、FALLBACK の 3 つの異なる部分を含めることができます。
キャッシュ:これはエントリのデフォルトの部分です。このヘッダーの下にリストされているファイル (または CACHE MANIFEST の直後のファイル) は、初めてダウンロードされるときに明示的にキャッシュされます。
ネットワーク:このセクションにリストされているファイルは、サーバーに接続する必要があるホワイトリストに登録されたリソースです。これらのリソースに対するすべてのリクエストは、ユーザーがオフラインであるかどうかに関係なく、キャッシュをバイパスします。ワイルドカードを使用できます。
FALLBACK:このセクションはオプションであり、リソースにアクセスできない場合にフォールバック Web ページを指定するために使用されます。最初の URI はリソースを表し、2 番目の URI はフォールバック Web ページを表します。両方の URI は関連している必要があり、マニフェスト ファイルと同じ生成元を持つ必要があります。ワイルドカードを使用できます。
注意: セクションは任意の順序で配置でき、各セクションは同じリスト内で繰り返し表示できます。
次のリストは、ユーザーがオフラインでサイトのルートにアクセスしようとしたときに表示される「総合」ページ (offline.html) を定義しており、他のすべてのリソース (リモート サイト上のリソースなど) にはインターネットが必要であることも示しています繋がり。
CACHE MANIFEST # 2010-06-18:v3 # Explicitly cached entries index.html css/style.css # offline.html will be displayed if the user is offline FALLBACK: / /offline.html # All other resources (e.g. sites) require the user to be online. NETWORK: * # Additional resources to cache CACHE: images/logo1.png images/logo2.png images/logo3.png
注意: マニフェスト ファイルを参照する HTML ファイルは自動的にキャッシュされます。したがって、リストに追加する必要はありませんが、追加することをお勧めします。
注意: SSL 経由で提供されるページに設定されている HTTP キャッシュ ヘッダーとキャッシュ制限は、キャッシュ マニフェストに置き換えられます。したがって、https 経由で提供される Web ページはオフラインで実行できます。
キャッシュの更新
次のいずれかが発生しない限り、アプリはオフラインでもキャッシュされたままになります:
ユーザーが Web サイトのブラウザーのデータ ストレージをクリアします。
マニフェストファイルが変更されました。注: マニフェストにリストされているファイルを更新しても、ブラウザーがリソースを再キャッシュするわけではありません。マニフェスト ファイル自体を変更する必要があります。
アプリのキャッシュはプログラムによって更新されます。
おすすめ関連記事:
HTML5オフラインキャッシュとはマニフェスト_html5チュートリアルスキル
以上がh5オフラインキャッシュとは何ですか? h5 マニフェスト オフライン キャッシュ アプリケーション (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。