HTML5 Application Cache

时间 2019-11-12

标签 html5 html application cache 栏目 HTML5 繁體版

原文原文链接

一、应用场景css

离线访问对基于网络的应用而言愈来愈重要。虽然全部浏览器都有缓存机制，但它们并不可靠，也不必定总能起到预期的做用。HTML5 使用ApplicationCache 接口解决了由离线带来的部分难题。前提是你须要访问的web页面至少被在线访问过一次。html

二、使用缓存接口可为您的应用带来如下三个优点：
离线浏览 – 用户可在离线时浏览您的完整网站
速度 – 缓存资源为本地资源，所以加载速度较快。
服务器负载更少 – 浏览器只会从发生了更改的服务器下载资源。
三、离线本地存储和传统的浏览器缓存有什么不一样呢？
离线存储为整个web提供服务，浏览器缓存只缓存单个页面；
离线存储能够指定须要缓存的文件和哪些文件只能在线浏览，浏览器缓存没法指定；
离线存储能够动态通知用户进行更新。
四、如何实现html5

离线存储是经过manifest文件来管理的，须要服务器端的支持，不一样的服务器开启支持的方式也是不一样的。对于Tomcat须要修改 /conf/web.xml文件，添加以下MIMEType配置:web

 <mime-mapping>
        <extension>manifest</extension>
        <mime-type>text/cache-manifest</mime-type>
 </mime-mapping>

注意，<extension>manifest</extension>中内容必须和manifest文件后缀名一致。编程

一个典型的manifest文件应该相似这样：浏览器

CACHE MANIFEST//必须以这个开头
version 1.0 //最好定义版本，更新的时候只需修改版本号
CACHE:
    m.png
    test.js
    test.css
NETWORK:
    *
FALLBACK
    online.html offline.html

其中CACHE指定须要缓存的文件；NETWORK指定只有经过联网才能浏览的文件，*表明除了在CACHE中的文件；FALLBACK每行分别指定在线和离线时使用的文件
要让manifest管理存储。缓存

有了manifest文件后，还须要在html标签中定义manifest属性，以下：服务器

<!DOCTYPE html>
<html lang="en" manifest='test.manifest'>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
  
</body>
</html>

五、经过JS动态控制更新
应用在离线后将保持缓存状态，除非发生如下某种状况：
用户清除了浏览器对您网站的数据存储。
清单文件通过修改。请注意：更新清单中列出的某个文件并不意味着浏览器会从新缓存该资源。清单文件自己必须进行更改。网络

缓存状态:
window.applicationCache 对象是对浏览器的应用缓存的编程访问方式。其 status 属性可用于查看缓存的当前状态：app

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;
};

要以编程方式更新缓存，请先调用 applicationCache.update()。此操做将尝试更新用户的缓存（前提是已更改清单文件）。最后，当applicationCache.status 处于 UPDATEREADY 状态时，调用 applicationCache.swapCache() 便可将原缓存换成新缓存。

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() 不会向用户提供更新的资源。此流程只是让浏览器检查是否有新的清单、下载指定的更新内容以及从新填充应用缓存。所以，还须要对网页进行两次从新加载才能向用户提供新的内容，其中第一次是得到新的应用缓存，第二次是刷新网页内容。

好消息是，您能够避免从新加载两次的麻烦。要使用户更新到最新版网站，可设置监听器，以监听网页加载时的 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();
      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);

六、APPCACHE 事件（详见W3C Spec:http://www.w3.org/TR/2012/WD-html5-20120329/offline.html#offline）

Event name	Interface	Fired when...	Next events
`checking`	`The user agent is checking for an update, or attempting to download the manifest for the first time. This is always the first event in the sequence.`	`noupdate`	`The manifest hadn't changed.`	Last event in sequence.
`downloading`	`The user agent has found an update and is fetching it, or is downloading the resources listed by the manifest for the first time.`	`progress`	`ProgressEvent`	The user agent is downloading resources listed by the manifest.	`cached`	`The resources listed in the manifest have been downloaded, and the application is now cached.`	Last event in sequence.
`updateready`	`The resources listed in the manifest have been newly redownloaded, and the script can use swapCache() to switch to the new cache.`	Last event in sequence.
`obsolete`	`The manifest was found to have become a 404 or 410 page, so the application cache is being deleted.`	Last event in sequence.
`error`	`The manifest was a 404 or 410 page, so the attempt to cache the application has been aborted.`	Last event in sequence.
			The manifest hadn't changed, but the page referencing the manifest failed to download properly.
			A fatal error occurred while fetching the resources listed in the manifest.
		The manifest changed while the update was being run.	The user agent will try fetching the files again momentarily.

经过对这些事件的监听处理能更好的控制应用程序文件的缓存、更新。

7.一个简单的离线缓存的应用
建一个web工程AppCache,包括四个文件：
appcache_offline.html

<html manifest="clock.manifest">
  <head>
    <title>AppCache Test</title>
    <link rel="stylesheet" href="clock.css">
    <script src="clock.js"></script>
  </head>
  <body>
    <p><output id="clock"></output></p>
    <div id="log"></div>
  </body>
</html>

clock.manifest

CACHE MANIFEST
#VERSION 1.0
CACHE:
clock.css
clock.js

clock.css

output { font: 2em sans-serif; }

clock.js
setTimeout(function () {
    document.getElementById('clock').value = new Date();
}, 1000);