HTML5オフラインアプリケーションアプリケーションキャッシュの詳細コード説明

1. アプリケーションシナリオ

通常、ユーザーが閲覧するときに単一の Web ページをユーザーのディスクに保存するためにブラウザー cache を使用します。再び帯域幅は節約されましたが、それでも、インターネットなしでは Web にアクセスできません。オフラインでも Web アプリケーションにアクセスできるようにするため 。 html5 は、アプリケーション キャッシュ API を通じてオフライン ストレージ機能を提供します。アクセスする必要がある Web ページがオンラインで少なくとも 1 回アクセスされていることが前提となります。

オフラインのローカル ストレージと従来のブラウザー キャッシュの違いは何ですか?

1. ブラウザのキャッシュには主に 2 つのカテゴリが含まれます:

a. キャッシュのネゴシエーション: Last-modified、Etag

ブラウザはサーバーにページが変更されているかどうかを尋ね、変更されていない場合は 304 を返し、ブラウザはページを直接参照します。ローカルキャッシュ。それ以外の場合、サーバーは新しいコンテンツを返します。

。

2. オフライン ストレージは Web 全体にサービスを提供し、ブラウザーのキャッシュは 1 ページのみをキャッシュします。

3. オフライン ストレージは、キャッシュする必要があるファイル、オンラインでのみ閲覧できるファイル、およびブラウザーを指定できます。キャッシュは指定できません。

4. オフライン ストレージは、

アップデート

をユーザーに動的に通知できます。

2. 実装方法

オフライン ストレージはマニフェスト ファイルによって管理され、サーバーごとにサポートを有効にする方法が異なります。

CACHE MANIFEST//必须以这个开头
version 1.0 //最好定义版本，更新的时候只需修改版本号
CACHE:
    m.png
    test.js
    test.css
NETWORK:
    *
FALLBACK
    online.html offline.html

CACHE はキャッシュする必要があるファイルを指定します; NETWORK はインターネット経由でのみ閲覧できるファイルを指定します; * は CACHE 内のファイル以外のファイルを表します; FALLBACK の各行はそれぞれオンラインとオフラインで使用されるファイルを指定します

ストレージを管理するにはマニフェストを使用する必要があります。次のように、

html タグ

でマニフェスト

属性を定義する必要があります:

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE HTML</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;"><a href="http://www.php.cn/java/java-ymp-Lang.html" target="_blank">lang</a></span><span style="color: #0000ff;">="en"</span><span style="color: #ff0000;"> manifest</span><span style="color: #0000ff;">=&#39;test.manifest&#39;</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;"><a href="http://www.php.cn/html/html-HEAD-2.html" target="_blank">head</a></span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">char<a href="http://www.php.cn/code/8209.html" target="_blank">set</a></span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><br/><br/><span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

最後に、これらのアプリケーションにはサーバーのサポートが必要であることを忘れないでください。

Apache サーバーのサポートを有効にする方法は次のとおりです: conf/mime.types にコードを追加します:

            test/cache-manifest manifest

IIS サーバーを有効にする方法:

右クリック --HTTP---MIME マッピング、ファイル タイプ --- New --- 拡張子に「manifest」、タイプに「test/cache-manifest」を入力します。 3. JS を介して更新を動的に制御します。 Firefox8.0 コンソールで「window.applicationCache」と入力すると、このオブジェクトのすべてのプロパティとイベント メソッドを表示できます。

applicationCache.onchecking = function(){
   //检查manifest文件是否存在
}

applicationCache.ondownloading = function(){
   //检查到有manifest或者manifest文件
   //已更新就执行下载操作
   //即使需要缓存的文件在请求时服务器已经返回过了
}

applicationCache.onnoupdate = function(){
   //返回304表示没有更新，通知浏览器直接使用本地文件
}

applicationCache.onprogress = function(){
   //下载的时候周期性的触发，可以通过它
   //获取已经下载的文件个数
}

applicationCache.oncached = function(){
   //下载结束后触发，表示缓存成功
}

application.onupdateready = function(){
   //第二次载入，如果manifest被更新
   //在下载结束时候触发
   //不触发onchched
   alert("本地缓存正在更新中。。。");
   if(confirm("是否重新载入已更新文件")){
       applicationCache.swapCache();
       location.reload();
   }
}

applicationCache.onobsolete = function(){
   //未找到文件，返回404或者401时候触发
}

applicationCache.onerror = function(){
   //其他和离线存储有关的错误
}

4. ブラウザとサーバー間の相互作用

かつて、インタビューで次のような質問がありました。「ブラウザのアドレスバーに www.baidu.com と入力した後に何が起こったか説明してください。」

1. サーバーは Baidu ページのリソースを返し、ブラウザは HTML をロードします

2. ブラウザは解析を開始します 3. リンクを検出し、CSS ファイルをロードするリクエストを送信します

4. ブラウザはページをレンダリングします

5.

画像を検出し、画像をロードするリクエストを送信し、再レンダリングします

6. レンダリングをブロックするjsファイルのリクエストを送信します。 js が dom 上で動作すると、再レンダリングされます

オフライン ストレージをサポートするページの場合、ブラウザとサーバーの間のやり取りは何ですか?

最初のページ読み込み:

1-6: 上記と同じ

7: 前のステップでリクエストされた場合でも、キャッシュする必要があるページとデータをリクエストします (これはエネルギーを消費する場所です)

8 : サーバーはリクエストされたすべてのファイルを返し、ブラウザはそれらをローカルに保存します

ページを再度ロードします:

1: リクエストを送信します

2: ローカルに保存されているオフライン ファイルを使用します

3: ページを解析します

4: サーバーマニフェストファイルをリクエストして、変更があるかどうかを確認します。304 が返された場合は、変更がないことを意味し、ステップ 5 に進みます。それ以外の場合は、ステップ 6 に進みます。

5: 最初の読み込みページの 7-8 を入力します

6: ローカルストレージを使用し、再リクエストはありません

以上がHTML5オフラインアプリケーションアプリケーションキャッシュの詳細コード説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。