HTML5離線快取Manifest是什麼_html5教學技巧

web app不比PC，有效能和流量的考慮，離線應用越來越重要，雖然瀏覽器有快取機制，但是時常不靠譜，更何況普通情況下html檔案是沒法快取的，斷網子之後一切over。

什麼是manifest?

簡單來說manifest能讓你的應用在無網的情況下也能訪問。

它有三大優勢​​：

1、離線瀏覽，無網情況下也能正常存取；

2、更快的載入速度，快取在本地存取速度自然更快；

3、減輕服務請求壓力，檔案快取後不需要再次請求，只需要請求需要更新的檔案。

如何使用？

XML/HTML Code複製內容到剪貼簿

1. HTML>  
2. html manifest=manifest=manifest
=
3. >
4.    ...   

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檔：

1. XML/HTML Code複製內容到剪貼簿
CACHE MANIFEST   
4. # 2012-02-21 v1.0.0   
5. /theme.css   
6. /logo.gif   
7. /main.js   
8.   
9. NETWORK:   
10. login.asp   
11.   
12. FALLBACK:   

/html5/ /404.html   

  


CACHE MANIFEST是必須的，#後面是註釋，下面是需要cache的文件，需要相對路徑，NETWORK是需要每次請求載入的文件。 可以使用星號來指示所有其他資源/文件都需要因特網連接：

NETWORK:*


FALLBACK是如果無法建立因網連接，則以"404.html" 取代/html5/ 目錄中的所有檔案。

更新機制有三種方式更新manifest快取：
1、使用者清空瀏覽器快取；

2、manifest檔案被修改，即使是註解（所以可以透過修改註解來更新檔案）

3、由程式來更新

快取狀態在程式可以透過window.applicationCache屬性來查看快取狀態。

C/C Code複製內容到剪貼簿

1. var appCache = window.applicationCache;   
2.     
3. 切換 (appCache.status) {   
4.     
5.   案例 appCache.UNCACHED: // UNCACHED == 0 // UNCACHED == 0
/
6.     
7.     返回 ‘未緩存’；  
8.     
9.     休息;   
10.     
11.   案例 appCache.IDLE: // IDLE == 1 // IDLE == 1
12.     
13.     回  ‘空閒’；  
14.     
15.     休息;   
16.     
17.   案例 appCache.CHECKING： // 檢查 == 2     
18.     
19. 返回 ‘正在檢查’；       
20.     
21. 休息;        
22.   
23. 案例 appCache.DOWNLOADING： // 下載 == 3 //      
24.     
返回
25.  ‘正在下載’；       
26.     
休息
27. ;        
28.   
案例
29.  appCache.UPDATEREADY:  //            
返回
30.  ‘更新就緒’；  
31.          
休息
32. ;   
33.        
案例
34.  appCache.OBSOLETE: 
// 已過時 == 5
35. // 已過時 == 5          返回
 ‘過時’；  
    
37.     休息
;   
    
39.   預設
：  
    
41.     返回
 「未知的快取狀態」；  
    
43.     休息
;   
    
45. }；   
  

47. 為了透過程式更新cache，先呼叫 applicationCache.update()。這將會試圖更新使用者的 cache（要求manifest檔案已經改變）。最後，當 applicationCache.status 處於 UPDATEREADY 狀態時， 呼叫applicationCache.swapCache()，舊的cache就會被取代成新的。

    C/C Code複製內容到剪貼簿

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

    注意：像這樣使用 update()和swapCache()並不會將更新後的資源 呈現給使用者。這只是讓瀏覽器檢查manifest檔案是否發生了更新，然後下載指定的更新內容，重新填充app cache。因此，要讓使用者看到更新後的內容，需要兩次頁面下載，一次是更新app cache，一次是更新頁面內容。

    為了讓使用者能看到你的網站的最新版本，設定一個監聽器來監聽頁面載入時的updateready 事件。

    C/C Code

    複製內容到剪貼簿

    1. // Check if a new cache is available on page load.      
    3.     
    4. window.addEventListener(‘load’, function(e) {   
    5.     
    6.   window.applicationCache.addEventListener(‘updateready’, function(e) {   
    7.          if
    8.  (window.applicationCache.status == window.applicationCache.UPDATEREADY) {       
    9.       // Browser downloaded a new app cache.   
        
    11.       // Swap it in and reload the page to get the 
        
          window.applicationCache.swapCache();   
            window.location.reload();   
        
        } 
    16. else {   
        
          
    18. // Manifest didn’t changed. Nothing new to server.  Nothing new to server.  Nothing new to server。
        
        }   
        
      }, 
    22. false);   
        
    }, 
    24. false);   

    監聽事件，對不同的狀態做出相應處理：

    C/C Code複製內容到剪貼簿

    1. var appCache = window.applicationCache;   
    2.   
    3. // Fired after the first cache of the manifest.   
    4.   
    5. appCache.addEventListener(‘cached’, handleCacheEvent, false);   
    6.     
    7. // Checking for an update. Always the first event fired in the sequence.
    8.     
    9. appCache.addEventListener(‘checking’, handleCacheEvent, false);   
    10.     
    11. // An update was found. The browser is fetching resources.   
    12.     
    13. appCache.addEventListener(‘downloading’, handleCacheEvent, false);   
    14.     
    15. // The manifest returns 404 or 410, the download failed,   
    16.   
    17.      // or the manifest changed while the download was in progress.
    18.  
    19.      appCache.addEventListener(‘error’, handleCacheError, false
    20. );   
    21.      // Fired after the first download of the manifest.
    22.   
    23.      appCache.addEventListener(‘noupdate’, handleCacheEvent, 
    false
    24. );   
    25. );        
    26. // Fired if the manifest file returns a 404 or 410.
    27.        
    // This results in the application cache being deleted.
    29.      
    30.     
    31. appCache.addEventListener(‘obsolete’, handleCacheEvent, false);   
    32.     
    33. // Fired for each resource listed in the manifest as it is being fetched.
        
    appCache.addEventListener(‘progress’, handleCacheEvent, 
    35. false);   
        
    37. // 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