什么是離線緩存

離線緩存，就是將指定的網頁文件（例如css、js）保存到本地，當用戶沒有網絡時，依舊可以通過瀏覽器使用這些文件。

為何要用離線緩存

從網站所有者的角度來說，增加離線緩存功能，能夠讓用戶更好的使用網站。

離線緩存的設置步驟

1 配置manifest文件

2 通過JS進行緩存的控制

manifest文件的配置

1. 添加manifest屬性

將需要離線緩存的文件羅列下來，存儲于后綴名為manifest的文件當中。 在HTML文件中引入manifest文件

1. html manifest="h5course.manifest">

2. manifest文件的基本組成

基本語法：

1. CACHE MANIFEST
2. # 該符號后面的內容為注釋信息，第一行的CACHE MANIFEST不能少
3. CACHE:
4. # 需要緩存的文件
5. NETWORK:
6. # 不需要緩存的文件
7. FALLBACK:
8. # 當頁面無法訪問時的回退頁面/重定向

代碼實例：

1. CACHE MANIFEST
2. CACHE:
3. ../test.html
4. ../css/reset.css
5. ../css/test.css
6. # 需要注意的是：manifest文件中書寫的路徑，是以該文件的路徑為基礎，而非以html所在文件夾為基礎
7. NETWORK:
8. ../images/logo.jpg
9. FALLBACK

離線緩存的工作流程圖：

使用JavaScript控制緩存

緩存的各類屬性和事件，均綁定在“applicationCache”上。

1. 涉及緩存的屬性：

applicationCache.status

用于表示當前的緩存狀態，取值范圍為0~5。

0代表未緩存，通常是這些頁面沒有運用離線緩存技術，就是這個狀態。

1代表空閑，當緩存是最新的時候為1，不需要做什么操作。

2代表檢查中，即瀏覽器在檢查manifest文件是否為最新。

3代表下載中，當前有更新，并且正在下載。

4代表更新就緒，代表當前有更新，并且已經下載完畢。等待下次載入頁面的時候，進行更新。

5代表緩存過期。即找不到正確的緩存文件時候，會變成5。

2. 涉及緩存的事件：

update 用于主動更新緩存

updateready 當有新的緩存，并更新完畢之后，會觸發此事件

progress 進度事件，當進行緩存的下載時，會不斷的觸發該事件

progress中的event對象包含：loaded和total。loaded代表當前已經

加載完成的文件，total為總共需要更新的文件數。

checking 正在檢查

downloading 正在下載

obsolete 緩存過期

cached 空閑，緩存為最新狀態

error 報錯

noupdate 檢查更新結束，不需要更新

部分事件使用案例代碼：

1. // update事件使用案例
2. applicationCache.update();
3.  
4. // updateready事件使用案例
5. application.addEventListener('updateready', function(){
6.     console.log('已完成緩存的更新');
7. }, false);
8.  
9. // progress事件使用案例
10. application.addEventListener('progress', function(){
11.     console.log(applicationCache.status); 
12. }, false);

上一篇：mate name="viewport" 移動端設置詳解

下一篇：從指向看JavaScript中的一些難點