怎么用?
<html manifest="cache.manifest">
</html>
然后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
然后我们访问网页看看效果。
可以看出浏览器根据manifest文件下载相应资源并且缓存在本地,现在我们来试试再次访问网页
资源已经离线存储在本地,所以浏览器不需要再次下载资源,可以直接使用本地缓存的资源。接着,我们更新下服务器上的资源,比如我修改下app.js,结果我这里就不显示了,跟上面那张图是一样的,更新的资源并没有生效,现在我们更新下manifest文件,比如把版本改为0.12
很显然,只有更新了manifest文件,对离线资源的更新才能在浏览器上生效。
最后,我们来试试离线状态下是什么情况,这才是离线存储的重头戏。通过Chrome设置离线状态,刷新页面
由于在离线状态,所以浏览器无法访问到manifest文件,但是网页还是可以正常访问,这就是离线存储的威力。
对于HTML5中离线存储对象window.applicationCache有几个事件需要我们关注下:
1.oncached:当离线资源存储完成之后触发这个事件,这个是文档的说法,我在Chrome上面测试的时候并没有触发这个事件。
2.onchecking:当浏览器对离线存储资源进行更新检查的时候会触发这个事件
3.ondownloading:当浏览器开始下载离线资源的时候会触发这个事件
4.onprogress:当浏览器在下载每一个资源的时候会触发这个事件,每下载一个资源就会触发一次。
5.onupdateready:当浏览器对离线资源更新完成之后会触发这个事件
6.onnoupdate:当浏览器检查更新之后发现没有资源更新的时候触发这个事件
----阅读笔记-摘自:
https://segmentfault.com/a/1190000000732617