html5 如何做到application cache？離線儲存技術的簡要說明

本章我們要跟大家介紹用html5 如何做到application cache？簡要說明離線儲存技術。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

在HTML5之前，我們必須連接網路才能存取頁面。但隨著行動互聯網的興起，設備終端的位置不在固定。而行動裝置非常依賴無線訊號，可無線網路的可靠性並不穩定，例如在過隧道或是訊號強度弱的地方，無法存取網站，這無疑對使用者體驗是不好的，所以HTML5中的離線緩存（applicationCache）就解決了這個問題。

一：什麼是離線快取
## HTML5離線快取又稱為applicationCache，為Html5新功能之一，簡單理解就是第一次載入後將資料緩存，在沒有清除快取前提下，下一次沒有網路也可以加載，用在靜態資料的網頁或遊戲比較好用。當然，Html5新的特性都不是所有瀏覽器都能支援的，離線快取也是一樣。反正IE9（包括）及IE9以下的瀏覽器目前是不支援的。如果用在行動端，應該都能支援。檢測是否支援離線快取也是比較簡單的。

二：使用方法

HTML5離線緩存，是從瀏覽器的快取中分出來的一塊快取區，若要在這個快取中保存數據，需要使用描述檔（. manifest），列出需要下載和快取的資源。

1.引入manifest檔

2.引入完了之後，接下來就是test.mainfest檔案程式碼的寫了。

manifest 文件是簡單的文字文件，它會告知瀏覽器被快取的內容（以及不快取的內容）。

manifest 檔案可分為三個部分：
①CACHE MANIFEST - 在此標題下列出的檔案將在首次下載後進行快取
②NETWORK - 在此標題下列出的檔案需要與伺服器的連接，且不會被快取
③FALLBACK - 在此標題下列出的檔案規定當頁面無法存取時的回退頁面（例如404 頁面）

完整的程式碼

CACHE MANIFEST//必须以这个开头 version 1.0 //最好定义版本，更新的时候只需修改版本号 CACHE: m.png test.js test.css NETWORK: * FALLBACK online.html offline.html

manifest檔案需要設定正確的MIME-type，即“text/cache-manifest”，這個是在web伺服器上進行設定。

解析一下：
以#開頭的行表示的是註解。 CACHE下面的都是快取的文件，NETWORK表示每次都從網路請求，然後緩存，指定的文件總是從網路上請求最新的。 FALLBACK：指定的檔案若是找不到，會被重新導向到新的位址。規範都是大寫。

3.透過JS動態控制更新

應用程式在離線後將保持快取狀態，除非發生以下某種情況：
使用者清除了瀏覽器對您網站的資料儲存。
清單檔案經過修改。

請注意：更新清單中列出的某個檔案並不表示瀏覽器會重新快取該資源。清單文件本身必須進行更改。

1）快取狀態：window.applicationCache 物件是對瀏覽器的應用快取的程式存取方式。其 status 屬性可用於查看快取的目前狀態。

applicationCache.status的值如下：
0 === 未快取
　　1 === 空閒（快取為最新狀態）
　　2 === 檢查中
　　3 === 下載中
　　4 === 更新就緒
　　5 === 快取過期

var appCache = window.applicationCache; switch (appCache.status) { 　　case appCache.UNCACHED: // UNCACHED == 0 　　　　return 'UNCACHED'; 　　　　break; 　　case appCache.IDLE: // IDLE == 1 　　　　return 'IDLE'; 　　　　break; 　　case appCache.CHECKING: // CHECKING == 2 　　　　return 'CHECKING'; 　　　　break; 　　case appCache.DOWNLOADING: // DOWNLOADING == 3 　　　　return 'DOWNLOADING'; 　　　　break; 　　case appCache.UPDATEREADY: // UPDATEREADY == 4 　　　　return 'UPDATEREADY'; 　　　　break; 　　case appCache.OBSOLETE: // OBSOLETE == 5 　　　　return 'OBSOLETE'; 　　　　break; 　　default: 　　　　return 'UKNOWN CACHE STATUS'; 　　　　break; 　　};

2）主動更新快取：applicationCache.update()

要以程式設計方式更新緩存，請先呼叫 applicationCache.update()。此操作將嘗試更新使用者的快取（前提是已更改清單檔案）。最後，當applicationCache.status 處於 UPDATEREADY 狀態時，呼叫 applicationCache.swapCache() 即可將原始快取換成新快取。

var appCache = window.applicationCache; appCache.update(); // Attempt to update the user's cache. ... if (appCache.status == window.applicationCache.UPDATEREADY) { appCache.swapCache(); // The fetch was successful, swap in the new cache.

4.一個簡單的離線快取的應用程式

建立一個web工程AppCache,包含四個檔案：
appcache_offline.html

manifest檔案：test.manifest

CACHE MANIFEST #VERSION 1.0 CACHE: test.css

test.css

output { font: 2em sans-serif; }

test.js

setTimeout(function () { document.getElementById('test').value = new Date(); }, 1000);

以上是html5 如何做到application cache？離線儲存技術的簡要說明的詳細內容。更多資訊請關注PHP中文網其他相關文章！