HTML5 オフライン API の簡単な紹介

1. ブラウザサポートの検出

if
(window.application
Cache
) { 
      // this browser supports offline applications 
   }

2. オンラインとオフラインのステータスの検出とイベント

// When the page loads, 
set
 the status to online or offline 
   function loadDemo() { 
      if (navigator.onLine) { 
         log("Online"); 
      } 
else
 { 
         log("Offline"); 
      } 
   } 
   // Now add event 
list
eners to notify a change in online status 
   window.addEventListener("online", function(e) { 
     log("Online"); 
   }, true); 
   window.addEventListener("offline", function(e) { 
     log("Offline"); 
   }, true);

3. オフライン機能を使用するには、どのリソースがオフラインであるかを指定する必要があります
キャッシュ , これは、 タグのマニフェスト 属性 を使用して、拡張子が .manifest のマニフェスト ファイルを指定します。オフラインでキャッシュする必要があるリソース、キャッシュされないリソース、および失敗したリクエスト置換ページがすべてマニフェストにリストされます。ファイル。また、マニフェストファイルの MIME タイプは text/cache-manifest である必要があり、この MIME タイプはサーバー側で定義する必要があります。リストの最初の行はコメントできません。 失敗したリクエストの部分には 2 つの側面が含まれます。1 つ目はリクエストされるコンテンツであり、2 つ目は失敗したリクエストの置換コンテンツです。
キャッシュを
更新する必要がある場合は、マニフェストファイルを更新するだけで、ブラウザがすべてのキャッシュを自動的に更新します。ただし、マニフェスト ファイルがキャッシュされていない場合 (デフォルトではキャッシュされています)、これはサーバーのキャッシュ設定を変更することで解決できます。 例は次のとおりです:

キャッシュマニフェスト
# ハッシュ記号
動作 コメント。次の「CACHE:」は省略できます CACHE:

  # 
file
s to cache 
   about.html 
   
html5
.css 
   index.html 
   happy-trails-rc.gif 
   lake-tahoe.JPG

#サインアップページをキャッシュしません

#明示的にキャッシュされていないすべてのリソースがキャッシュされないように、アスタリスク (*) を使用できます
ネットワーク
サインアップ.html

 FALLBACK 
   signup.html     offline.html 
   /app/ajax/      default.html
   media/          images/video-fallback.jpg
   /               /offline.html

4.applicationCache

object window.applicationCache オブジェクトは、Web オフライン アプリケーション
API のコア オブジェクトであり、キャッシュ ステータス属性 window.applicationCache.status と、キャッシュに関連するいくつかのイベント属性が含まれています。状態。

5. キャッシュのステータスとイベント

window.applicationCache.status には次の 6 つの値があります:
•0(UNCACHED): oncached イベント属性に対応し、キャッシュなし
•1(IDLE): oncached イベント属性に対応します。 、すべてのキャッシュ リスト のリソースはキャッシュされた状態にあります。
•2(CHECKING): onchecking イベント属性に対応し、キャッシュをチェックします。
•3(DOWNLOADING): ondownloading イベント属性、ダウンロード キャッシュに対応します。
•4(UPDATEREADY): onupdateready イベント属性に対応し、キャッシュの更新の準備をします。
•5(OBSOLETE): onobsolete イベント属性に対応し、リソースはキャッシュされていますが、リストには含まれていません。
3 つのイベント属性もあります。
•onerror: エラーが発生します。
•onnoupdate: 利用可能なアップデートはありません。
•onprogress: キャッシュは更新中です。

6.window.applicationCache.update() メソッド

このメソッドを呼び出して、マニフェスト ファイルの新しいバージョンの確認や必要な新しいリソースのダウンロードなど、キャッシュの更新をブラウザーに要求します。キャッシュがない場合、またはキャッシュが古い場合は、エラーが生成されます。

以上がHTML5 オフライン API の簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。