《十三》HTML5 应用程序缓存 Application Cache_要使用 html5 的应用程序缓存功能,您必须将 manifest 属性添加到 html 元素中。-优快云博客

本文链接：https://blog.youkuaiyun.com/wsln_123456/article/details/103862417

HTML5 引入了应用程序缓存 Application Cache，这意味着 Web 应用可以进行缓存，在没有因特网连接时进行访问。

一旦应用被缓存，它就会保持缓存直到发生下列情况：manifest 文件被修改、用户清空浏览器缓存、程序更新应用缓存。

原理：

是基于 manifest 文件的缓存机制，通过 manifest 文件上的解析清单离线存储资源；之后当网络处于离线状态下时，浏览器会通过被离线存储的资源进行页面展示。

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件。
- 如果是第一次访问 app，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。
- 如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面；然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作；如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。

优点：

缺点：实际上因为使用反响并不好，W3C 正在废弃 manifest。

服务器资源更新之后，会显示滞后，需要多刷新一次页面：浏览器会先使用旧的离线资源加载页面；然后对比新旧 manifest 发现变化后，重新下载离线资源并加载页面。
全量加载：当 manifest 文件更新时，所有的资源都要全部被下载一次，并且其中一个出现异常会导致整个 manifest 运行异常。

监控 applicationCache 的状态，当更新之后，自动刷新。

window.applicationCache.addEventListener('updateready', function(){
	  window.location.reload();
}, false);