溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

html5-離線緩存

發(fā)布時(shí)間：2020-07-26 09:09:30 來(lái)源：網(wǎng)絡(luò) 閱讀：181 作者：Mirandam 欄目：web開(kāi)發(fā) 
什么是離線緩存，為什么要用它？這是我們需要思考的問(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ī)火車(chē)地鐵的時(shí)候，總有斷網(wǎng)的時(shí)候，這個(gè)時(shí)候你或許在刷著手機(jī)看新聞，看小說(shuō)等，那么斷網(wǎng)了，為了更好的用戶(hù)體驗(yàn)，我們肯定不能讓用戶(hù)所看的頁(yè)面出現(xiàn)空白，這個(gè)時(shí)候我們必須使用離線緩存技術(shù)將用戶(hù)當(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)：

第一行必須為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
單行注釋?zhuān)?開(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)就這么多了
總之，使用離線緩存用戶(hù)可在應(yīng)用離線時(shí)使用它們，離線瀏覽，運(yùn)行速度也會(huì)比較快，因?yàn)橐丫彺尜Y源加載得更快，還可以減少服務(wù)器壓力，瀏覽器將只從服務(wù)器下載更新過(guò)或更改過(guò)的資源。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手