HTML5 manifest ApplicationCache

時間 2019-11-11

標籤 html5 html manifest applicationcache 欄目 HTML5 简体版

原文原文鏈接

使用 HTML5，經過建立 cache manifest 文件，能夠輕鬆地建立 web 應用的離線版本。javascript

HTML5引入了應用程序緩存，這意味着 web 應用可進行緩存，並可在沒有因特網鏈接時進行訪問。應用程序緩存爲應用帶來三個優點：css

離線瀏覽 - 用戶可在應用離線時使用它們

速度 - 已緩存資源加載得更快

減小服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。

引用清單文件

<html manifest="manifest.appcache">
  ...
</html>

manifest 屬性可指向絕對網址或相對路徑，但絕對網址必須與相應的網絡應用同源。清單文件可以使用任何文件擴展名，但必須以正確的 MIME 類型提供text/cache-manifest。html

清單文件結構

CACHE MANIFEST
# update on：2016-06-15 23:22:23  v2

# Explicitly cached 'master entries'.
CACHE:
/favicon.ico
stylesheet.css
images/logo.png
scripts/main.js

# Resources that require the user to be online.
NETWORK:
*
http://api.twitter.com

# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
images/large/ images/offline.jpg
*.html /offline.html

以「#」開頭的行是註釋行。html5

CACHE MANIFEST 字符串應在第一行，且必不可少。java

CACHE：web

這是條目的默認部分。系統會在首次下載此標頭下列出的文件（或緊跟在CACHE MANIFEST 後的文件）後顯式緩存這些文件。編程

NETWORK：api

此部分下列出的文件是須要鏈接到服務器的白名單資源。不管用戶是否處於離線狀態，對這些資源的全部請求都會繞過緩存。可以使用通配符(*)。瀏覽器

FALLBACK：緩存

此部分是可選的，用於指定沒法訪問資源時的後備網頁。其中第一個 URI 表明資源，第二個表明後備網頁。兩個 URI 必須相關，而且必須與清單文件同源。可以使用通配符。

請注意：這些部分可按任意順序排列，且每一個部分都可在同一清單中重複出現。

更新緩存

用戶清除了瀏覽器對您網站的數據存儲。
清單文件通過修改。請注意：更新清單中列出的某個文件並不意味着瀏覽器會從新緩存該資源。清單文件自己必須進行更改。
應用緩存經過編程方式進行更新。

var appCache = window.applicationCache;//瀏覽器的應用緩存對象
appCache.update(); // Attempt to update the user's cache.
switch (appCache.status) {//緩存的當前狀態
  case appCache.UNCACHED: // UNCACHED == 0
    console.log('UNCACHED');;
    break;
  case appCache.IDLE: // IDLE == 1
    console.log('IDLE');
    break;
  case appCache.CHECKING: // CHECKING == 2
    console.log('CHECKING');
    break;
  case appCache.DOWNLOADING: // DOWNLOADING == 3
    console.log('DOWNLOADING');
    break;
  case appCache.UPDATEREADY:  // UPDATEREADY == 4
    console.log('UPDATEREADY');
    appCache.swapCache();  // The fetch was successful, swap in the new cache.
    break;
  case appCache.OBSOLETE: // OBSOLETE == 5
    console.log('OBSOLETE');
    break;
  default:
    console.log('UKNOWN CACHE STATUS');
    break;
};

// 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();
      if (confirm('A new version of this site is available. Load it?')) {
        window.location.reload();
      }
    } else {
      // Manifest didn't changed. Nothing new to server.
    }
  }, false);
}, false);

/*緩存公用方法*/
var EventUtil = {
    addHandler: function(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    }
};
EventUtil.addHandler(applicationCache, "updateready", function() { //緩存更新並已下載，要在下次進入頁面生效
    applicationCache.update(); //檢查緩存manifest文件是否更新，ps:頁面加載默認檢查一次。
    applicationCache.swapCache(); //交換到新的緩存項中，交換了要下次進入頁面才生效
    location.reload(); //從新載入頁面
});

注意事項

站點離線存儲的容量限制是5M
若是manifest文件，或者內部列舉的某一個文件不能正常下載，整個更新過程將視爲失敗，瀏覽器繼續所有使用老的緩存
引用manifest的html必須與manifest文件同源，在同一個域下
在manifest中使用的相對路徑，相對參照物爲manifest文件
CACHE MANIFEST字符串應在第一行，且必不可少
系統會自動緩存引用清單文件的 HTML 文件
manifest文件中CACHE則與NETWORK，FALLBACK的位置順序沒有關係，若是是隱式聲明須要在最前面
FALLBACK中的資源必須和manifest文件同源
當一個資源被緩存後，該瀏覽器直接請求這個絕對路徑也會訪問緩存中的資源。
站點中的其餘頁面即便沒有設置manifest屬性，請求的資源若是在緩存中也從緩存中訪問
當manifest文件發生改變時，資源請求自己也會觸發更新

神奇的HTML5離線存儲
 應用緩存初級使用指南

相關標籤/搜索

每日一句

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