前言
随着互联网技术的发展，虽然各种移动端App或者小程序产品越来越受到人们的欢迎，但仍然有很多产品依赖于浏览器来进行访问，通过浏览器进行访问就需要向服务器发送请求，但很多时候难免会因为网络原因或者访问人数过多时而无法获得页面资源。除此之外，页面的一些资源并没有经常改变，所以每次访问的时候并不需要重复请求。针对以上两种问题，HTML5提出了离线缓存的新特性。
使用方法
使用离线缓存的前提是部署项目的服务器支持html5，
1.在html中添加manifest属性（标明需要关联的文件名，在该文件里罗列了需要缓存的资源清单）
<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>
2.编写cache.manifest文件
CACHE MANIFEST
#v0.11 //离线缓存文件的版本信息
CACHE: //需要进行离线缓存的资源
js/app.js
css/Newstyle.css
NETWORK://表示只有在在线状态下才能访问的资源，即不需要缓存的资源
image/logo.png
FALLBACK://资源加载失败的时候跳转的页面
/ /base.html
cache.manifest文件大体上由四部分组成
CACHE MANIFEST：表示离线缓存文件的版本信息
CACHE:表示需要缓存的资源列表。（引用该manifest文件的页面，不管有没有罗列到列表中，都会被缓存）
NETWORK：表示只有在在线状态下才能访问到的资源，network列表里的资源不会被离线缓存，所以离线状态下仍然不会被访问。换句话说，不需要缓存的资源就需要放在network列表下。但如果cache和network中包含同一资源，那么该资源就会离线缓存，这也充分说明了，cache的优先级比network更高。
FALLBACK：表示当缓存资源加载失败时会备份资源。第一个是访问源，第二个是备份资源。上面文件表示的是访问任何一个资源失败时，都会访问base.html
原理
1.在线状态下，当浏览器加载页面时发现html的头部有manifest属性，就会去加载cache.manifest文件，然后把对应的资源存储在缓存中。
2.当下次在在线状态下加载此页面的时候，就会读取离线缓存，而不需要重复对服务器进行请求；当在离线状态下加载此页面的时候，那么浏览器就会使用已经缓存的资源。
3.当再一次是在线状态时，浏览器会对比cache.manifest文件，对比是否和之前的有所不同，（所以当更新了某些资源时同时也要更新cache.manifest）当不同的时候浏览器会重新进行离线缓存。
注意
1.使用离线缓存的时候需要注意的一点是，控制离线存储的更新，需要2个步骤。一是修改cache.manifest中的资源；二是更改CACHE MANIFEST配置项，表明是新的缓存版本（告诉浏览器cache.manifest这个文件被更改过）
2.其实离线缓存对象window.applicationCache在使用的时候包含六个钩子函数，分别为：
oncached:当离线资源存储完成之后触发这个事件。
onchecking:当浏览器对离线存储资源更新检查的时候触发这个事件
ondownloading:当浏览器开始下载离线资源的时候会触发这个事件
onprogress:当浏览器在下载每一个资源的时候会触发这个事件，每下载一个资源就会触发一次。
onupdateready:当浏览器对离线资源更新完成之后会触发这个事件
onnoupdate:当浏览器检查更新之后发现没有资源更新的时候触发这个事件