h5 离线缓存
h5离线缓存
离线缓存：
用户没有联网时，可以正常访问网站站点和应用
用户联网时，更新用户机器上的缓存文件
原理
通过一个.appcache文件的缓存机制(不是存储技术), 通过这个文件上的解析清单解析清单离线存储资源
这些资源会像cookie一样存储下来，当网络处于离线状态下时，通过离线缓存的数据进行页面显示
如何使用h5离线缓存
● 在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问页面 ，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，就会重新下载文件中的资源并进行离线存储。
● 离线的情况下，浏览器会直接使用离线存储的资源。
- 创建一个和html同名的manifest文件，在页面的头部加入manifest属性
<html lang="en" manifest="index.manifest">
- index.manifest 声明需要缓存的文件
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
● CACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
● NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。
● FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问 offline.html 。
- 在离线状态时，通过window.applicationCache 进行离线缓存的操作
如何更新离线缓存
（1）更新 manifest 文件
（2）通过 javascript 操作
（3）清除浏览器缓存
注意事项
（1）浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
（2）如果 manifest 文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。
（3）引用 manifest 的 html 必须与 manifest 文件同源，在同一个域下。
（4）FALLBACK 中的资源必须和 manifest 文件同源。
（5）当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
（6）站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问。
（7）当 manifest 文件发生改变时，资源请求本身也会触发更新。
