2018-4-19 seo达人
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
HTML5引入了应用程序缓存，意味web应用可以进行缓存，在没有网络的情况下使用
应用程序缓存为应用带来的三大优势：
离线访问应用
速度更快——已缓存资源加载的更快
减少服务器负载——浏览器只从服务器下载更新过或更改过的资源
浏览器支持情况：主流浏览器都支持，IE要10以上的版本
HTML5通过在html文件添加manifest属性，启用应用程序缓存
例子：
<!DOCTYPE HTML>
<htmlmanifest="demo.appcache">
...
</html>
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest 文件的建议的文件扩展名是：".appcache"。
manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
Mainifest文件
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
例子：
CACHE MANIFEST
# 2012-02-21 v1.0.0
CACHE:
cached.js
cached.css
NETWORK:
uncached.js
uncached.css
FALLBACK:
index.html 404.html
CACHE MANIFEST 写在manifest文件开头，是必须的
CACHE作用是标识出哪些文件需要缓存，可以是相对路径也可以是绝对路径
NETWORK可选，这一部分是要直接读取的文件，可以使用通配符 * 。
FALLBACK可选，指定了一个后备页面，当资源无法访问时，浏览器会使用该页面。
在线的情况下，浏览器发现html头部有manifest属性,会请求manifest文件，如果是第一次访问应用，浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过应用并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。
注意：
1.服务器对离线的资源进行了更新，那么必须更新manifest文件之后这些资源才能被浏览器重新下载，如果只是更新了资源而没有更新manifest文件的话，浏览器并不会重新下载资源，也就是说还是使用原来离线存储的资源。
2.manifest文件进行缓存的时候需要十分小心，因为可能出现一种情况就是你对manifest文件进行了更新，但是http的缓存规则告诉浏览器本地缓存的manifest文件还没过期，这个情况下浏览器还是使用原来的manifest文件，所以对于manifest文件最好不要设置缓存。
3.如果更新中某个资源下载失败，则整个更新就视作失败，浏览器会依旧采用原来的资源
4.站点离线存储的容量限制是5M
浏览器在下载manifest文件中的资源的时候，它会一次性下载所有资源，如果某个资源由于某种原因下载失败，那么这次的所有更新就算是失败的，浏览器还是会使用原来的资源。
window.applicationCache对象常用事件
1. oncached:当离线资源存储完成之后触发这个事件
2. onchecking:当浏览器对离线存储资源进行更新检查的时候会触发这个事件
3. ondownloading:当浏览器开始下载离线资源的时候会触发这个事件
4. onprogress:当浏览器在下载每一个资源的时候会触发这个事件，每下载一个资源就会触发一次。
5. onupdateready:当浏览器对离线资源更新完成之后会触发这个事件
6. onnoupdate:当浏览器检查更新之后发现没有资源更新的时候触发这个事件
最后一点是该特性已经从web标准删除，可能在未来某个时间停止，推荐使用Service Workers 代替。