HTML5:オフラインアプリのキャッシュ

HTML5には、特にマルチスレッドJavaScript(マルチスレッドJavaScript)、クロスドキュメントメッセージング(クロスドキュメントメッセージング)、ブラウザでのドキュメントストレージ( localStorageメカニズム )など、Webのいくつかの新機能が導入されています。 [...]



オフラインアプリケーションキャッシング



すべてのブラウザには独自の種類のキャッシングメカニズムがありますが、正直なところ、これらのメカニズムは常に機能するとは限りません。 ラップトップでサイトを閲覧してから閉じたとしましょう。 少し後に、ラップトップを開き、ブラウザーの「戻る」ボタンをクリックして、開いていた前のページが表示されることを期待します。 ただし、まだインターネットに接続していない場合、またはブラウザーがページを適切にキャッシュしていない場合は、ページを表示できません。 もちろん、少なくともそれがロードされることを期待して、「進む」ボタンをクリックしますが、これは起こりません。 そして、再びインターネットに接続するまで、これらのページを表示することはできません。



HTML4以前は、各ページを手動で保存するしか方法がありませんでした。 HTML5は、よりエレガントなソリューションを提供します。 サイトの作成中に、開発者はブラウザがキャッシュするファイルを決定できます。 実際、各ページで、キャッシュするドキュメントを指定できます。 したがって、すでにオフラインになっているときにページを更新しても、ページは適切にロードされます。 このタイプのキャッシングにはいくつかの利点があります。



オフラインでのウェブ閲覧

名前が示すとおり、ユーザーはオフラインでもサイトを表示できます



スピード

ローカルにキャッシュされたファイルははるかに高速にロードされます。 通常、スタイルシートはサイトのすべてのページに適用されます。 サイトから最初にページをダウンロードするとき、ページのロードには時間がかかりますが、同じサイトの他のページに移動すると、ブラウザーは同じファイルを再度ダウンロードする必要がなくなります。



サーバー負荷の軽減

キャッシュされたアイテムを含むページを読み込むたびに、ブラウザはサーバーをポーリングして、キャッシュされたファイルが更新されたかどうかを確認します。 そうでない場合、彼はそれらをダウンロードしません。 したがって、サーバーの負荷が大幅に削減されます。



仕組み



ユーザーが接続していない場合でも、ユーザーがWebサイトにアクセスできるようにするメカニズムは非常に簡単です。 マニフェスト属性をhtmlタグに登録する必要があります。 属性値は、キャッシングのルールを含むmanifest.cacheファイルへのハイパーリンクである必要があります。



  <!DOCTYPE HTML>
 <htmlマニフェスト= "manifest.cache">
 ... 


そして、manifest.cacheファイルは通常次のようになります。



  #v1
 #これは、マニフェストにコメントを追加する方法です。

キャッシュマニフェスト
 index.html
 stylesheet.css
 images / masthead.png
スクリプト/ misc.js

ネットワーク:
 search.php
 login.php
 / API

フォールバック:
 images / dynamic.php static_image.png 


manifest.cacheファイルには3つのヘッダーがあります。



*キャッシュ

*ネットワーク

*フォールバック



manifest.cacheファイルのMIMEタイプはtext / cache-manifestであることに注意してください。 バインディングファイルの非標準タイプの拡張機能をApache(または使用する他のWebサーバー)に追加するか、たとえばPHPヘッダーディレクティブを使用してMIMEタイプを設定する必要がある場合があります。



CACHEの後にリストされたファイルは、ダウンロード後すぐにキャッシュされます。 NETWORKの後にリストされたファイルはホワイトリストと見なされます。 これは、サーバーへの直接接続が必要であることを意味します。 ユーザーがサーバーに接続していない場合、ブラウザはキャッシュされたバージョンを表示するべきではありません。



FALLBACKセクション(「フェールオーバー」)には、バックアップ戦略を提供するエントリが含まれています。 ブラウザが元のコンテンツを復元できない場合、バックアップリソースが使用されます。 上記の例では、動的画像が利用できない場合に静的画像を表示します。



NETWORKセクションの最後の行には、/ apiに含まれるリソースをロードするリクエストが実行されることを保証するフォルダーへのパスが含まれます。これにより、キャッシュを回避し、サーバーからデータを常に受信します。



マニフェストでは、#で始まる行はコメントとして扱われます。 コードの可読性を高めることに加えて、コメントには別のユースケースがあります。 masthead.pngファイルをキャッシュするように指示したと想像してください。 しかし、画像を更新しました。 これで、キャッシュはマニフェストが変更されたときにのみ更新されるため、ユーザーは古いキャッシュ画像を引き続き表示します。 マニフェストの一部を変更することで問題を解決できます。 たとえば、サイトを更新するたびにバージョン番号を増やすことをお勧めします。



注:



A /間違いや不正確さに気付いた場合は、コメントでそれらを示してください-私は間違いなくそれを修正します。



B /英語でHTML / CSS / PHPなどの興味深い、まだ翻訳されていない記事がある場合。 言語-個人の電子メールに書き込みます(公開されている場合は、記事の冒頭でニックネームを見つけるのに役立つことを保証します:)。



All Articles