コメント:今日のWebアプリケーションはすでに非常に複雑であり、現在の開発により、ますます複雑になりますが、致命的な欠陥があり、インターネットリンクから分離することはできません。したがって、APIがHTMLに追加されます。ローカルストレージメカニズムを使用して、この問題をうまく解決し、オフラインWebアプリケーションへの道を開きます。
序文
今日、Webアプリケーションはすでに非常に複雑であり、現在の開発により、ますます複雑になりますが、致命的な欠陥があり、インターネットリンクから分離することはできません。したがって、APIがHTMLに追加されます。
この問題は、ローカルストレージメカニズムでうまく解決し、オフラインのWebアプリケーションへの道を開いています。
ブラウザキャッシュのローカルキャッシュ
ローカルキャッシュは、Webアプリケーション全体を提供するために使用されます
ブラウザキャッシュは単一のWebページのみを提供します</p> <p>すべてのWebページにはWebページキャッシュがあります
ローカルキャッシュは、キャッシュに指定したページのみをキャッシュ</p> <p> Webページキャッシュは、どのページとリソースがWebサイトにキャッシュされているかわからないため、信頼できず安全ではありません。
ローカルキャッシュは、キャッシュされたコンテンツを制御します
マニフェストファイル
Webアプリケーションのローカルキャッシュは、各ページのマニフェストファイルを介して管理されます。マニフェストは、ファイルの名前とパスをキャッシュする必要があり、マニフェストの形でキャッシュする必要がない単純なテキストです。
各ページまたはアプリケーション全体にマニフェストを指定できます。たとえば、hello.htmに設定してください:
キャッシュマニフェスト
キャッシュ:
other.html
hellow.js
画像/myphoto.jpg
ネットワーク:
notoffline.asp
*
後退する:
online.js locale.js
キャッシュ:
newhellow.html
newhellow.js
マニフェストファイルでは、最初の行は、ブラウザにテキストの関数、つまりローカルキャッシュにリソースファイルを設定するためにマニフェストをキャッシュする必要があります。
実際にオフラインのWebアプリケーションを実行している場合、サーバーがMIMEタイプテキスト/キャッシュマニフェストをサポートできるようにサーバーを構成する必要があります。
ソースファイルを指定する場合、リソースファイルをキャッシュ、ネットワーク、フォールバックの3つのカテゴリに分割できます
ページにマニフェストファイルがある場合、ブラウザはページをローカルに自動的にキャッシュする</p> <p>ネットワークカテゴリは、キャッシュされていない明示的なリソースファイルです。これらのファイルは、サーバー側のリンクを確立することによってのみアクセスできます。この例では、WildCard文字 *は、記録されていないものがキャッシュされていないことを示しています</p> <p> 2つのリソースファイルが、フォールバックカテゴリの各行で指定されています。最初のリソースファイルは、オンラインでアクセスするときに使用できるリソースファイルであり、2番目はオンラインでアクセスしたときに使用できないローカルキャッシュファイルです。
ブラウザとサーバーの相互作用プロセス
オフラインのWebアプリケーションを操作する場合、ブラウザとサーバー間の相互作用を理解する必要があります。
たとえば、index.htmがホームページとして使用される場合、ホームページはindex.manifestを使用します。
cache index.htm、hello.js、hello.jpgファイル。最初のアクセスのプロセスは次のとおりです。
ブラウザリクエストURL
サーバーはindex.htmホームページに戻ります
ブラウザはindex.htm Webページを解析し、ページ上のすべてのリソースファイルを要求します。
サーバーはリソースファイルを返します
ブラウザはマニフェストファイルを処理し、マニフェストでキャッシュする必要があるファイルを要求します。リクエストが行われたとしても、再びリクエストします。
サーバーは、キャッシュする必要があるファイルを返します
ブラウザはローカルキャッシュを更新し、リソースファイルを保存し、イベントをトリガーしてローカルキャッシュに通知してURLを再度開きます
urlをリクエストします
ブラウザは、ページがキャッシュされていることを発見するため、ローカルキャッシュファイルを使用します
ファイルの解析
ブラウザのようなサーバーのようにマニフェストファイルを要求します
サーバーは304を返し、マニフェストファイルが変更されていないことを通知します(変更された場合、異なります)
ApplicationCacheオブジェクト
このオブジェクトはローカルキャッシュを表します。ローカルキャッシュは、ローカルキャッシュが更新されていることをユーザーに通知し、ローカルキャッシュの手動更新も可能にすることができます。
以前は、ブラウザがローカルキャッシュを更新して新しいリソースファイルをロードすると、ApplicationCacheオブジェクトのUpdatereAdyイベントがトリガーされ、変更されたローカルキャッシュが通知され、ユーザーにページを手動で更新するように促します。
swapcache
SwapCacheメソッドは、ローカルキャッシュアップデートを手動で実行するために使用されます。 ApplicationCacheオブジェクトのUpdatereadyイベントがトリガーされた場合にのみ呼び出すことができます。
つまり、リソースファイルが変更されると、この方法を使用してアップデートを手動でキャッシュできます。