啟動html5的應用緩存
<!DOCTYPE HTML> <html manifest="filename.appcache"> </html>
filename.appcache的例子
CACHE MANIFEST
# 版本標識 v1
# 必選 緩存文件
CACHE:
/webapp/html/resource/test.css
/webapp/html/test.html
# 可選 需要聯網
NETWORK:
/webapp/html/HCApproval_Main.html
# * 表示全部都需要
# 可選 失敗的重定向
# FALLBACK:
# / webapp/html/help.html
更新緩存
瀏覽器清除緩存
filename.appcache 文件的任意修改，也會觸發緩存更新
JS更新緩存
window.addEventListener('load', function(){
// window.applicationCache.update(); // 手動更新緩存 或者 監聽到加載緩存完成事件后 刷新頁面
window.applicationCache.addEventListener("updateready", function(e){
console.log(window.applicationCache.status);
setTimeout(function(){
window.location.reload();
}, 3000);
});
});
window.applicationCache 對象屬性和事件方法
window.applicationCache.status 的幾個值
- UNCACHED (0)：未啟用離線應用
- IDLE (1)：已開啟離線應用，但本地緩存的資源是最新的，並且未標記為廢棄資源
- CHECKING (2)：當前更新緩存的狀態為“檢查中”
- DOWNLOADING (3)：當前更新緩存的狀態為“下載資源中”
- UPDATEREADY (4)：當前更新緩存的狀態為“更新完畢”
- OBSOLETE (5)：已開啟離線應用，但緩存資源都已標記為廢棄