html5-離線緩存
阿新 • • 發佈：2018-11-16
eve 一行 ack tex 開頭 狀態 -m date 文件的
AddType text/cache-manifest manifest
AddType text/cache-manifest .appcache
接下來就是緩存文件的配置了：
創建一個後綴名為manifest的文件(或appcache)，並在html頁面中引入
例如：<html manifest=”test.manifest”>
manifest文件結構：
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 === 緩存過期
關於離線緩存的技術點就這麽多了
總之，使用離線緩存用戶可在應用離線時使用它們，離線瀏覽，運行速度也會比較快，因為已緩存資源加載得更快，還可以減少服務器壓力，瀏覽器將只從服務器下載更新過或更改過的資源。
什麽是離線緩存，為什麽要用它？這是我們需要思考的問題。
顧名思義，離線緩存，就是離線了你的東西內容也緩存了下來，放在我們的開發項目中就是，當你有網絡的情況下，將你需要的內容，頁面，樣式邏輯功能存下來，這樣在離線的時候同樣能夠看到這些東西，不至於出現空白。
往往在我們做飛機火車地鐵的時候，總有斷網的時候，這個時候你或許在刷著手機看新聞，看小說等，那麽斷網了，為了更好的用戶體驗，我們肯定不能讓用戶所看的頁面出現空白，這個時候我們必須使用離線緩存技術將用戶當前看到的以及將要看到的存儲下來。
那麽離線緩存是怎麽實現的呢？首先，在項目開發中，必須要判斷瀏覽器是否支持離線緩存，通過 進行判斷，ie是不支持的，其次，在開發中需要在服務器做manifest的配置，如下：
AddType text/cache-manifest manifest
AddType text/cache-manifest .appcache
接下來就是緩存文件的配置了：
創建一個後綴名為manifest的文件(或appcache)，並在html頁面中引入
例如：<html manifest=”test.manifest”>
manifest文件結構：
第一行必須為CACHE MANIFEST
CACHE MANIFEST（必須大寫）
v1.0.0
CACHE:（必須） 在此標題下列出的文件將在首次下載後進行緩存
緩存文件
test.css
NETWORK:（可選）在此標題下列出的文件需要與服務器連接，不會被緩存
不緩存文件
test2.css
FALLBACK:（可選）在此標題下列出的文件規定當頁面無法訪問時的回退頁
頁面無法訪問時
test.html 404.html
單行註釋：#開頭
這是我們需要配置的緩存文件，名字一定不能更改哈。
離線緩存的基本運行流程是這樣的：
在離線緩存技術中還提供了如下的方法進行緩存更新操作等：
1、update()：檢測更新manifest文件
2、updateready事件：當有新的緩存，並更新完以後，會觸發此事件
update方法會觸發updateready事件
window.applicationCache.update();
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 === 緩存過期
關於離線緩存的技術點就這麽多了
總之，使用離線緩存用戶可在應用離線時使用它們，離線瀏覽，運行速度也會比較快，因為已緩存資源加載得更快，還可以減少服務器壓力，瀏覽器將只從服務器下載更新過或更改過的資源。
html5-離線緩存