社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > H5教程 > HTML5離線快取Manifest是什麼_html5教學技巧

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

WBOY
發布： 2016-05-16 15:51:34
原創
2054 人瀏覽過

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

什麼是manifest?

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

它有三大優勢​​：

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

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

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

如何使用？

XML/HTML Code複製內容到剪貼簿
  1. HTML>  
  2. html manifest=manifest=manifest
    3. =
  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複製內容到剪貼簿
    3. 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. /
  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. 返回
  25.  ‘正在下載’；       
  26.     
    27. 休息
  27. ;        
  28.   
    29. 案例
  29.  appCache.UPDATEREADY:  //            
    30. 返回
  30.  ‘更新就緒’；  
  31.          
    32. 休息
  32. ;   
  33.        
    34. 案例
  34.  appCache.OBSOLETE: 
    35. // 已過時 == 5
  35. // 已過時 == 5          返回
    36.  ‘過時’；  
    37.     
  37.     休息
    38. ;   
    39.     
  39.   預設
    40. ：  
    41.     
  41.     返回
    42.  「未知的快取狀態」；  
    43.     
  43.     休息
    44. ;   
    45.     
  45. }；   
    46.   

  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.     
    9.   appCache.swapCache();  // The fetch was successful, swap in the 
      10.     
      11. }   
      12.   
    注意：像這樣使用 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.     
    11.       // Swap it in and reload the page to get the 
      12.     
      13.       window.applicationCache.swapCache();   
      14.         window.location.reload();   
      15.     
      16.     } 
    16. else {   
      17.     
      18.       
    18. // Manifest didn’t changed. Nothing new to server.  Nothing new to server.  Nothing new to server。
      19.     
      20.     }   
      21.     
      22.   }, 
    22. false);   
      23.     
      24. }, 
    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, 
      24. false
    24. );   
    25. );        
    26. // Fired if the manifest file returns a 404 or 410.
    27.        
      29. // 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.
      34.     
      35. appCache.addEventListener(‘progress’, handleCacheEvent, 
    35. false);   
      36.     
    37. // Fired when the manifest resources have been newly redownloaded.     
      38.     
    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

相關標籤：
html5 manifest 離線緩存
來源：php.cn
上一篇：HTML5中語意化 b 和 i 標籤_html5教學技巧 下一篇：什麼是HTML語意化標籤？常見HTML語意化標籤大全
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
如何讓我的圖像顯示在頁面的主顯示幕上？ 我想做的是使用NASAAPI接收一些照片。然後在我的網頁的縮圖和主顯示屏上顯示這些照片。我只是弄清楚為什麼程式碼不從縮圖中獲取圖像並將其顯示在頁面上。我還使用HTML5以上版本的模...
來自於 2024-04-06 15:33:12
0
1
433
PDF檔案能夠運行HTML5和Javascript嗎？ 我有一個愚蠢的想法，想嘗試製作一個在任何計算機上都不會被阻止的程序，因為它將嵌入在PDF中（我聽說Javascript可以在PDF中運行）。它將在PDF檔案中運行HTML5和Jav...
來自於 2024-04-05 12:57:00
0
1
456
HTML5中的enctype和formenctype有什麼差別？ 我只是想知道HTMLLivingStandard（又稱新的HTML5規範）中的屬性enctype和formenctype之間有什麼區別？我一直在閱讀《開發人員的HTML標準》，但似...
來自於 2024-04-02 11:47:56
0
1
275
使頁面適合行動裝置嗎？ 我有很多網頁和一些網站。問題是，我是一個初學者。我使用基本的html5和css3，但我不知道如何使它們放大、縮小並且適合行動裝置。例如，這是我的頁面之一和我的網站之一，您可以在其中...
來自於 2024-04-01 20:42:38
0
1
259
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板