HTML5離線應(yīng)用與客戶端存儲(chǔ)的實(shí)現(xiàn)

2024-09-05 07:22:30

字體：大中小

供稿：網(wǎng)友

支持離線 Web 應(yīng)用開發(fā)是 HTML5 的另一個(gè)重點(diǎn)。所謂離線 Web 應(yīng)用，就是在設(shè)備不能上網(wǎng)的情況下仍然可以運(yùn)行的應(yīng)用。

開發(fā)離線Web 應(yīng)用需要幾個(gè)步驟。首先是確保應(yīng)用知道設(shè)備是否能上網(wǎng)，以便下一步執(zhí)行正確的操作。然后，應(yīng)用還必須能訪問一定的資源（圖像、Javascript、CSS等），只有這樣才能正常工作。最好，必須有一塊本地空間用戶保存數(shù)據(jù)，無(wú)論能否上網(wǎng)都不妨礙讀寫。

HTML5 及其相關(guān)的 API讓開發(fā)離線應(yīng)用成為現(xiàn)實(shí)。

離線檢測(cè)

要知道設(shè)備是否在線還是離線，HTML5 定義了一個(gè) navigator.onLine 屬性，這個(gè)屬性值為 true 表示設(shè)備能上網(wǎng)，值為 false 表示設(shè)備離線。

if (navigator.onLine) {    // 正常工作} else {    // 執(zhí)行離線狀態(tài)時(shí)的任務(wù)}

由于 navigator.onLine 存在一定的兼容性問題，因此除了 navigator.onLine 屬性之外，為了更好地確定網(wǎng)絡(luò)是否可用，HTML5 還定義了兩個(gè)事件 online 和 offline。

當(dāng)網(wǎng)絡(luò)在離線和在線之間切換時(shí)在 window 對(duì)象上觸發(fā)這兩個(gè)事件：

window.addEventListener('online', function() {    // 正常工作});window.addEventListener('offline', function() {    // 執(zhí)行離線狀態(tài)時(shí)的任務(wù)});

在實(shí)際應(yīng)用中，最好在頁(yè)面加載后，最好先通過 navigator.onLine 取得初始的狀態(tài)。然后通過上述兩個(gè)事件來(lái)確定網(wǎng)絡(luò)連接狀態(tài)是否變化。當(dāng)上述事件觸發(fā)時(shí)，navigator.onLine 屬性的值也會(huì)改變，不過必須要手工輪詢這個(gè)屬性才能檢測(cè)到網(wǎng)絡(luò)狀態(tài)的變化。

應(yīng)用緩存

HTML5 的應(yīng)用緩存（application cache），或者簡(jiǎn)稱為 appcache，是專門為開發(fā)離線 Web 應(yīng)用而設(shè)計(jì)的。Appcache 就是從瀏覽器的緩存中分出來(lái)的一塊緩存區(qū)。要想在這個(gè)緩存中保存數(shù)據(jù)，可以使用一個(gè)描述文件（manifest file），列出要下載和緩存的資源。描述文件示例：

CACHE MANIFEST# Commentfile.jsfile.css

然后在 html 中引用：

<html manifest="./xxx.manifest">

xxx.manifest 文件的 MIME 類型必須是 text/cache-manifest。

該 API 的核心是 applicationCache 對(duì)象，這個(gè)對(duì)象有一個(gè) status 屬性，屬性的值是常量，表示應(yīng)用緩存的如下當(dāng)前狀態(tài)：

0：無(wú)緩存，即沒有與頁(yè)面相關(guān)的應(yīng)用緩存
1：閑置，即應(yīng)用緩存未得到更新
2：檢查中，即正在下載描述文件并檢查更新
3：下載中，即應(yīng)用緩存正在下載描述文件中指定的資源
4：更新完成，即應(yīng)用緩存已經(jīng)更新了資源，而且所有資源都已下載完畢，可以通過 swapCache() 來(lái)使用了
5：廢棄，即應(yīng)用緩存的描述文件已經(jīng)不存在了，因此頁(yè)面無(wú)法再訪問應(yīng)用緩存

相關(guān)事件：

checking：在瀏覽器為應(yīng)用緩存查找更新時(shí)觸發(fā)
error：在檢查更新或者下載資源期間發(fā)生錯(cuò)誤時(shí)觸發(fā)
noupdate：在檢查描述文件發(fā)現(xiàn)文件無(wú)變化時(shí)觸發(fā)
downloading：在開始下載應(yīng)用緩存資源時(shí)觸發(fā)
progress：在文件下載應(yīng)用緩存的過程中持續(xù)不斷地觸發(fā)
updateready：在頁(yè)面新的應(yīng)用緩存下載完畢且可以通過 swapCache() 使用時(shí)觸發(fā)
cached：在應(yīng)用緩存完整可用時(shí)觸發(fā)

一般來(lái)講，這些事件會(huì)隨著頁(yè)面加載按上述順序依次觸發(fā)。也可以通過調(diào)用 update() 方法手動(dòng)觸發(fā)上述事件。

數(shù)據(jù)存儲(chǔ)

Cookie

HTTP Cookie，通常直接叫做 cookie，是在客戶端用于存儲(chǔ)會(huì)話信息的。該標(biāo)準(zhǔn)要求服務(wù)器對(duì)任意 HTTP 請(qǐng)求發(fā)送 Set-Cookie HTTP 頭信息作為響應(yīng)的一部分，其中包含會(huì)話信息。服務(wù)器響應(yīng)頭示例：