HTML5 離線緩存

時間 2019-12-12

標籤 html5 html 離線緩存欄目 HTML5 简体版

原文原文鏈接

離線緩存

applicationCachecss

第一次加載後將數據緩存，若是沒有清除緩存，下一次沒有網絡也能加載。

使用

1. 使用 manifest 屬性，引入 .appcache 文件html

每一個指定了 manifest 的頁面在用戶對其訪問時都會被緩存。若是未指定 manifest 屬性，則頁面不會被緩存（除非在 manifest 文件中直接指定了該頁面）
manifest 文件的建議的文件擴展名是：.appcache

<!DOCTYPE html>
<html lang="en" manifest="demo.appcache">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    </body>
</html>

2. 編寫 demo.appcache 文件html5

CACHE MANIFEST 必須的，下面寫須要緩存的文件，將在首次下載後進行緩存
NETWORK: 下面的文件永遠不會被緩存，且離線時是不可用的
可使用星號來指示全部其餘資源/文件都須要因特網鏈接瀏覽器
```
NETWORK:
*
```
FALLBACK: 若是沒法創建因特網鏈接，則用 "offline.html" 替代 /html5/ 目錄中的全部文件，第一個 url 是資源，第二個是替補

CACHE MANIFEST
logo.png
main.js

NETWORK:
index.css

FALLBACK:  
# 訪問失敗後 重定向
/html5/ /404.html

目前爲止就實現了離線緩存緩存

緩存狀態

window.applicationCache.status 查看緩存的當前狀態網絡

0 == UNCACHED === 未緩存
1 == IDLE === 空閒（緩存爲最新狀態）
2 == CHECKING === 檢查中
3 == DOWNLOADING === 下載中
4 == UPDATEREADY === 更新就緒
5 == OBSOLETE === 緩存過時

緩存相關事件

1. updateready 當有新的緩存，並更新完之後，觸發此事件設計

window.applicationCache.onupdateready = function(){
    alert("緩存更新完成");
},false);

2. progress 有新的緩存，在下載過程當中，會間斷性觸發code

event包含：loaded和total。loaded表明當前已經加載完成的文件，total爲總共須要更新的文件數

applicationCache.onprogress = function(e){
    alert(applicationCache.status); //3...    3表示正在下載
},false);

3. cached 下載完成而且首次將應用程序下載到緩存中時觸發

4. updaterady 更新完成，下載完成並將緩存中的應用程序更新後觸發
觸發此事件的時候，用戶任然能夠看到老版本的應用程序

5. error 瀏覽器處於離線狀態，檢查清單列表失敗
當一個未緩存的應用程序引用一個不存在的清單文件，也會觸發此事件

6. obsolete 若是一個緩存的應用程序引用一個不存在的清單文件會觸發

7. checking 正在檢查，每次載入一個設置了manifest屬性的html文件，瀏覽器都會觸發

8. downloading 正在下載

9. noupdate 檢查更新結束，沒有須要更新

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

HTML5 離線緩存

離線緩存

使用

緩存狀態

相關方法

緩存相關事件