html 5---オフラインアプリケーション
4724 ワード
一、問題の引き出し
ユーザーがインターネットに接続していないと、ユーザーはwebアプリケーションを利用できません.
二、解決策
Webアプリケーションがオフラインでも正常に動作するように,ローカルキャッシュメカニズムを導入した.
三、原理
Webアプリケーションがオフライン状態でも正常に動作するためには、Webアプリケーションのロックに必要なリソースファイルをローカルキャッシュに配置し、ユーザーがオフラインの場合、ローカルキャッシュ内のリソースを利用してWebアプリケーションを正常に動作させる必要があります.
四、ローカルキャッシュとウェブキャッシュの違い
ローカルキャッシュ
Webキャッシュ
サービス・オブジェクトが異なる
Webアプリケーション全体に対して
単一のWebページ
キャッシュ内容が異なる
指定したリソースのみキャッシュ
どのページにもページキャッシュがあります
セキュリティ
キャッシュの内容を制御できるため、信頼性が高い
信頼性が低く、どのリソースがキャッシュされているか分かりません.
五、ブラウザとサーバーのインタラクティブプロセス
サイトをhttp://amyloverサイト、index.htmlはトップページ
1ブラウザのアクセス要求http://amylover
2サーバはindexを返す.htmlページ
3ブラウザ解析index.htmlページでは、htmlファイル、画像ファイル、cssファイル、jsファイル、mnifestファイルなど、ページ内のすべてのリソースを要求します(ローカルキャッシュが必要なリソースが指定されています).
4サーバは、3で要求されたリソースを返します.
5ブラウザはmanifestファイルを処理し、manifestファイルで要求されたローカルキャッシュが必要なファイルリソースを要求します.これらのリソースが要求されたとしても.
6ブラウザは、5で要求されたすべてのリソースを返します.
7ブラウザはローカルキャッシュを更新し、ローカルキャッシュが更新される準備をしているイベントをトリガーし、6で返されたリソースをローカルキャッシュに保存します.
上記の手順が完了したら、ブラウザが再度開きます.http://amylover、manifestファイルは変更されていません.インタラクティブなプロセスは次のとおりです.
1ブラウザ再要求http://amylover
2ブラウザは、ページがローカルにキャッシュすることを発見し、ローカルキャッシュのindexを使用する.htmlページ
3ブラウザ解析index.htmlページ、すべてのローカルキャッシュ内のリソースを使用
4ブラウザがサーバにmanifestファイルを要求する
5サーバはmanifestファイルの更新を返します
6ブラウザは5で返されたmanifestファイルを処理し、ファイルが更新されたことを発見した場合、ファイル内のローカルキャッシュが必要なすべてのリソースを要求する.
7ブラウザは6で要求されたリソースを返します.
8ブラウザは、7で返されたリソースを使用してローカルキャッシュを更新し、ローカルキャッシュが更新される準備をしているイベントをトリガーします.
六、manifestファイル:
6.1ローカルキャッシュは各ページのmanifestファイルによって管理される.
6.2 manifestファイルは簡単なテキストファイルで、リストの形式でどのリソースがキャッシュする必要があるか、どのリソースがキャッシュする必要がないか、およびリソースのアクセスパスを列挙しています.
6.3各ページにmanifestファイルを指定するか、Webアプリケーション全体にmanifestファイルの合計を指定できます.
6.4最初の行はCACHE MANIFESTでなければなりません.このファイルの役割をブラウザに伝えます.
6.5サーバにtext/cache-manifestタイプ、例えばappacheサーバの{apache_home}/conf/mimeをサポートするようにサーバを構成する必要がある.typesファイルの最後の行にtext/cache-manifest manifestを追加
6.6 manifestファイルでのコメント使用#
6.7リソースを列挙する際、リソースをCACHE、NETWORK、FALLBACKの3つに分類する
6.8 CACHEとは、ローカルキャッシュを必要とするリソース、NETWORKとは、ローカルキャッシュを必要としないリソースを明示的に指定し、FALLBACKとは2つのリソースを指定し、1つ目はオンラインで使用し、2つ目はユーザーがオフラインになったときに使用する代替リソースを指す
6.9ブラウザがmanifestファイルを正常に読むためには、ページのhtmlラベルのmanifestプロパティにmanifestファイルのurlアドレスを指定する必要があります.
七、アプリケーションCacheオブジェクト
7.1ローカルキャッシュを表すオブジェクト
7.2インタラクション中のアプリケーションCacheオブジェクト
1ブラウザのアクセス要求http://amylover
2サーバはindexを返す.htmlページ
3ブラウザがhtmlのmanifest属性を発見した場合、checkingイベントをトリガーし、manifestファイルが存在するかどうかを確認し、errorイベントをトリガーしない.manifestファイルが存在しないことを示す.
4ブラウザ解析index.htmlは、ページのすべてのリソースを要求します.
5サーバは、4で要求されたすべてのリソースを返します.
6ブラウザはmanifestファイルを処理し、5でこれらのリソースが返された場合でも、ファイルにローカルキャッシュされたすべてのリソースを要求する.
7サーバは6で要求されたリソースを返します.
8ブラウザはアプリケーションCacheオブジェクトのdownloadingイベントをトリガし、7で返されたリソースのダウンロードを開始し、ダウンロード中にアプリケーションCacheオブジェクトのprogressイベントを周期的にトリガし、どれだけのファイルブックのダウンロードを取得し、どれだけのダウンロードキューの中で
9アプリケーションCacheオブジェクトのcachedイベントをダウンロードしてトリガーし、最初のキャッシュに成功したことを示します.
10再アクセスの場合http://amylover,1-5一致,ステップ5の実行後,ブラウザはmanifestファイルが本更新されたかどうかを確認し,アプリケーションCacheオブジェクトのnoupdateイベントがトリガーされなければ後続の操作を実行しない.
manifestファイルが更新された場合、後続の操作が実行されますが、ステップ9のcacheイベントは実行されず、updatereadyイベントがトリガーされます.
7.3更新
アプリケーション・キャッシュ・オブジェクトを使用して、ローカル・キャッシュが更新されたことをユーザーに通知したり、ローカル・キャッシュの更新を手動で行うことができます.
7.3.1アプリケーションCacheオブジェクトのundatereadyイベントとは、更新されたmanifestファイルに必要なリソースのダウンロードが完了すると、ローカルキャッシュが更新される準備ができたときにトリガーされ、ローカルキャッシュが大きい場合、ローカルキャッシュの更新は長いプロセスであり、更新中にブラウザがロックされる場合もある.最後に、ローカルキャッシュの更新中であることをユーザーに伝えるプロンプトを表示します.
7.3.2 swapCache()メソッド
このメソッドを呼び出さないと、ローカルキャッシュは次のページを開くときに更新されますが、このメソッドを使用すると、ローカルキャッシュはすぐに更新されますが、swapCacheメソッドを使用してローカルキャッシュは更新されていますが、このページの画像やフッターファイルなどは更新されていませんので注意してください.ページの更新または再オープン時のみ更新
ユーザーがインターネットに接続していないと、ユーザーはwebアプリケーションを利用できません.
二、解決策
Webアプリケーションがオフラインでも正常に動作するように,ローカルキャッシュメカニズムを導入した.
三、原理
Webアプリケーションがオフライン状態でも正常に動作するためには、Webアプリケーションのロックに必要なリソースファイルをローカルキャッシュに配置し、ユーザーがオフラインの場合、ローカルキャッシュ内のリソースを利用してWebアプリケーションを正常に動作させる必要があります.
四、ローカルキャッシュとウェブキャッシュの違い
ローカルキャッシュ
Webキャッシュ
サービス・オブジェクトが異なる
Webアプリケーション全体に対して
単一のWebページ
キャッシュ内容が異なる
指定したリソースのみキャッシュ
どのページにもページキャッシュがあります
セキュリティ
キャッシュの内容を制御できるため、信頼性が高い
信頼性が低く、どのリソースがキャッシュされているか分かりません.
五、ブラウザとサーバーのインタラクティブプロセス
サイトをhttp://amyloverサイト、index.htmlはトップページ
1ブラウザのアクセス要求http://amylover
2サーバはindexを返す.htmlページ
3ブラウザ解析index.htmlページでは、htmlファイル、画像ファイル、cssファイル、jsファイル、mnifestファイルなど、ページ内のすべてのリソースを要求します(ローカルキャッシュが必要なリソースが指定されています).
4サーバは、3で要求されたリソースを返します.
5ブラウザはmanifestファイルを処理し、manifestファイルで要求されたローカルキャッシュが必要なファイルリソースを要求します.これらのリソースが要求されたとしても.
6ブラウザは、5で要求されたすべてのリソースを返します.
7ブラウザはローカルキャッシュを更新し、ローカルキャッシュが更新される準備をしているイベントをトリガーし、6で返されたリソースをローカルキャッシュに保存します.
上記の手順が完了したら、ブラウザが再度開きます.http://amylover、manifestファイルは変更されていません.インタラクティブなプロセスは次のとおりです.
1ブラウザ再要求http://amylover
2ブラウザは、ページがローカルにキャッシュすることを発見し、ローカルキャッシュのindexを使用する.htmlページ
3ブラウザ解析index.htmlページ、すべてのローカルキャッシュ内のリソースを使用
4ブラウザがサーバにmanifestファイルを要求する
5サーバはmanifestファイルの更新を返します
6ブラウザは5で返されたmanifestファイルを処理し、ファイルが更新されたことを発見した場合、ファイル内のローカルキャッシュが必要なすべてのリソースを要求する.
7ブラウザは6で要求されたリソースを返します.
8ブラウザは、7で返されたリソースを使用してローカルキャッシュを更新し、ローカルキャッシュが更新される準備をしているイベントをトリガーします.
六、manifestファイル:
6.1ローカルキャッシュは各ページのmanifestファイルによって管理される.
6.2 manifestファイルは簡単なテキストファイルで、リストの形式でどのリソースがキャッシュする必要があるか、どのリソースがキャッシュする必要がないか、およびリソースのアクセスパスを列挙しています.
6.3各ページにmanifestファイルを指定するか、Webアプリケーション全体にmanifestファイルの合計を指定できます.
6.4最初の行はCACHE MANIFESTでなければなりません.このファイルの役割をブラウザに伝えます.
6.5サーバにtext/cache-manifestタイプ、例えばappacheサーバの{apache_home}/conf/mimeをサポートするようにサーバを構成する必要がある.typesファイルの最後の行にtext/cache-manifest manifestを追加
6.6 manifestファイルでのコメント使用#
6.7リソースを列挙する際、リソースをCACHE、NETWORK、FALLBACKの3つに分類する
6.8 CACHEとは、ローカルキャッシュを必要とするリソース、NETWORKとは、ローカルキャッシュを必要としないリソースを明示的に指定し、FALLBACKとは2つのリソースを指定し、1つ目はオンラインで使用し、2つ目はユーザーがオフラインになったときに使用する代替リソースを指す
6.9ブラウザがmanifestファイルを正常に読むためには、ページのhtmlラベルのmanifestプロパティにmanifestファイルのurlアドレスを指定する必要があります.
<html manifest="index.manifest">七、アプリケーションCacheオブジェクト
7.1ローカルキャッシュを表すオブジェクト
7.2インタラクション中のアプリケーションCacheオブジェクト
1ブラウザのアクセス要求http://amylover
2サーバはindexを返す.htmlページ
3ブラウザがhtmlのmanifest属性を発見した場合、checkingイベントをトリガーし、manifestファイルが存在するかどうかを確認し、errorイベントをトリガーしない.manifestファイルが存在しないことを示す.
4ブラウザ解析index.htmlは、ページのすべてのリソースを要求します.
5サーバは、4で要求されたすべてのリソースを返します.
6ブラウザはmanifestファイルを処理し、5でこれらのリソースが返された場合でも、ファイルにローカルキャッシュされたすべてのリソースを要求する.
7サーバは6で要求されたリソースを返します.
8ブラウザはアプリケーションCacheオブジェクトのdownloadingイベントをトリガし、7で返されたリソースのダウンロードを開始し、ダウンロード中にアプリケーションCacheオブジェクトのprogressイベントを周期的にトリガし、どれだけのファイルブックのダウンロードを取得し、どれだけのダウンロードキューの中で
9アプリケーションCacheオブジェクトのcachedイベントをダウンロードしてトリガーし、最初のキャッシュに成功したことを示します.
10再アクセスの場合http://amylover,1-5一致,ステップ5の実行後,ブラウザはmanifestファイルが本更新されたかどうかを確認し,アプリケーションCacheオブジェクトのnoupdateイベントがトリガーされなければ後続の操作を実行しない.
manifestファイルが更新された場合、後続の操作が実行されますが、ステップ9のcacheイベントは実行されず、updatereadyイベントがトリガーされます.
7.3更新
アプリケーション・キャッシュ・オブジェクトを使用して、ローカル・キャッシュが更新されたことをユーザーに通知したり、ローカル・キャッシュの更新を手動で行うことができます.
7.3.1アプリケーションCacheオブジェクトのundatereadyイベントとは、更新されたmanifestファイルに必要なリソースのダウンロードが完了すると、ローカルキャッシュが更新される準備ができたときにトリガーされ、ローカルキャッシュが大きい場合、ローカルキャッシュの更新は長いプロセスであり、更新中にブラウザがロックされる場合もある.最後に、ローカルキャッシュの更新中であることをユーザーに伝えるプロンプトを表示します.
applicationCache.onUpdateReady=function(){
alert(" ");
};
7.3.2 swapCache()メソッド
このメソッドを呼び出さないと、ローカルキャッシュは次のページを開くときに更新されますが、このメソッドを使用すると、ローカルキャッシュはすぐに更新されますが、swapCacheメソッドを使用してローカルキャッシュは更新されていますが、このページの画像やフッターファイルなどは更新されていませんので注意してください.ページの更新または再オープン時のみ更新
applicationCache.onUpdateReady=function(){
alert(" ");
applicationCache.swapCache();
alert(" ， ");
};