h5オフラインキャッシュとは何ですか? h5 マニフェストオフラインキャッシュアプリケーション (コード付き)-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

h5オフラインキャッシュとは何ですか? h5 マニフェストオフラインキャッシュアプリケーション (コード付き)

不言

Aug 08, 2018 pm 03:10 PM

html5

マニフェストとは何ですか?マニフェストは、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オフラインキャッシュとは何ですか? h5 マニフェストオフラインキャッシュアプリケーション (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。