HTML5 離線應(yīng)用之打造零請(qǐng)求、無(wú)流量網(wǎng)站的解決方法

發(fā)布時(shí)間：2013-04-25 11:04:06 作者：佚名

今天Web應(yīng)用程序已經(jīng)很復(fù)雜了，以現(xiàn)在的發(fā)展，會(huì)將越來(lái)越復(fù)雜，但他有一個(gè)致命缺點(diǎn)，不能脫離internet鏈接，因此在HTML中新增了一API，它使用一個(gè)本地存儲(chǔ)機(jī)制很好地解決了這個(gè)問(wèn)題，為離線web應(yīng)用鋪平了道路

前言

今天Web應(yīng)用程序已經(jīng)很復(fù)雜了，以現(xiàn)在的發(fā)展，會(huì)將越來(lái)越復(fù)雜，但他有一個(gè)致命缺點(diǎn)，不能脫離internet鏈接，因此在HTML中新增了一API，

它使用一個(gè)本地存儲(chǔ)機(jī)制很好地解決了這個(gè)問(wèn)題，為離線web應(yīng)用鋪平了道路。
本地緩存于瀏覽器緩存

復(fù)制代碼

代碼如下:

本地緩存是為整個(gè)web應(yīng)用程序服務(wù)
瀏覽器緩存只對(duì)單個(gè)網(wǎng)頁(yè)服務(wù) 任何網(wǎng)頁(yè)都具有網(wǎng)頁(yè)緩存
本地緩存只緩存那些你指定緩存的頁(yè)面 網(wǎng)頁(yè)緩存不可靠、不安全，因?yàn)槲覀儾恢谰W(wǎng)站中到底緩存了哪些頁(yè)面、哪些資源
本地緩存可以控制對(duì)哪些內(nèi)容進(jìn)行緩存

manifest文件

web應(yīng)用程序本地緩存是通過(guò)每個(gè)頁(yè)面的manifest文件來(lái)管理的，manifest是一簡(jiǎn)單文本，在該文件中以清單的形式列舉了需要被緩存的不需要被緩存的文件的名字、路徑。

可以為每個(gè)頁(yè)面單獨(dú)指定manifest也可以為整個(gè)應(yīng)用程序指定，例我們?yōu)閔ello.htm的設(shè)置：

復(fù)制代碼

代碼如下:

CACHE MANIFEST
CACHE:
other.html
hellow.js
images/myphoto.jpg
NETWORK:
http://LuLinniu/NotOffline
NotOffline.asp
*
FALLBACK:
online.js locale.js
CACHE:
newhellow.html
newhellow.js

在manifest文件中，第一行必須是CACHE MANIFEST，以把文本的作用告訴瀏覽器，即對(duì)本地緩存中的資源文件進(jìn)行具體設(shè)置。
同時(shí)真正運(yùn)行離線web應(yīng)用程序時(shí)，需要對(duì)服務(wù)器進(jìn)行配置，讓服務(wù)器支持text/cache-manifest這個(gè)mime類型。

在指定文件源文件時(shí)可以把資源文件分為三類，CACHE、NETWORK、FALLBACK

復(fù)制代碼

代碼如下:

在CACHE類別中指定需要被緩存在本地的資源文件，為某個(gè)頁(yè)面指定需要本地緩存的資源文件時(shí)，不需要把這個(gè)頁(yè)面本身指定在CACHE類別中，
因?yàn)槿绻粋€(gè)頁(yè)面具有manifest文件，瀏覽器會(huì)自動(dòng)對(duì)該頁(yè)面進(jìn)行本地緩存 NETWORK類別為顯式指定不進(jìn)行緩存的資源文件，這些文件只有建立服務(wù)器端鏈接才能訪問(wèn)，本例使用通配符*表示沒(méi)有進(jìn)行記錄的都不緩存 FALLBACK類別中的每行中指定兩個(gè)資源文件，第一個(gè)資源文件為能夠在線訪問(wèn)時(shí)使用的資源文件，第二個(gè)為不能在線訪問(wèn)時(shí)使用的本地緩存文件

瀏覽器與服務(wù)器交互過(guò)程

當(dāng)使用離線web應(yīng)用程序進(jìn)行工作時(shí)，有必要了解瀏覽器與服務(wù)器之間的交互過(guò)程：

復(fù)制代碼

代碼如下:

比如一個(gè)http://LuLingniu，以index.htm為主頁(yè)，該主頁(yè)使用index.manifest，
在文件中緩存index.htm，hello.js，hello.jpg，首次訪問(wèn)時(shí)流程如下：
瀏覽器請(qǐng)求url
服務(wù)器返回index.htm首頁(yè)
瀏覽器解析index.htm網(wǎng)頁(yè)，請(qǐng)求頁(yè)面上所有資源文件
服務(wù)器返回資源文件
瀏覽器處理manifest文件，請(qǐng)求manifest中需要緩存的文件，即使請(qǐng)求過(guò)亦會(huì)再請(qǐng)求
服務(wù)器返回需要緩存的文件
瀏覽器對(duì)本地緩存進(jìn)行更新，存入資源文件，并觸發(fā)一個(gè)事件通知本地緩存更新 再次打開(kāi)該URL
請(qǐng)求url
瀏覽器發(fā)現(xiàn)頁(yè)面被緩存，于是使用本地緩存文件
解析文件
瀏覽器像服務(wù)器請(qǐng)求manifest文件
服務(wù)器返回304，通知manifest文件沒(méi)有變化（若是改變將會(huì)有所不同）

applicationCache對(duì)象

該對(duì)象代表了本地緩存，可以用它來(lái)通知用戶本地緩存已經(jīng)被更新，也允許手動(dòng)更新本地緩存。

前面當(dāng)瀏覽器對(duì)本地緩存做了更新裝入新資源文件時(shí)，會(huì)觸發(fā)applicationCache對(duì)象的updateready事件，通知本地緩存已被修改，然后提示用戶手動(dòng)刷新頁(yè)面。
swapCache

swapCache方法用來(lái)手動(dòng)執(zhí)行本地緩存的更新，它只能在applicationCache對(duì)象的updateReady事件觸發(fā)時(shí)調(diào)用，

即當(dāng)資源文件發(fā)生改變時(shí)，可使用此方法手工緩存更新。