有趣的HTML5：离线存储

怎么用？

然后cache.manifest文件的书写方式，就像下面这样：

CACHE MANIFEST
#v0.11

CACHE:

js/app.js
css/style.css

NETWORK:
resourse/logo.png

FALLBACK:
/ /offline.html

cache 表示在离线时存储的资源
network 表示在在线的情况下才能访问 ，不会离线存储 但如果它与cache中有一个相同的资源，那么cache还是会离线存储这个资源
fallback 表示如果访问第一个资源失败 那么会使用第二个资源来替换他，/ /offline.html 就表示在根目录下任何一个资源失败了，那么就会访问offline.html

浏览器怎么解析manifest
1.在线的情况下，浏览器发现头部有manifest属性，会请求manifest文件，如果是第一次访问，则进行离线存储，如果已经进行了离线存储，会使用离线文件加载页面，浏览器会对比新的manifest文件和旧的manifest文件，如果没有发生改变则不做变化，如果文件改变了，就会重新下载资源离线存储

2.离线情况下，浏览器直接使用离线存储的资源

在这个过程中需要注意几个问题：

a.如果服务器对离线的资源进行了更新，那么必须更新manifest文件之后这些资源才能被浏览器重新下载，如果只是更新了资源而没有更新manifest文件的话，浏览器并不会重新下载资源，也就是说还是使用原来离线存储的资源。

b.对于manifest文件进行缓存的时候需要十分小心，因为可能出现一种情况就是你对manifest文件进行了更新，但是http的缓存规则告诉浏览器本地缓存的manifest文件还没过期，这个情况下浏览器还是使用原来的manifest文件，所以对于manifest文件最好不要设置缓存。

c.浏览器在下载manifest文件中的资源的时候，它会一次性下载所有资源，如果某个资源由于某种原因下载失败，那么这次的所有更新就算是失败的，浏览器还是会使用原来的资源。

d.在更新了资源之后，新的资源需要到下次再打开app才会生效，如果需要资源马上就能生效，那么可以使用window.applicationCache.swapCache()方法来使之生效，出现这种现象的原因是浏览器会先使用离线资源加载页面，然后再去检查manifest是否有更新，所以需要到下次打开页面才能生效。

试一试：

CACHE MANIFEST
#v0.11

CACHE:
lib/ionic/js/ionic.bundle.js
lib/angular-ui-router.js
js/app.js
lib/ionic/css/ionic.css
css/style.css
views/login_header.html
views/login.html
lib/ionic/fonts/ionicons.ttf?v=1.5.2
lib/ionic/fonts/ionicons.woff?v=1.5.2

NETWORK:
lib/ionic/fonts/ionicons.ttf?v=1.5.2
lib/ionic/fonts/ionicons.woff?v=1.5.2
css/style.css

然后我们访问网页看看效果。

image.png

可以看出浏览器根据manifest文件下载相应资源并且缓存在本地，现在我们来试试再次访问网页

image.png

资源已经离线存储在本地，所以浏览器不需要再次下载资源，可以直接使用本地缓存的资源。接着，我们更新下服务器上的资源，比如我修改下app.js，结果我这里就不显示了，跟上面那张图是一样的，更新的资源并没有生效，现在我们更新下manifest文件，比如把版本改为0.12

image.png

很显然，只有更新了manifest文件，对离线资源的更新才能在浏览器上生效。
最后，我们来试试离线状态下是什么情况，这才是离线存储的重头戏。通过Chrome设置离线状态，刷新页面

image.png

由于在离线状态，所以浏览器无法访问到manifest文件，但是网页还是可以正常访问，这就是离线存储的威力。
对于HTML5中离线存储对象window.applicationCache有几个事件需要我们关注下：

image.png

1.oncached:当离线资源存储完成之后触发这个事件，这个是文档的说法，我在Chrome上面测试的时候并没有触发这个事件。
2.onchecking:当浏览器对离线存储资源进行更新检查的时候会触发这个事件
3.ondownloading:当浏览器开始下载离线资源的时候会触发这个事件
4.onprogress:当浏览器在下载每一个资源的时候会触发这个事件，每下载一个资源就会触发一次。
5.onupdateready:当浏览器对离线资源更新完成之后会触发这个事件
6.onnoupdate:当浏览器检查更新之后发现没有资源更新的时候触发这个事件

----阅读笔记-摘自：
https://segmentfault.com/a/1190000000732617