HTML5应用程序缓存

HTML5引入了应用程序缓存,意味web应用可以进行缓存,在没有网络的情况下使用

应用程序缓存为应用带来的三大优势:

离线访问应用

速度更快——已缓存资源加载的更快

减少服务器负载——浏览器只从服务器下载更新过或更改过的资源

浏览器支持情况:主流浏览器都支持,IE要10以上的版本

HTML5通过在html文件添加manifest属性,启用应用程序缓存

例子:

<!DOCTYPE HTML>

<htmlmanifest="demo.appcache">

...

</html>

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。

manifest 文件的建议的文件扩展名是:".appcache"。

manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。

Mainifest文件

manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。

例子:

CACHE MANIFEST

# 2012-02-21 v1.0.0

CACHE:

cached.js

cached.css

 

NETWORK:

uncached.js

uncached.css

 

FALLBACK:

index.html 404.html


CACHE MANIFEST 写在manifest文件开头,是必须的

CACHE作用是标识出哪些文件需要缓存,可以是相对路径也可以是绝对路径

NETWORK可选,这一部分是要直接读取的文件,可以使用通配符 * 。

FALLBACK可选,指定了一个后备页面,当资源无法访问时,浏览器会使用该页面。

在线的情况下,浏览器发现html头部有manifest属性,会请求manifest文件,如果是第一次访问应用,浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过应用并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。

离线的情况下,浏览器就直接使用离线存储的资源。

注意:

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

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

3.如果更新中某个资源下载失败,则整个更新就视作失败,浏览器会依旧采用原来的资源

4.站点离线存储的容量限制是5M

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

window.applicationCache对象常用事件

1.   oncached:当离线资源存储完成之后触发这个事件

2.   onchecking:当浏览器对离线存储资源进行更新检查的时候会触发这个事件

3.   ondownloading:当浏览器开始下载离线资源的时候会触发这个事件

4.   onprogress:当浏览器在下载每一个资源的时候会触发这个事件,每下载一个资源就会触发一次。

5.   onupdateready:当浏览器对离线资源更新完成之后会触发这个事件

6.   onnoupdate:当浏览器检查更新之后发现没有资源更新的时候触发这个事件

最后一点是该特性已经从web标准删除,可能在未来某个时间停止,推荐使用Service Workers 代替。

参考链接:

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Using_the_application_cache

http://imweb.io/topic/5703a99606f2400432c1397b

https://github.com/WarpPrism/Blog/issues/20


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值