BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

H5 オフラインストレージ マニフェストの原理と使い方

2022-01-13 05:22:16

理解すること。

オフラインストレージは、サイトのファイルをローカルに保存し、ネットワークなしで対応するサイトの保存されたページにアクセスすることができ、これらのファイルは、html、js、css、imgなどを含むことができます。しかし、実際には、ネットワークがある場合でも、ブラウザはオフラインで保存されたファイルを優先的に使用します。

マニフェストとは。

マニフェストとは、キャッシュする必要のあるファイルやリソースを定義した、任意の拡張子を持つ簡単なテキストファイルで、初めて開いたときに、ブラウザが対応するリソースを自動的にキャッシュします。

マニフェストの特徴

  • オフラインブラウジング：ネットワークが切断されても、ページにアクセスし続けることができることです。
  • 高速アクセス：ファイルをローカルにキャッシュするため、毎回ネットワークから要求する必要がありません。 また {を使用します。 安定性。マニフェストキャッシュを作成し、予期せぬネットワーク障害やサーバー障害が発生しても、ローカルキャッシュにアクセスし続けることができます。

マニフェストの使用方法。

htmlと同じ名前のマニフェストファイルを作成します。例えば、ページがindex.htmlであれば、index.manifestというファイルを作成し、index.htmlのhtmlタグに以下の属性を追加します。 

<html lang="en" manifest="index.manifest"> or <html manifest="http://www.example.com/index.manifest& quot;>

manifestの導入は、絶対パスと相対パスのどちらを作ることもできます。絶対パスを使用する場合、マニフェストファイルはサイトと同じドメインにぶら下がる必要があります。
マニフェストファイルは、任意の拡張子で保存できますが、マインタイプは text/cache-manifest である必要があります。 

<html lang="en" manifest="index.manifest"> or <html lang="en" manifest="index.cache">

サーバーにデプロイする際に、適切なmie-typeを追加する必要があります。

manifest タグは、リソースをキャッシュする必要があるページに含める必要があります。そのページを初めて開いたとき、ブラウザはページ内のメインフェストを解析し、そこに記載されているリソースをキャッシュします。

マニフェストのファイル構成

マニフェストファイル。3つの段落からなる基本的な形式です。CACHE、NETWORK、FALLBACKの3段落からなり、NETWORKとFALLBACKは省略可能です。

1行目のCACHE MANIFESTは固定フォーマットなので、その前に記述する必要があります。

で始まるのはコメントで、バージョン番号やタイムスタンプなどが入ります。バージョン番号は通常、キャッシュ ファイルが更新されたときにマニフェストの役割を変更するためにここに書かれます。ブラウザはキャッシュを取得しており、コードが変更された場合でもマニフェスト ファイルが変更された場合にのみローカル キャッシュを更新します。

のように、バージョン番号や時間など、#の後の情報をコードを公開するたびに変更し、それに応じてブラウザにローカルキャッシュを更新するように指示することができます。 

CACHE MANIFEST
     #v0.1
     CACHE:
       js/index.js
             css/index.css
     NETWORK:
             images/logo.png
     FALLBACK:
      *.html /404.html /* /404.html or /html/ /404.html also available */


window.applicationCache.update();

この記事はH5オフラインストレージManifestの原理と使用方法について紹介します、より多くの関連H5オフラインストレージManifestの内容は、スクリプトハウスの過去の記事を検索してくださいまたは以下の関連記事を引き続き閲覧、私は今後よりスクリプトハウスをサポートしてください！。 

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します