web app不比PC,有效能和流量的考慮,離線應用越來越重要,雖然瀏覽器有快取機制,但是時常不靠譜,更何況普通情況下html檔案是沒法快取的,斷網子之後一切over。
什麼是manifest?
簡單來說manifest能讓你的應用在無網的情況下也能訪問。
它有三大優勢:
1、離線瀏覽,無網情況下也能正常存取;
2、更快的載入速度,快取在本地存取速度自然更快;
3、減輕服務請求壓力,檔案快取後不需要再次請求,只需要請求需要更新的檔案。
如何使用?
XML/HTML Code複製內容到剪貼簿
-
HTML>
-
html manifest=manifest=manifest
=- >
-
...
html
>
你需要在你想要快取的web app的每一頁都包含 manifest 屬性。如果一個頁面沒有 manifest屬性,它將不會被快取(除非在manifest檔案中明確指定了這 個頁面)。這意味著只要使用者造訪的頁麵包含manifest屬性,它都會被加入application cache。這樣,就不用在manifest檔中指定需要快取哪些頁面了。
Manifest屬性可以指定一個絕對URL或是一個相對路徑,但是,一個絕對URL需要和web app是同源的。一個manifest檔可以是任何擴充檔類型,但必須有正確的mime-type,例如在Apache中加入
「AddType text/cache-manifest .appcache」。
Manifest檔
manifest 文件是簡單的文字文件,它告知瀏覽器被快取的內容(以及不快取的內容)。
manifest 檔案可分為三個部分:
CACHE MANIFEST -
在此標題下列出的文件將在首次下載後進行緩存NETWORK -
在此標題下列出的檔案需要與伺服器的連接,且不會被快取
FALLBACK - 在此標題下列出的檔案規定當頁面無法存取時的回退頁面(如404 頁)
一個完整的manifest檔:
- XML/HTML Code複製內容到剪貼簿
-
CACHE MANIFEST -
- # 2012-02-21 v1.0.0
- /theme.css
- /logo.gif
- /main.js
-
- NETWORK:
- login.asp
-
- FALLBACK:
/html5/ /404.html
CACHE MANIFEST是必須的,#後面是註釋,下面是需要cache的文件,需要相對路徑,NETWORK是需要每次請求載入的文件。 可以使用星號來指示所有其他資源/文件都需要因特網連接:
NETWORK:*
FALLBACK是如果無法建立因網連接,則以"404.html" 取代/html5/ 目錄中的所有檔案。
更新機制有三種方式更新manifest快取:
1、使用者清空瀏覽器快取;
2、manifest檔案被修改,即使是註解(所以可以透過修改註解來更新檔案)
3、由程式來更新
快取狀態在程式可以透過window.applicationCache屬性來查看快取狀態。
C/C Code複製內容到剪貼簿
- var appCache = window.applicationCache;
-
-
切換 (appCache.status) {
-
-
案例 appCache.UNCACHED: // UNCACHED == 0
/
-
-
返回 ‘未緩存’;
-
-
休息;
-
-
案例 appCache.IDLE: // IDLE == 1
-
- 回 ‘空閒’;
-
- 休息;
-
- 案例 appCache.CHECKING: // 檢查 == 2
-
- 返回 ‘正在檢查’;
-
- 休息;
-
- 案例 appCache.DOWNLOADING: // 下載 == 3
-
返回-
‘正在下載’;
-
休息-
;
-
案例-
appCache.UPDATEREADY: //
返回-
‘更新就緒’;
-
休息-
;
-
案例- appCache.OBSOLETE:
// 已過時 == 5 - // 已過時 == 5
返回
‘過時’; -
-
休息
; -
-
預設
: -
-
返回
「未知的快取狀態」; -
-
休息
; -
-
};
-
-
為了透過程式更新cache,先呼叫 applicationCache.update()。這將會試圖更新使用者的 cache(要求manifest檔案已經改變)。最後,當 applicationCache.status 處於 UPDATEREADY 狀態時, 呼叫applicationCache.swapCache(),舊的cache就會被取代成新的。
C/C Code複製內容到剪貼簿
-
var appCache = window.applicationCache;
-
-
appCache.update();
-
-
…
-
-
if (appCache.status == window.applicationCache.UPDATEREADY) {
-
-
// The fetch was successful, swap in the
-
} -
-
注意:像這樣使用 update()和swapCache()並不會將更新後的資源 呈現給使用者。這只是讓瀏覽器檢查manifest檔案是否發生了更新,然後下載指定的更新內容,重新填充app cache。因此,要讓使用者看到更新後的內容,需要兩次頁面下載,一次是更新app cache,一次是更新頁面內容。
為了讓使用者能看到你的網站的最新版本,設定一個監聽器來監聽頁面載入時的updateready 事件。
C/C Code
複製內容到剪貼簿
- // Check if a new cache is available on page load.
-
-
- window.addEventListener(‘load’, function(e) {
-
- window.applicationCache.addEventListener(‘updateready’, function(e) {
-
if
- (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
-
// Browser downloaded a new app cache.
-
-
// Swap it in and reload the page to get the
-
window.applicationCache.swapCache(); -
window.location.reload(); -
-
} -
else {
-
-
// Manifest didn’t changed. Nothing new to server. Nothing new to server。
-
} -
-
}, -
false);
-
}, -
false);
監聽事件,對不同的狀態做出相應處理:
C/C Code複製內容到剪貼簿
-
var appCache = window.applicationCache;
-
-
-
-
appCache.addEventListener(‘cached’, handleCacheEvent, false);
-
-
// Checking for an update. Always the first event fired in the sequence.
-
- appCache.addEventListener(‘checking’, handleCacheEvent, false);
-
-
// An update was found. The browser is fetching resources.
-
-
appCache.addEventListener(‘downloading’, handleCacheEvent, false);
-
-
-
-
// or the manifest changed while the download was in progress.
-
-
appCache.addEventListener(‘error’, handleCacheError, false
- );
-
// Fired after the first download of the manifest.
-
-
appCache.addEventListener(‘noupdate’, handleCacheEvent,
false-
);
- );
-
// Fired if the manifest file returns a 404 or 410.
-
// This results in the application cache being deleted. -
-
-
appCache.addEventListener(‘obsolete’, handleCacheEvent, );
-
-
// Fired for each resource listed in the manifest as it is being fetched.
-
appCache.addEventListener(‘progress’, handleCacheEvent, -
false
-
-
// Fired when the manifest resources have been newly redownloaded.
appCache.addEventListener(‘updateready’, handleCacheEvent, false); );
如果manifest檔案或該檔案中指定的某個資源下載失敗,那麼整個更新都會失敗。在這種情況下,瀏覽器會繼續試用舊的application cache。
注意事項:
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離線快取Manifest的相關內容介紹,希望對大家的學習有所幫助。
原文:http://www.cnblogs.com/hutuzhu/p/4871666.html