HTML 5オフラインアプリケーション【1】
4889 ワード
オフラインWebアプリケーションの紹介
HTML 5にAPIが追加され、オフラインWebアプリケーションの開発に可能性を提供しています.Webアプリケーションをオフライン状態でも正常に動作させるためには、HTMLファイル、CSSファイル、JavaScriptスクリプトファイルなど、Webアプリケーションを構成するすべてのリソースファイルをローカルキャッシュに格納し、サーバがインターネットに接続していない場合には、ローカルキャッシュ内のリソースファイルを利用してWebアプリケーションを正常に実行する必要があります.
ローカルキャッシュとブラウザのWebキャッシュの違い
まず、ローカルキャッシュはWebアプリケーション全体にサービスされ、ブラウザのWebキャッシュは単一のWebページにのみサービスされ、どのWebページにもWebキャッシュがあり、ローカルキャッシュは指定されたキャッシュされたWebページのみをキャッシュします.
次に、Webキャッシュも安全ではなく、信頼性がありません.Webサイトでどのページがキャッシュされているのか、Web上のどのリソースがキャッシュされているのか分からないからです.ローカルキャッシュは信頼性が高く、どのコンテンツをキャッシュするか、どのコンテンツをキャッシュしないかを制御することができます.開発者はプログラミングの手段でキャッシュの更新を制御し、キャッシュオブジェクトの様々な属性、状態、イベントを利用してより強力なオフラインアプリケーションを開発することができます.
manifestファイル
Webアプリケーションのローカルキャッシュは、各ページのmanifestファイルで管理されます.manifestファイルは、キャッシュする必要があるリソースファイルまたはキャッシュする必要がないリソースファイルのファイル名、およびこれらのリソースファイルへのアクセスパスをリスト形式で列挙した簡単なテキストファイルです.各ページにmainifestファイルを個別に指定するか、Webアプリケーション全体にmanifestファイルの合計を指定できます.manifestファイルの例は次のとおりです.
manifestファイルでは、最初の行は「CACHE MANIFEST」文字でなければなりません.このファイルの役割をブラウザに通知します.つまり、ローカルキャッシュ内のリソースファイルを具体的に設定します.また、オフラインWebアプリケーションを実際に実行またはテストする場合は、サーバがtext/cache-manifestというMIMEタイプ(HTML 5ではmanifestファイルのMIMEタイプをtext/cache-manifestと規定)をサポートするようにサーバを構成する必要があります.
manifestファイルでは、コメントを付けて必要な説明や解釈を行うことができます.コメント行は「#」で始まります.ファイルにはバージョン番号を付けてmanifestファイルのバージョンを表すことができます.バージョン番号は任意の形式であってもよく、ファイルを更新するときは一般的にバージョン番号を更新します.
相対パスであっても絶対パスであってもよいリソースファイルを指定します.指定すると、各リソースファイルは1行になります.リソースファイルを指定する場合は、リソースファイルを「CACHE」、「NETWORK」、「FALLBACK」の3種類に分類できます. CACHEカテゴリで、ローカルにキャッシュする必要があるリソースファイルを指定します.あるページにローカルキャッシュが必要なリソースファイルを指定する場合、ブラウザが自動的にこのページをローカルキャッシュするため、CACHEタイプにこのページ自体を指定する必要はありません. NETWORKカテゴリは、クライアントがサーバ側に接続されている場合にのみアクセスできるローカルキャッシュされていないリソースファイルを明示的に指定します.この例の「*」はワイルドカードで、このmanifestファイルで指定されていないリソースファイルがローカルキャッシュされていないことを示します. FALLBACKカテゴリには、2つのリソースファイルが指定されています.各リソースファイルは、オンラインでアクセス可能なときに使用されるリソースファイルであり、2番目のリソースファイルは、オンラインでアクセスできないときに使用される代替リソースファイルです.
各カテゴリはオプションです.ただし、ファイルの先頭にカテゴリが指定されていない場合、ブラウザはこれらのリソースファイルをCACHEカテゴリと見なし、ファイルの最初に書かれたカテゴリが見えるまで、同じmanifestファイルに同じカテゴリを繰り返し書くことを許可します.
ブラウザがこのテキストファイルを正常に読むためには、Webアプリケーションページ上のhtml要素のmanifest属性にmanifestファイルのURLアドレスを指定する必要があります.指定方法は次のとおりです.
これらの手順で、リソースファイルをローカルキャッシュ領域に保存する基本的な操作が完了します.ローカルキャッシュ領域の内容を変更する場合は、manifestファイルを変更すればよい.ファイルが変更されると、ブラウザはmanifestファイルを自動的にチェックし、ローカルキャッシュ領域の内容を自動的に更新できます.
ブラウザとサーバのインタラクション
Webサイトに初めてアクセスするときのインタラクションは次のとおりです.ブラウザはウェブサイトへのアクセスを要求します. サーバは、要求ページ、例えばindexを返す.html; ブラウザはウェブページを解析し、HTMLファイル、画像ファイル、CSSファイル、JSファイル、manifestファイルを含むページ上のすべてのリソースファイルを要求する. サーバは、すべてのリソースファイルを返します. ブラウザはmanifestファイルを処理し、indexを含むmanifest内のローカルキャッシュを要求するすべてのファイルを要求する.htmlページ自体は、さっきこれらのファイルを要求したとしても.すべてのファイルをローカルにキャッシュする必要がある場合は、比較的大きな繰り返しのリクエストプロセスになります. サーバは、ローカルキャッシュを必要とするすべてのファイルを返します. ブラウザは、ローカルキャッシュを更新し、ページ自体を含むローカルキャッシュを要求するすべてのリソースファイルを格納し、ローカルキャッシュが更新されることを通知するイベントをトリガーします.
ブラウザはローカルキャッシュを更新しました.ブラウザを再度開いてWebサイトにアクセスし、manifestファイルが変更されていない場合は、次のようにインタラクティブになります.ブラウザは再びウェブサイトへのアクセスを要求した. ブラウザは、このページがローカルにキャッシュすることを発見し、ローカルキャッシュのindexを使用する.htmlページ; ブラウザはindexを解析する.htmlページは、すべてのローカルキャッシュ内のリソースファイルを使用します. ブラウザはサーバにmanifestファイルを要求する. サーバは、ブラウザmanifestが変化していないことを通知する304コードを返します.
ページ上のリソースファイルがローカルにキャッシュされている限り、次回ブラウザがこのページを開くときは、常にローカルキャッシュ内のリソースを使用してmanifestファイルを要求します.
ブラウザを再度開いたときにmanifestファイルが更新された場合、ブラウザとサーバ間のインタラクションは次のようになります.ブラウザは再びウェブサイトへのアクセスを要求した. ブラウザは、このページがローカルにキャッシュされていることを発見し、ローカルキャッシュのindexを使用する.htmlページ; ブラウザはindexを解析する.htmlページは、すべてのローカルキャッシュ内のリソースファイルを使用します. ブラウザはサーバにmanifestファイルを要求する. サーバは年越しmanifestファイルの更新を返します. ブラウザはmanifestファイルを処理する、そのファイルが更新されたことを発見し、indexを含むローカルキャッシュを要求するすべてのリソースファイルを要求する.htmlページ自体; サーバは、ローカルキャッシュを要求するリソースファイルを返す. ブラウザはローカルキャッシュを更新し、新しいリソースファイルをすべて格納します.ローカルキャッシュが更新されたことを通知するイベントがトリガーされます.
なお、リソースファイルが修正されても、上記の第3ステップで読み込んだリソースファイルは変化しません.例えば、ピクチャが突然新しいピクチャにならず、スクリプトファイルが突然新しいスクリプトファイルを使用することはありません.つまり、更新後のローカルキャッシュの内容はまだ使用できません.更新されたリソースファイルは、このページを再開したときにのみ使用されます.また、manifestファイルでのリソースファイルの設定を変更したくないが、サーバでキャッシュを要求したリソースファイルを変更した場合は、バージョン番号を変更することで、ブラウザにmanifestファイルが更新されたと判断させ、変更したリソースファイルを再ダウンロードすることができる.
HTML 5にAPIが追加され、オフラインWebアプリケーションの開発に可能性を提供しています.Webアプリケーションをオフライン状態でも正常に動作させるためには、HTMLファイル、CSSファイル、JavaScriptスクリプトファイルなど、Webアプリケーションを構成するすべてのリソースファイルをローカルキャッシュに格納し、サーバがインターネットに接続していない場合には、ローカルキャッシュ内のリソースファイルを利用してWebアプリケーションを正常に実行する必要があります.
ローカルキャッシュとブラウザのWebキャッシュの違い
まず、ローカルキャッシュはWebアプリケーション全体にサービスされ、ブラウザのWebキャッシュは単一のWebページにのみサービスされ、どのWebページにもWebキャッシュがあり、ローカルキャッシュは指定されたキャッシュされたWebページのみをキャッシュします.
次に、Webキャッシュも安全ではなく、信頼性がありません.Webサイトでどのページがキャッシュされているのか、Web上のどのリソースがキャッシュされているのか分からないからです.ローカルキャッシュは信頼性が高く、どのコンテンツをキャッシュするか、どのコンテンツをキャッシュしないかを制御することができます.開発者はプログラミングの手段でキャッシュの更新を制御し、キャッシュオブジェクトの様々な属性、状態、イベントを利用してより強力なオフラインアプリケーションを開発することができます.
manifestファイル
Webアプリケーションのローカルキャッシュは、各ページのmanifestファイルで管理されます.manifestファイルは、キャッシュする必要があるリソースファイルまたはキャッシュする必要がないリソースファイルのファイル名、およびこれらのリソースファイルへのアクセスパスをリスト形式で列挙した簡単なテキストファイルです.各ページにmainifestファイルを個別に指定するか、Webアプリケーション全体にmanifestファイルの合計を指定できます.manifestファイルの例は次のとおりです.
CACHE MANIFEST
# CACHE MANIFEST
# manifest
#version 7
CACHE:
other.html
hello.js
images/myphoto.jpg
NETWORK:
http://google.com/xxx
NotOffline.jsp
*
FALLBACK:
online.js locale.js
CACHE:
newhello.html
newhello.jsmanifestファイルでは、最初の行は「CACHE MANIFEST」文字でなければなりません.このファイルの役割をブラウザに通知します.つまり、ローカルキャッシュ内のリソースファイルを具体的に設定します.また、オフラインWebアプリケーションを実際に実行またはテストする場合は、サーバがtext/cache-manifestというMIMEタイプ(HTML 5ではmanifestファイルのMIMEタイプをtext/cache-manifestと規定)をサポートするようにサーバを構成する必要があります.
manifestファイルでは、コメントを付けて必要な説明や解釈を行うことができます.コメント行は「#」で始まります.ファイルにはバージョン番号を付けてmanifestファイルのバージョンを表すことができます.バージョン番号は任意の形式であってもよく、ファイルを更新するときは一般的にバージョン番号を更新します.
相対パスであっても絶対パスであってもよいリソースファイルを指定します.指定すると、各リソースファイルは1行になります.リソースファイルを指定する場合は、リソースファイルを「CACHE」、「NETWORK」、「FALLBACK」の3種類に分類できます.
各カテゴリはオプションです.ただし、ファイルの先頭にカテゴリが指定されていない場合、ブラウザはこれらのリソースファイルをCACHEカテゴリと見なし、ファイルの最初に書かれたカテゴリが見えるまで、同じmanifestファイルに同じカテゴリを繰り返し書くことを許可します.
ブラウザがこのテキストファイルを正常に読むためには、Webアプリケーションページ上のhtml要素のmanifest属性にmanifestファイルのURLアドレスを指定する必要があります.指定方法は次のとおりです.
<!-- manifest -->
<html manifest="hello.manifest">
</html>
<!-- Web manifest -->
<html manifest="global.manifest">
</html>これらの手順で、リソースファイルをローカルキャッシュ領域に保存する基本的な操作が完了します.ローカルキャッシュ領域の内容を変更する場合は、manifestファイルを変更すればよい.ファイルが変更されると、ブラウザはmanifestファイルを自動的にチェックし、ローカルキャッシュ領域の内容を自動的に更新できます.
ブラウザとサーバのインタラクション
Webサイトに初めてアクセスするときのインタラクションは次のとおりです.
ブラウザはローカルキャッシュを更新しました.ブラウザを再度開いてWebサイトにアクセスし、manifestファイルが変更されていない場合は、次のようにインタラクティブになります.
ページ上のリソースファイルがローカルにキャッシュされている限り、次回ブラウザがこのページを開くときは、常にローカルキャッシュ内のリソースを使用してmanifestファイルを要求します.
ブラウザを再度開いたときにmanifestファイルが更新された場合、ブラウザとサーバ間のインタラクションは次のようになります.
なお、リソースファイルが修正されても、上記の第3ステップで読み込んだリソースファイルは変化しません.例えば、ピクチャが突然新しいピクチャにならず、スクリプトファイルが突然新しいスクリプトファイルを使用することはありません.つまり、更新後のローカルキャッシュの内容はまだ使用できません.更新されたリソースファイルは、このページを再開したときにのみ使用されます.また、manifestファイルでのリソースファイルの設定を変更したくないが、サーバでキャッシュを要求したリソースファイルを変更した場合は、バージョン番号を変更することで、ブラウザにmanifestファイルが更新されたと判断させ、変更したリソースファイルを再ダウンロードすることができる.