HTML5的文件离线存储怎么使用,工作原理?
- 优点:没有网络时可以浏览,加快资源的加载速度,减少服务器负载
- 使用:只需要在页面头部加入<html manifest='cache.manifest'>,然后创建manifest.appcache文件
- manifest.appcache文件配置:
- 1)CACHE MANIFEST放在第一行
- 2)CACHE:表示需要离线存储的资源列表,由于包含manifest文件的页面将被自动离线存储,所以不需要列出来
- 3)NETWORK:表示在线才能访问的资源列表,如果CACHE列表里也存在,则CACHE优先级更高
- 4)FALLBACK:表示如果访问第一个资源是吧,那么使用第二个资源来替换它
- 浏览器如何解析manifest
- 在线情况:浏览器发现html头部有manifest属性,他会请求manifest文件,如果是第一次访问,那么浏览器会根据manifest文件的内容下载相应的资源并且进行离线存储.如果已经访问过并存储,那么浏览器使用离线的资源价值,然后对比新的文件,如果没有发生改变就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储
- 离线情况:浏览器就直接使用离线存储资源
- 与传统浏览器的区别
- 1)离线缓存是针对整个应用,浏览器缓存是单个文件
- 2)离线缓存可以主动通知浏览器更新资源
- 状态 window.applicationCache对象的status属性
- 0:无缓存
- 1:闲置
- 2.检查中,正在下载描述文件并检查更新
- 3:下载中
- 4:更新完成
- 5:废弃,应用缓存的描述文件已经不存在了,因此页面无法再访问应用缓存
- 事件 window.applicationCache对象的相关事件
- 1)oncached:当离线资源存储完成之后就触发这个事件
- 2)onchecking:当浏览器对离线存储资源进行更新检查的时候触发
- 3)ondounloading:当浏览器开始下载离线资源的时候会触发
- 4)onprogress:当浏览器在下载每一个资源的时候会触发
- 5)onupdateready:当浏览器对离线资源更新完成之后触发
- 6)onnoupdate:当浏览器检查更新之后发现没有这个资源时触发
- 注意事项
- 站点离线存储的容量限制是5M
- 如果manifest文件,或者内部列举的某一个文件不能正常下载,整个更新过程将视为失败,浏览器继续全部使用老的缓存
- 引用manifest的html必须与manifest文件同源,在同一个域下
- 在manifest中使用的相对路径,相对参照物为manifest文件
- CACHE MANIFEST字符串硬在第一行,且必不可少
- 系统会自动缓存引用清单文件的HTML文件
- manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
- FALLBACK中的资源必须和manifest文件同源
- 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
- 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
- 当manifest文件发生改变时，资源请求本身也会触发更新
