html5-離線緩存

什么是離線緩存，為什么要用它？這是我們需要思考的問(wèn)題。

顧名思義，離線緩存，就是離線了你的東西內(nèi)容也緩存了下來(lái)，放在我們的開(kāi)發(fā)項(xiàng)目中就是，當(dāng)你有網(wǎng)絡(luò)的情況下，將你需要的內(nèi)容，頁(yè)面，樣式邏輯功能存下來(lái)，這樣在離線的時(shí)候同樣能夠看到這些東西，不至于出現(xiàn)空白。
往往在我們做飛機(jī)火車地鐵的時(shí)候，總有斷網(wǎng)的時(shí)候，這個(gè)時(shí)候你或許在刷著手機(jī)看新聞，看小說(shuō)等，那么斷網(wǎng)了，為了更好的用戶體驗(yàn)，我們肯定不能讓用戶所看的頁(yè)面出現(xiàn)空白，這個(gè)時(shí)候我們必須使用離線緩存技術(shù)將用戶當(dāng)前看到的以及將要看到的存儲(chǔ)下來(lái)。
那么離線緩存是怎么實(shí)現(xiàn)的呢？首先，在項(xiàng)目開(kāi)發(fā)中，必須要判斷瀏覽器是否支持離線緩存，通過(guò) 進(jìn)行判斷，ie是不支持的，其次，在開(kāi)發(fā)中需要在服務(wù)器做manifest的配置，如下：
（wamp\Apache2\conf\mime.types）
AddType text/cache-manifest manifest
AddType text/cache-manifest .appcache
接下來(lái)就是緩存文件的配置了：
創(chuàng)建一個(gè)后綴名為manifest的文件(或appcache)，并在html頁(yè)面中引入
例如：<html manifest=”test.manifest”>
manifest文件結(jié)構(gòu)：

目前成都創(chuàng)新互聯(lián)公司已為上千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站運(yùn)營(yíng)、企業(yè)網(wǎng)站設(shè)計(jì)、湘潭縣網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

第一行必須為CACHE MANIFEST

CACHE MANIFEST（必須大寫(xiě)）

v1.0.0

CACHE:（必須）在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存

緩存文件

test.css
NETWORK:（可選）在此標(biāo)題下列出的文件需要與服務(wù)器連接，不會(huì)被緩存

不緩存文件

test2.css
FALLBACK:（可選）在此標(biāo)題下列出的文件規(guī)定當(dāng)頁(yè)面無(wú)法訪問(wèn)時(shí)的回退頁(yè)

頁(yè)面無(wú)法訪問(wèn)時(shí)

test.html 404.html
單行注釋：#開(kāi)頭
這是我們需要配置的緩存文件，名字一定不能更改哈。
離線緩存的基本運(yùn)行流程是這樣的：

在離線緩存技術(shù)中還提供了如下的方法進(jìn)行緩存更新操作等：
1、update()：檢測(cè)更新manifest文件
2、updateready事件：當(dāng)有新的緩存，并更新完以后，會(huì)觸發(fā)此事件
update方法會(huì)觸發(fā)updateready事件
window.applicationCache.update();
window.applicationCache.addEventListener('updateready',function(){
alert('更新完成')
},false);
3、swapCache方法：用來(lái)執(zhí)行本地緩存的更新操作
觸發(fā)updateready事件時(shí)調(diào)用swapCache方法
window.applicationCache.update();
window.applicationCache.addEventListener('updateready',function(){
window.applicationCache.swapCache();
},false);
4、applicationCache.status 本地緩存的狀態(tài)
0 ===未緩存 1=== 空閑（緩存為最新?tīng)顟B(tài)）2 === 檢查中
3 === 下載中4 === 更新就緒5 === 緩存過(guò)期
關(guān)于離線緩存的技術(shù)點(diǎn)就這么多了
總之，使用離線緩存用戶可在應(yīng)用離線時(shí)使用它們，離線瀏覽，運(yùn)行速度也會(huì)比較快，因?yàn)橐丫彺尜Y源加載得更快，還可以減少服務(wù)器壓力，瀏覽器將只從服務(wù)器下載更新過(guò)或更改過(guò)的資源。

本文題目：html5-離線緩存
新聞來(lái)源：http://muchs.cn/article36/jpjpsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、微信小程序、定制網(wǎng)站、軟件開(kāi)發(fā)、用戶體驗(yàn)、網(wǎng)站策劃

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容