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文件发生改变时，资源请求自己也会触发更新