首页 > 编程 > HTML > 正文

详解HTML5中的manifest缓存使用

2024-08-26 00:18:16
字体:
来源:转载
供稿:网友
这篇文章主要介绍了详解HTML5中的manifest缓存使用,文中同时介绍了相关的一些自动化工具,需要的朋友可以参考下
 
 

起源
html5之前的网页,都是无连接,必须联网才能访问,这其实也是web的特色,这其实对于PC是时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐在火车上,过了一个隧道(15分钟),便无法访问网站,这对于web的伤害是很大的,比如对于 《ecmascript合集》这样的为阅读而生的页面。

html5便引入了cache manifest 文件。那么什么是cache manifest呢,接下来会讲到。

什么是Cache Manifest
首先manifest是一个后缀名为minifest的文件,在文件中定义那些需要缓存的文件,支持manifest的浏览器,会将按照manifest文件的规则,像文件保存在本地,从而在没有网络链接的情况下,也能访问页面。

当我们第一次正确配置app cache后,当我们再次访问该应用时,浏览器会首先检查manifest文件是否有变动,如果有变动就会把相应的变得跟新下来,同时改变浏览器里面的app cache,如果没有变动,就会直接把app cache的资源返回,基本流程是这样的。
详解HTML5中的manifest缓存使用

Manifest的特点
离线浏览: 用户可以在离线状态下浏览网站内容。

更快的速度: 因为数据被存储在本地,所以速度会更快.

减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源。

浏览器支持情况
所有主流浏览器均支持应用程序缓存,除了 Internet Explorer。caniuse给出的答案如下图所示。
详解HTML5中的manifest缓存使用

如何使用
html新增了一个manifest属性,可以用来指定当前页面的manifest文件。

创建一个和html同名的manifest文件,比如页面为index.html,那么可以建一个index.manifest的文件,然后给index.html的html标签添加如下属性即可:

XML/HTML Code复制内容到剪贴板
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表