h5离线应用
h5離線應(yīng)用
所謂離線應(yīng)用，就是斷網(wǎng)之后還可以運(yùn)行的應(yīng)用。h5提供了application cache，可以保存網(wǎng)頁的離線數(shù)據(jù)。CSDN的Markdown編輯器就運(yùn)用了application cache，在沒有網(wǎng)絡(luò)的情況下，一樣可以正常使用，這就是一個(gè)很好的離線應(yīng)用。
application cache和http緩存有時(shí)候很相似，http緩存也可以把瀏覽過的網(wǎng)頁緩存下來，在斷網(wǎng)情況下也可以打開。但是http緩存是會(huì)過期的，而application cache是永久的。http緩存像是一個(gè)快照，只是保存了網(wǎng)頁的某個(gè)狀態(tài)，而離線應(yīng)用是實(shí)實(shí)在在的在運(yùn)行。當(dāng)網(wǎng)頁是一個(gè)“單頁應(yīng)用”時(shí)更能體現(xiàn)兩者的區(qū)別。
在chorme瀏覽器下，可以訪問：
- application cache 地址: chrome://appcache-internals/
- http cache 地址 : chrome://cache/
查看兩者。
實(shí)現(xiàn)一個(gè)h5離線應(yīng)用
首先，需要一個(gè)清單文件，指出哪些文件是需要離線存儲(chǔ)的。文件的名稱和后綴都是可以是隨意的，如下面這個(gè)文件可以命名為：appcache.manifest，如果服務(wù)器識(shí)別不了這樣的后綴，則需要將這種后綴配置到服務(wù)器
CACHE MANIFEST CACHE: common.css common.js icon.jpgNETWORK: imgs/good1.jpg imgs/good2.jpgFALLBACK: good1.jpg offline/imgs/good1.jpgCACHE MANIFEST : 清單文件的第一行必須是這個(gè)，表示這是一個(gè)清單文件
CACHE: 后面跟著需要離線的文件
NETWORK: 后面跟著的文件表示是需要從網(wǎng)絡(luò)上獲取的
FALLBACK: 這個(gè)標(biāo)簽是可選的，后面每一行有兩個(gè)文件，表示當(dāng)?shù)谝粋€(gè)文件訪問不了時(shí)，使用第二個(gè)文件。
需要注意的是，清單上的文件路徑不能有錯(cuò)，只要一個(gè)有錯(cuò)，所以文件都不會(huì)離線保存。
第二步是，在需要離線的網(wǎng)頁的<html>標(biāo)簽上增加manifest屬性，指向上面的清單文件。
<html manifest = "appcache.manifest">... </html>每一個(gè)需要離線的網(wǎng)頁都需要配置一個(gè)manifest屬性，從這也可以看出，h5的application cache更適合“單頁應(yīng)用”，而不是網(wǎng)站。
就這樣，一個(gè)離線應(yīng)用就完成了，當(dāng)你第一次打開帶有manifest屬性的網(wǎng)頁時(shí)，瀏覽器就會(huì)把離線文件下載下來，以后每次運(yùn)行，都直接從緩存里拿這些文件。
在chorme瀏覽器下，可以按F12打開調(diào)試工具，選擇“網(wǎng)絡(luò)”，設(shè)成“offline”來模擬斷網(wǎng)：
要觀察到效果，禁用掉http緩存更好。
更新離線文件
自動(dòng)更新
離線文件一旦緩存下來，瀏覽器以后都將使用離線文件，不會(huì)再向服務(wù)器請(qǐng)求該文件，也不知道服務(wù)器端的文件是否更新。但是，瀏覽器會(huì)在每次打開網(wǎng)頁的時(shí)候，檢查manifest文件是否是最新，所以只要manifest文件發(fā)生變化時(shí)，瀏覽器就會(huì)更新一遍離線文件，這便是自動(dòng)更新。
手動(dòng)更新
可以通過window.applicationCache對(duì)象來手動(dòng)更新離線緩存。
參考
應(yīng)用緩存初級(jí)使用指南
九種瀏覽器端緩存機(jī)制知多少
使用HTTP緩存
總結(jié)
- 上一篇： iOS开发知识概览
- 下一篇： PageHelper工作原理