1. アプリケーションシナリオ
通常、ユーザーが閲覧するときに単一の Web ページをユーザーのディスクに保存するためにブラウザー cache を使用します。再び帯域幅は節約されましたが、それでも、インターネットなしでは Web にアクセスできません。オフラインでも Web アプリケーションにアクセスできるようにするため 。 html5 は、アプリケーション キャッシュ API を通じてオフライン ストレージ機能を提供します。アクセスする必要がある Web ページがオンラインで少なくとも 1 回アクセスされていることが前提となります。
オフラインのローカル ストレージと従来のブラウザー キャッシュの違いは何ですか? 1. ブラウザのキャッシュには主に 2 つのカテゴリが含まれます: a. キャッシュのネゴシエーション: Last-modified、Etag ブラウザはサーバーにページが変更されているかどうかを尋ね、変更されていない場合は 304 を返し、ブラウザはページを直接参照します。ローカルキャッシュ。それ以外の場合、サーバーは新しいコンテンツを返します。 。 2. オフライン ストレージは Web 全体にサービスを提供し、ブラウザーのキャッシュは 1 ページのみをキャッシュします。 3. オフライン ストレージは、キャッシュする必要があるファイル、オンラインでのみ閲覧できるファイル、およびブラウザーを指定できます。キャッシュは指定できません。 4. オフライン ストレージは、アップデート
をユーザーに動的に通知できます。オフライン ストレージはマニフェスト ファイルによって管理され、サーバーごとにサポートを有効にする方法が異なります。
CACHE MANIFEST//必须以这个开头 version 1.0 //最好定义版本,更新的时候只需修改版本号 CACHE: m.png test.js test.css NETWORK: * FALLBACK online.html offline.html
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="//m.sbmmt.com/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;">='test.manifest'</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;"><a href="//m.sbmmt.com/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="//m.sbmmt.com/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>
test/cache-manifest manifest
右クリック --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 サイトの他の関連記事を参照してください。