HTML5 manifest ApplicationCache

使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。

HTML5引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。 应用程序缓存为应用带来三个优势:

  • 离线浏览 - 用户可在应用离线时使用它们
  • 速度 - 已缓存资源加载得更快
  • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

引用清单文件

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

manifest 属性可指向绝对网址或相对路径,但绝对网址必须与相应的网络应用同源。清单文件可使用任何文件扩展名,但必须以正确的 MIME 类型提供text/cache-manifest

清单文件结构

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

以“#”开头的行是注释行。

  • CACHE MANIFEST 字符串应在第一行,且必不可少。

  • CACHE

    这是条目的默认部分。系统会在首次下载此标头下列出的文件(或紧跟在CACHE MANIFEST 后的文件)后显式缓存这些文件。

  • NETWORK

    此部分下列出的文件是需要连接到服务器的白名单资源。无论用户是否处于离线状态,对这些资源的所有请求都会绕过缓存。可使用通配符(*)。

  • FALLBACK

    此部分是可选的,用于指定无法访问资源时的后备网页。其中第一个 URI 代表资源,第二个代表后备网页。两个 URI 必须相关,并且必须与清单文件同源。可使用通配符。

请注意这些部分可按任意顺序排列,且每个部分均可在同一清单中重复出现。

更新缓存

  1. 用户清除了浏览器对您网站的数据存储。

  2. 清单文件经过修改。请注意:更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改。

  3. 应用缓存通过编程方式进行更新。

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离线存储
应用缓存初级使用指南

posted @ 2016-06-15 23:47 Mr.Leo 阅读(...) 评论(...) 编辑 收藏