HTML5-Offline APIs的簡單介紹

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
  要使用離線功能，需要指定哪些資源離線快取，這透過標記的manifest#屬性指定一個以.manifest為擴展名的清單文件，需要離線緩存的資源、不要緩存的資源以及失敗的請求替換頁都在清單文件中列出。而且，清單檔案的MIME類型必須是text/cache-manifest，這個MIME類型要從伺服器端定義。清單的第一行不能為註解。
  失敗請求部分包括兩個方面，第一個是要請求的內容，可以為資料夾；第二個是請求失敗的替換內容。
  如果需要更新緩存，只要更新清單文件，瀏覽器就會自動更新所有快取。但是，前提是清單檔案不被快取（預設會被快取），可以透過修改伺服器的快取設定來解決此問題。
  範例如下：

  CACHE MANIFEST
  # 井號行為註解。以下的「CACHE:」可以省略
  CACHE:

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

  #do not cache signup page
  #可以使用一個星號（*），這樣，所有未被明確緩存的資源都不會被快取
  NETWORK
  signup.html

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

4.applicationCache物件
#   window.applicationCache物件是Web離線應用程式API的核心對象，它包括快取狀態屬性window.applicationCache.status和一些與快取狀態相關的事件屬性。

5.快取狀態與事件
  window.applicationCache.status有六種值，如下：
  •0( UNCACHED )：對應oncached事件屬性，沒有快取
  •1( IDLE )：對應oncached事件屬性，所有快取清單中的資源處於快取狀態。
  •2( CHECKING )：對應onchecking事件屬性，檢查快取。
  •3( DOWNLOADING )：對應ondownloading事件屬性，下載快取。
  •4( UPDATEREADY )：對應onupdateready事件屬性，準備更新快取。
  •5( OBSOLETE )：對應onobsolete事件屬性，某個資源已緩存，但清單中沒有。
  還有三個事件屬性：
  •onerror：產生錯誤。
  •onnoupdate：沒有可用更新。
  •onprogress：正在更新快取。

6.window.applicationCache.update()方法
  呼叫此方法請求瀏覽器更新緩存，包括檢查新版本的清單檔案和下載必要地新資源。如果沒有緩存，或緩存已廢棄，則將產生錯誤。

 

以上是HTML5-Offline APIs的簡單介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！