HTML5オフラインアプリケーションアプリケーションキャッシュの詳細コード説明-H5 チュートリアル-php.cn

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

黄舟

リリース： 2017-04-01 11:09:50

オリジナル

1587 人が閲覧しました

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. ブラウザはページをレンダリングします

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

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

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

最初のページ読み込み:

1-6: 上記と同じ

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