使用Manifest
使用Manifest很简单，就是在html标签上加一个manifest属性：
- <html manifest="/static/manifest/home.appcache">
这个属性指向一个manifest的文件，这个文件指明了当前页面哪些资源需要进行离线缓存，如下home.appcache：
- CACHE MANIFEST
- #9/27/2017, 3:04:25 PM
- #html
- https://github.com/
- #img
- https://assets-cdn.github.com/images/modules/site/universe-octoshop.png
- https://assets-cdn.github.com/images/modules/site/universe-wordmark.png
- #css
- https://assets-cdn.github.com/assets/frameworks-bedfc518345231565091.css
- #js
- https://assets-cdn.github.com/assets/compat-94eba6e3cd1fa18902d9.js
- NETWORK:
- *
- FALLBACK
- https://github.com/ /html/manifest/html/home.html
这个文件***行必须以CACHE MANIFEST开头，否则浏览器解析会报错，注释使用#开头，在这一行下面跟着需要缓存的资源，接着的NETWORK表示哪些资源需要联网加载，一般需要写成NETWORK *，表示除了CACHE外的其它所有资源都需要联网，包括一些动态请求，如果你不是写的*，而是写了具体路径，那些既没有在CAHCE的，也没有在NETWORK的就会报加载失败的错误，如下所示：
即使联网也会这样，所以一般写成*。然后再刷新页面，你会发现页面几乎所有资源都是在本地缓存取的，如下图所示：
并且你把网断了，刷新页面，页面依旧能够正常加载出来。这个在Chrome/Firefox/Safari等浏览器均支持。
除了Manifest之外，还有另外一个缓存的手段，就是设置HTTP报文头的Cache-Control字段进行缓存，这个可以缓存JS/CSS/图片资源，但是如果你把HTML也缓存了就会有一个问题，如果用户不清除缓存，即使你的页面更新了，用户仍然会加载老的页面，直到缓存设定Max-Age时间到了。所以用Manifest可以解决这个问题。
Manifest怎么知道当前页面数据更新了呢?只要把你把manifest文件如上面的home.appcache更改一下就可以了，浏览器打开页面时都会去加载这个文件，一旦发现这个文件发生了变化下次刷新的时候就会重新加载所有Cache的文件，最简单的可以把注释里的时间改成当前的时间就可以了：
- #9/29/2017, 9:08:49 AM
所以当网站的资源发生更改就可以改变这个manifest的内容，进而联网的浏览器就能进行更新。
使用Manifest需要注意以下问题：
(1)Manifest有大小限制，它其实也算本地存储，本地存储一般每个域有限制使用的空间，PC Chrome是5Mb，参考如下表格：
(2)Manifest文件如home.appcahce不能跨域，如果跨域需要支持CORS
(3)Manifest Cache的资源不能跨域，同样如果跨域该资源需要支持CORS，一般浏览器会自动处理
