您好,登錄后才能下訂單哦!
什么是離線緩存,為什么要用它?這是我們需要思考的問題。
顧名思義,離線緩存,就是離線了你的東西內容也緩存了下來,放在我們的開發項目中就是,當你有網絡的情況下,將你需要的內容,頁面,樣式邏輯功能存下來,這樣在離線的時候同樣能夠看到這些東西,不至于出現空白。
往往在我們做飛機火車地鐵的時候,總有斷網的時候,這個時候你或許在刷著手機看新聞,看小說等,那么斷網了,為了更好的用戶體驗,我們肯定不能讓用戶所看的頁面出現空白,這個時候我們必須使用離線緩存技術將用戶當前看到的以及將要看到的存儲下來。
那么離線緩存是怎么實現的呢?首先,在項目開發中,必須要判斷瀏覽器是否支持離線緩存,通過 進行判斷,ie是不支持的,其次,在開發中需要在服務器做manifest的配置,如下:
(wamp\Apache2\conf\mime.types)
AddType text/cache-manifest manifest
AddType text/cache-manifest .appcache
接下來就是緩存文件的配置了:
創建一個后綴名為manifest的文件(或appcache),并在html頁面中引入
例如:<html manifest=”test.manifest”>
manifest文件結構:
CACHE MANIFEST(必須大寫)
CACHE:(必須) 在此標題下列出的文件將在首次下載后進行緩存
test.css
NETWORK:(可選)在此標題下列出的文件需要與服務器連接,不會被緩存
test2.css
FALLBACK:(可選)在此標題下列出的文件規定當頁面無法訪問時的回退頁
test.html 404.html
單行注釋:#開頭
這是我們需要配置的緩存文件,名字一定不能更改哈。
離線緩存的基本運行流程是這樣的:
在離線緩存技術中還提供了如下的方法進行緩存更新操作等:
1、update():檢測更新manifest文件
2、updateready事件:當有新的緩存,并更新完以后,會觸發此事件
update方法會觸發updateready事件
window.applicationCache.update();
window.applicationCache.addEventListener('updateready',function(){
alert('更新完成')
},false);
3、swapCache方法:用來執行本地緩存的更新操作
觸發updateready事件時調用swapCache方法
window.applicationCache.update();
window.applicationCache.addEventListener('updateready',function(){
window.applicationCache.swapCache();
},false);
4、applicationCache.status 本地緩存的狀態
0 ===未緩存 1=== 空閑(緩存為最新狀態)2 === 檢查中
3 === 下載中4 === 更新就緒5 === 緩存過期
關于離線緩存的技術點就這么多了
總之,使用離線緩存用戶可在應用離線時使用它們,離線瀏覽,運行速度也會比較快,因為已緩存資源加載得更快,還可以減少服務器壓力,瀏覽器將只從服務器下載更新過或更改過的資源。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。