HTML5離線緩存Manifest

時間 2019-11-09

標籤 html5 html 離線緩存 manifest 欄目 HTML5 简体版

原文原文鏈接

web app不比PC，有性能和流量方面的考慮，離線應用愈來愈重要，雖然瀏覽器有緩存機制，可是時常不靠譜，更況且普通狀況下html文件是無法緩存的，斷網以後一切over。css

什麼是manifest?html

簡單來講manifest能讓你的應用在無網的狀況下也能訪問。html5

它有三大優點：web

一、離線瀏覽，無網狀況下也能正常訪問；編程

二、更快的加載速度，緩存在本地訪問速度天然更快；瀏覽器

三、減輕服務請求壓力，文件緩存後不須要再次請求，只須要請求須要更新的文件。緩存

如何使用？服務器

<!DOCTYPE HTML>
<html manifest="demo.appcache"> ... </html>

你須要在你想要緩存的web app的每一頁中都包含 manifest 屬性。若是一個頁面沒有 manifest屬性，它將不會被緩存（除非在manifest文件中顯式指定了這個頁面）。這意味着只要用戶訪問的頁面包含manifest屬性，它都將會被加入application cache中。這樣，就不用在manifest文件中指定須要緩存哪些頁面了。app

Manifest屬性能夠指定一個絕對URL或是一個相對路徑，可是，一個絕對URL須要和web app是同源的。一個manifest文件能夠是任何擴展文件類型，但必須有正確的mime-type，好比在Apache中添加性能

「AddType text/cache-manifest .appcache」。

Manifest文件

manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。

manifest 文件可分爲三個部分：

CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存
NETWORK - 在此標題下列出的文件須要與服務器的鏈接，且不會被緩存
FALLBACK - 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比 404 頁面）

一個完整的manifest文件：

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緩存：
一、用戶清空瀏覽器緩存；
二、manifest文件被修改，哪怕是註釋（因此能夠經過修改註釋來更新文件）
三、由程序來更新

緩存狀態
在程序能夠經過window.applicationCache屬性來查看緩存狀態。

var appCache = window.applicationCache;
 
switch (appCache.status) {
 
  case appCache.UNCACHED: // UNCACHED == 0
 
    return ‘UNCACHED’;
 
    break;
 
  case appCache.IDLE: // IDLE == 1
 
    return ‘IDLE’;
 
    break;
 
  case appCache.CHECKING: // CHECKING == 2
 
    return ‘CHECKING’;
 
    break;
 
  case appCache.DOWNLOADING: // DOWNLOADING == 3
 
    return ‘DOWNLOADING’;
 
    break;
 
  case appCache.UPDATEREADY:  // UPDATEREADY == 4
 
    return ‘UPDATEREADY’;
 
    break;
 
  case appCache.OBSOLETE: // OBSOLETE == 5
 
    return ‘OBSOLETE’;
 
    break;
 
  default:
 
    return ‘UKNOWN CACHE STATUS’;
 
    break;
 
};

爲了經過編程更新cache，首先調用 applicationCache.update()。這將會試圖更新用戶的 cache（要求manifest文件已經改變）。最後，當 applicationCache.status 處於 UPDATEREADY 狀態時，調用applicationCache.swapCache()，舊的cache就會被置換成新的。

var appCache = window.applicationCache;
 
appCache.update(); // Attempt to update the user’s cache.
 
…
 
if (appCache.status == window.applicationCache.UPDATEREADY) {
 
  appCache.swapCache();  // The fetch was successful, swap in the new cache.
 
}

注意：像這樣使用 update()和swapCache()並不會將更新後的資源呈現給用戶。這僅僅是讓瀏覽器檢查manifest文件是否發生了更新，而後下載指定的更新內容，從新填充app cache。所以，要讓用戶看到更新後的內容，須要兩次頁面下載，一次是更新app cache，一次是更新頁面內容。

爲了讓用戶能看到你的站點的最新版本，設置一個監聽器來監聽頁面加載時的updateready 事件。

// 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 new hotness.
 
      window.applicationCache.swapCache();
        window.location.reload();
 
    } else {
 
      // Manifest didn’t changed. Nothing new to server.
 
    }
 
  }, false);
 
}, false);

監聽事件，對不一樣的狀態作出相應處理：

var appCache = window.applicationCache;

// Fired after the first cache of the manifest.

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);
 
// The manifest returns 404 or 410, the download failed,
 
// 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, false);
 
// 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文件發生改變時，資源請求自己也會觸發更新

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。