manifest php,manifest让网页实现离线访问
警告:对于产生动态内容的博客等页面,请勿轻易尝试该特性,除非你使用了AJAX等异步加载方式(依然不建议)。
以前,网页和APP相比的主要缺点,一个是性能,另一个就是网络依赖。现在随着HTML5的发展,网页已经可以实现在无网络的情况下,离线访问了。比如outlook.com就可以设置脱机访问,即使电脑没联网,你也能打开该网页,查阅邮件甚至撰写草稿。虽然平时大多用邮件客户端,但偶尔打开outlook网页,就会从我那使用了多年的网址导航点进去,所以也就为它开启了离线访问功能。感兴趣的可以用新版浏览器打开qifu.me/links/或者qifu.me/hello/,待浏览器缓存一会儿,然后断开网络试一下。
实现这一功能的特性就是manifest,下面直接说怎么实现。
首先,在页面的元素里添加manifest,这样就可以告诉浏览器页面开启了应用缓存,并在这个清单文件里面列出需要缓存的资源。比如:
注意,这个文件的地址必须和页面同源,而且文件的MIME类型必须为“text/cache-manifest”,可以通过修改服务器的“mime.types”或“.htaccess”等方法为相应后缀添加这个类型,当然你也可以使用其它文件名和后缀,比如qifu.manifest。
这个清单文件里面的缓存指令共分三类,每段以 “CACHE:” 、 “FALLBACK:” 或 “NETWORK:” 开始,然后换行,列出一行行的记录,三类指令不分先后,且可以多段穿插。CACHE告诉浏览器哪些资源要缓存;FALLBACK告诉浏览器如果某资源无法获取时,用哪个资源替代;NETWORK则指明了哪些资源强制必须联网。比如:
CACHE MANIFEST
#version 1.0
CACHE:
https://qifu.me/style.css?version=1.0
https://qifu.me/script.js?version=1.0
FALLBACK:
/online.php /offline.php
NETWORK:
*
引用了这个manifest清单文件的页面会自动被缓存,无需声明,你也无法禁止它被缓存。不引用manifest的页面,是不能调用任何离线缓存资源的。
第一行是固定格式,第二行的注释是版本号,因为缓存建立后,下次浏览器就不再访问被缓存的资源(包括这个页面本身),只检查这个清单文件是否有更改,更改了就重新缓存一遍,但是只有下次访问才可以看到缓存的新内容,除非你使用js判断是否有更新,然后自动刷新该页面:
// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
// Swap it in and reload the page to get the new hotness.
window.applicationCache.swapCache();
window.location.reload();
}
}, false);
}, false);
一旦被缓存,你就不能通过改变参数里的版本号来强制浏览器刷新某个资源的缓存了,因为你改的版本号浏览器看不到,它直接用缓存的旧html页面,但是考虑到有些低版本浏览器不支持这一特性,还是建议保留问号后面的version。而且被缓存的资源,浏览器就不再遵守http header里面的缓存时间,直到清单文件更新缓存。
FALLBACK段落的每条记录分两部分,空格前面是原始资源,正常情况下浏览器访问的就是这个,后面那个是后备资源,当尝试请求资源失败时会使用它代替前面那个。这个后备资源浏览器会自动缓存,不需要你另外指明或者在html页面引用。同样,CACHE后面也可以列出正常情况下用不到的资源,以防后备资源需要调用。
NETWORK段落的星号是个通配符,表示其余资源全部绕过缓存,必须每次联网访问,当然也可以指定具体的地址。但是CACHE段落里面是不允许使用通配符的。
就这么简单:一条引用、一个清单文件,页面已经可以脱机访问了。亲测Edge、IE、Chrome等新版浏览器均支持。看完你也就明白为什么不要轻易为博客等动态页面使用该特性了,因为缓存太强……
manifest php,manifest让网页实现离线访问相关推荐
- 本地存储Cookie、Storage、indexDB、ServiceWork离线访问网站
在日常开发中,开发者用得最多的大概是前三种吧,cookie.Session/Local,对后两种运用的较少,话不多少,直接正文: cookie cookie是客户端的解决方案,最早是网景公司的前雇员L ...
- 如何下载网站以供离线访问
In this tutorial I will teach you how to download website for offline access. 在本教程中,我将教您如何下载网站以供离线访问 ...
- 如何取消IE“已限制此网页运行可以访问计算机的脚本或ActiveX控件”(小技巧)...
在本地调试html页,如果其中包含js 或flash ,IE经常会提示"IE已限制此网页运行可以访问计算机的脚本或ActiveX控件 ".虽然出于安全考虑IE阻止本地脚本运行这个做 ...
- jquery出现“为了有利于保护安全性,IE已限制此网页运行可以访问计算机的脚本或 ActiveX 控件。请单击这里获取选项...”的解决办法
为了有利于保护安全性,IE已限制此网页运行可以访问计算机的脚本或 ActiveX 控件.请单击这里获取选项... 方法一: 在本地调试html页,如果其中包含js或flash,IE经常会提示" ...
- 通过www服务器提供的起始网页就能访问,2010春2题目.doc
2010春2题目 2010春第二套 一.必答题 [1]. 在一台已感染病毒的计算机上读取CD-ROM光盘中的数据,该光盘也有可能被感染病毒. [2]. 电缆调制解调技术具有稳定性好.通信速度快等特点, ...
- 取消IE“已限制此网页运行可以访问计算机的脚本
在本地调试html页,如果其中包含js或flash,IE经常会提示"IE已限制此网页运行可以访问计算机的脚本或ActiveX控件".虽然IE出于安全考虑阻止本地脚本运行这个做法没错 ...
- HTML中属性manifest格式,manifest是啥 MANIFEST文件是什么文件?
manifest是什么意思 custom manifest 自定义清单 双语对照 例句: 1. Defines a trademark custom attribute for an assembly ...
- 如何取消IE“已限制此网页运行可以访问计算机的脚本或ActiveX控件”
在本地调试html页,如果其中包含js或flash,IE经常会提示"IE已限制此网页运行可以访问计算机的脚本或ActiveX控件".虽然IE出于安全考虑阻止本地脚本运行这个做法没错 ...
- Jenkins构建服务,Dockerfile报错:manifest for java:8-jre not found: manifest unknown: manifest unknown
1.问题描述 Jenkins构建服务,控制台报错: manifest for java:8-jre not found: manifest unknown: manifest unknown 截图: ...
最新文章
- Linux(CentOs)下安装Phantomjs + Casperjs
- Team Work(CF 932 E)[bzoj5093][Lydsy1711月赛]图的价值
- 洛谷——P1223 排队接水
- 剑指offer之链表续
- Python参数类型
- Context.getExternalFilesDir()和Context.getExternalCacheDir()方法
- mysql重新编译_重新编译mysqld_exporter0.10-阿里云开发者社区
- javaweb实训第四天上午——员工管理系统-JavaBeanELJSTLMVC思想
- 撞击测试软件,碰撞检测用什么软件?你会用Navisworks做碰撞检测吗?
- 一名网工对Linux运维的一次经历
- 微信公众开发java教程_[Java教程]微信公众平台开发(一)
- 机制检验——中介检验
- 海马玩模拟器无法链接问题处理
- mysql .frm_mysql通过frm向mysql导入表结构及数据
- csgo举报机器人怎么安排_求一个CSGO的举报和点赞用的机器人
- 网易手游《镇魔曲》怎么打?华为畅享6S帮你春节同学聚会露一手
- 入职两年申请涨薪3K被拒,是我平时好脸给多了?转身立马裸辞走人...
- 南大科院大数据Hadoop工程实训
- 皮肤病,得了慢性荨麻疹怎么办?
- C语言 ~ 取反操作