HTML5 離線應用程式 介面實現離線資料緩衝【精心收藏】

標籤：

1.配置快取檔案 cache manifest

MIME TYPE：text/cache-manifest
檔案名稱：name.appcache
作用：用於配置需要緩衝的檔案

2.使用方法

在伺服器上添加MIME TYPE
在apache virtual host 中添加

1 AddType text/cache-manifest .appcache

建立 name.manifest，檔案尾碼可自訂，定義後需要在伺服器上添加對應的MIME TYPE

 1 CACHE MANIFEST   2    3 #VERSION 1.0   4    5 CACHE:   6 index.html   7 ./js/jquery.js   8 ./css/style.css   9   10 NETWORK:  11 ./upload/  12   13 FAILBACK:  14 ./proxy/ proxy.html  

CACHE MANIFEST：檔案標識
#VERSION 1.0 ：版本號碼，只是一行注釋，但改變可以更新緩衝
CACHE：表示要緩衝的檔案
NETWORK：表示需要串連伺服器的檔案
FAILBACK：表示當沒有響應時的替代方案

 <html>標籤添加manifest屬性

1 <html manifest="name.appcache">

3.更新方法

1.自動更新：瀏覽器在第一次訪問時訪問應用緩衝，之後只會在cache manifest檔案發生變化時更新緩衝（即使注釋變化也會更新，#VERSION 1.0的作用），而cache manifest中的資源檔發生變化則不會觸發更新。

2.手動更新：以編程方法更新緩衝，先調用applicationCache.update()，此操作嘗試更新使用者的緩衝（前提是cache manifest檔案有更改）。然後當applicationCache.status為UPDATEREADY狀態時，調用applicationCache.swapCache()即可將原緩衝換成新緩衝。

代碼如下：

1 var appCache = window.applicationCache;  2 appCache.update(); // Attempt to update the user‘s cache.  3 ...  4 if (appCache.status == window.applicationCache.UPDATEREADY) {  5     appCache.swapCache(); // The fetch was successful, swap in the new cache.  6 } 

使用update() 和 swapCache() 不會向使用者提供更新的資源，只會讓瀏覽器檢查是否有新的cache manifest清單，下載指定的更新內容及重新填充應用緩衝。因此需要兩次載入才能向使用者提供新內容。第一次是獲得新的應用緩衝，第二次是重新整理網頁內容。

避免重新載入兩次的麻煩，可以設定監聽器，監聽網頁載入時updateready的事件。

代碼如下：

 1 // Check if a new cache is available on page load.   2 window.addEventListener(‘load‘, function(e) {   3     window.applicationCache.addEventListener(‘updateready‘, function(e) {   4         if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {   5         // Browser downloaded a new app cache.   6         // Swap it in and reload the page to get the new hotness.   7             window.applicationCache.swapCache();   8             if (confirm(‘A new version of this site is available. Load it?‘)) {   9                 window.location.reload();  10             }  11         } else {  12             // Manifest didn‘t changed. Nothing new to server.  13         }  14     }, false);  15 }, false); 

4.線上狀態檢測和監視

檢測：navigator.onLine 屬性工作表示當前是否線上，如果為 true，表示線上。如果為 false， 表示離線。
監視：當線上/離線狀態切換時，會觸發online/offline事件，這兩個事件觸發在body元素上，並且沿著document.body，document 和 window的順序冒泡。

5.測試

chromw 瀏覽器的內建測試載入器，console會顯示緩衝的情況

1 Document was loaded from Application Cache with manifest http://localhost/fdipzone/test.appcache main.html:31  2 Application Cache Checking event main.html:31  3 Application Cache Downloading event main.html:31  4 Application Cache Progress event (0 of 1) http://localhost/fdipzone/main.html main.html:31  5 Application Cache Progress event (1 of 1)  main.html:31  6 Application Cache UpdateReady event  

6.注意事項

1. 網站離線儲存的容量限制是5M
2. 如果manifest檔案，或者內部列舉的某一個檔案不能正常下載，整個更新過程將視為失敗，瀏覽器繼續全部使用老的緩衝
3. 引用manifest的html必須與manifest檔案同源，在同一個域下
4. 在manifest中使用的相對路徑，相對參照物為manifest檔案
5. CACHE MANIFEST字串應在第一行，且必不可少
6. 系統會自動緩衝引用資訊清單檔的 HTML 檔案
7. manifest檔案中CACHE則與NETWORK，FALLBACK的位置順序沒有關係，如果是隱式聲明需要在最前面
8. FALLBACK中的資源必須和manifest檔案同源
9. 當一個資源被緩衝後，該瀏覽器直接請求這個絕對路徑也會訪問緩衝中的資源。
10. 網站中的其他頁面即使沒有設定manifest屬性，請求的資源如果在緩衝中也從緩衝中訪問
11. 當manifest檔案發生改變時，資源請求本身也會觸發更新

HTML5 離線應用程式 介面實現離線資料緩衝【精心收藏】