ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 マニフェストのオフライン キャッシュのサンプル コード
HTML5 マニフェストのオフライン キャッシュのサンプル コード
- 青灯夜游転載
- 2018-10-09 16:14:492282ブラウズ
ネットワークベースのアプリケーションにとって、オフライン アクセスはますます重要になっています。この記事では主に HTML5 マニフェストのオフライン キャッシュに関する関連情報を紹介します。必要な方は参考にしていただければ幸いです。皆さんは役に立ちますよ。
#はじめに
Web ベースのアプリケーションにとって、オフライン アクセスの重要性はますます高まっています。すべてのブラウザにはキャッシュ メカニズムが備わっていますが、信頼性が低く、常に期待どおりに動作するとは限りません。 HTML5 は、ApplicationCache インターフェイスを使用して、オフラインによって引き起こされる問題のいくつかを解決します。 キャッシュ インターフェイスを使用すると、アプリケーションに次の 3 つの利点がもたらされます。- オフライン ブラウジング - ユーザーはオフラインでも Web サイト全体を閲覧できます
- 速度 - キャッシュされたリソースはローカル リソースであるため、読み込みが速くなります。
- サーバー負荷の軽減 - ブラウザーは、変更されたサーバーからのみリソースをダウンロードします。
マニフェスト ファイルを参照してください
アプリケーションのアプリケーション キャッシュを有効にするには、ドキュメントの HTML タグにマニフェスト属性を追加します。manifest 属性は絶対 URL または相対パスを指すことができますが、絶対 URL は対応する Web アプリケーションと同じオリジンからのものである必要があります。マニフェスト ファイルには任意のファイル拡張子を使用できますが、正しい MIME タイプで提供する必要があります (下記を参照)。
<html manifest="/cache.manifest"> ... </html>
or
<html manifest="http://www.example.com/example.mf"> ... </html>
キャッシュする Web アプリのすべてのページに、manifest 属性を追加する必要があります。 Web ページにマニフェスト属性が含まれていない場合、ブラウザはそのページをキャッシュしません (属性がマニフェスト ファイルに明示的にリストされている場合を除く)。
これは、ユーザーが閲覧するマニフェストを含むすべての Web ページが暗黙的にアプリケーション キャッシュに追加されることを意味します。したがって、在庫内のすべてのページをリストする必要はありません。
マニフェスト ファイルは text/cache-manifest MIME タイプとして指定する必要があります。ファイル接尾辞名はカスタマイズできるため (.manifest が推奨されます)、サーバー側で .manifest 接尾辞を持つファイル タイプを text/cache-manifest として宣言する必要があります。
Apache を例に挙げると、httpd.conf に次の内容を追加する必要があります: AddType text/cache-manifest .manifestマニフェスト ファイル構造 単純なマニフェスト形式は次のとおりです。
CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js
この例では、このマニフェスト ファイルを指定する Web ページ上の 4 つのファイルをキャッシュします。
次の点に注意する必要があります。
- CACHE MANIFEST 文字列は最初の行にある必要があり、これは必須です。
- Web サイトのキャッシュ データ サイズは 5 MB を超えてはなりません。ただし、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 つの異なる部分を含めることができることを示すことをお勧めします。
ネットワーク:
FALLBACK:
注意: セクションは任意の順序で配置でき、各セクションは同じリスト内に繰り返し表示できます。 次のリストは、ユーザーがオフラインでサイトのルートにアクセスしようとしたときに表示される「総合」ページ (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 文件。因此您无需将其添加到清单中，但我们建议您这样做。
请注意：HTTP 缓存标头以及对通过 SSL 提供的网页设置的缓存限制将被替换为缓存清单。因此，通过 https 提供的网页可实现离线运行。
更新缓存
应用在离线后将保持缓存状态，除非发生以下某种情况：
用户清除了浏览器对您网站的数据存储。
清单文件经过修改。请注意：更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改。
应用缓存通过编程方式进行更新。
总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问Html5视频教程！
相关推荐：
以上がHTML5 マニフェストのオフライン キャッシュのサンプル コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。