记离线缓存(manifest)一大坑,断定其只适用于静态网站或离线应用
今天看了离线缓存(manifest)方面的资料,兴冲冲地就想给自己的网站用上。待我把代码都写好部署上服务器,并测试过OK的时候,在SegmentFault刷了一把manifest方面的问答,才发现这个大坑:manifest除了缓存manifest.appcache文件所指定的资源外,还必定会缓存当前的html页面。
具体来说:
当用户第一次访问页面,会从服务器上拉取html页面,以及其它静态资源。
浏览器会把html页面,连同
manifest.appcache文件,连同manifest.appcache文件里所指定的静态资源一并存入Application Cache。当用户第二次访问该页面,
manifest.appcache文件里所指定的静态资源就不需要重新加载了,直接从cache读出。这很好,问题是,当前的html页面也从cache直接读出来了,根本就不管线上的版本呀!这造成的问题是,网站如果更新了,用户的浏览器根本不知道,还显示cache里的版本。
网上有所谓的利用<iframe>的方案,但由于年代久远,已不适用于当前的浏览器了。
冷静下来想想,这到底是不是个Bug呢?我认为不是,正如manifest的中文译名——离线缓存,这个功能根本就是设计给离线应用(例如Hybrid App)的:用navagator.online来判断当前用户是否联网,如果离线则任由浏览器/WebView读取缓存,如果在线则清空缓存后刷新页面让浏览器/WebView读取线上最新版本的代码。
另外,采取静态化策略的网站,也很适合采用manifest,因为静态化后的网站实际上就已经属于静态网站了,让浏览器读缓存可比从服务器读静态html还省性能。而如果网站需要更新的时候,在重新做完静态化(重新生成静态html文件)后,更改一下manifest的版本号,就可以刷新缓存了,运维成本也不高。
记离线缓存(manifest)一大坑,断定其只适用于静态网站或离线应用的更多相关文章
- 离线缓存  manifest
		
程序的离线缓存由一个叫做manifest的文本文件控制,把需要离线缓存的文件列在里面即可,这个列表还可以控制需要缓存的情况,甚至当用户从缓存地址进入到没有缓存的地址应该显示什么 当浏览器下载解析了ma ...
 - HTML5 离线缓存manifest
		
1.简介W3C官方对manifest的介绍是HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏览 - 用户可在 ...
 - HTML5离线缓存Manifest
		
web app不比PC,有性能和流量方面的考虑,离线应用越来越重要,虽然浏览器有缓存机制,但是时常不靠谱,更何况普通情况下html文件是没法缓存的,断网之后一切over. 什么是manifest? 简 ...
 - HTML5 离线缓存Appcache
		
创建一个和html同名的manifest文件,比如页面为index.html,那么可以建一个index.manifest的文件,然后给index.html的html标签添加如下属性即可: <ht ...
 - html5离线缓存使用
		
html5 离线缓存使用以及注意事项 1.index.html中加入离线缓存的声明文件 如:<!DOCTYPE html><html manifest="test.appc ...
 - iOS数据库离线缓存思路和网络层封装
		
一直想总结一下关于iOS的离线数据缓存的方面的问题,然后近期也简单的对AFN进行了再次封装.全部想把这两个结合起来写一下.数据展示型的页面做离线缓存能够有更好的用户体验,用户在离线环境下仍然能够获取一 ...
 - HTML5 manifest离线缓存
		
一.基本概念 离线缓存是HTML5新引入的技术,能够让你的Web应用程序指定哪些文件可以缓存在本地,使得你的网络断开时依然可以通过本地的缓存来进行访问浏览. 二.使用方法 1. MIME type 声 ...
 - H5离线缓存机制-manifest
		
简介:Manifest 其实就是web应用的一种缓存机制,主要用于现在webapp应用中,它是浏览器自己的一种机制,随着移动互联网时代的到来,网络可靠性降低,如果我们已经将需要的文件缓存下下来,一旦网 ...
 - html5 manifest 离线缓存知识点
		
1.最大缓存容量为 5M. 2.manifest文件需要配置正确的MIME-type,即“text/cache-manifest”,这个是在web服务器上进行配置. ②编写.manifest文件,文件 ...
 
随机推荐
- 针对python输入要求
			
针对python输入要求 类型: 1.输入行数不确定,并且每一行输入一个数据. a=[] b=input() while b!='-1': //指随意使用一个值作为一个标志,来进行控制输入的行数.(在 ...
 - JAVA变量的命名规范
			
所有变量.方法.类名:见名知意 类成员变量:首字母小写和驼峰原则:monthSalary 局部变量:首字母小写和驼峰原则 常量:大写字母和下划线:MAX_VALUE 类名:首字母大写和驼峰原则:Man ...
 - Python:取整函数、四舍五入
			
int(a) 绝对值向0方向取整,符号不变 math.ceil(a) 向正无穷取整 math.floor(a) 向负无穷取整 round(a,n=0) 四舍五入,第二个参数说明保留小数位数
 - LeetCode-054-螺旋矩阵
			
螺旋矩阵 题目描述:给你一个 m 行 n 列的矩阵 matrix ,请按照 顺时针螺旋顺序 ,返回矩阵中的所有元素. 示例说明请见LeetCode官网. 来源:力扣(LeetCode) 链接:http ...
 - 矩池云里查看cuda版本
			
可以用下面的命令查看 cat /usr/local/cuda/version.txt 如果想用nvcc来查看可以用下面的命令 nvcc -V 如果环境内没有nvcc可以安装一下,教程是矩池云上如何安装 ...
 - jq 简易购物车功能实现
			
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...
 - 专业5   laravel框架添加,删除,恢复,分页,搜索接口
			
//////////////////////资源路由 //商品资源路由恢复Route::get('/restore/{id}','goodController@restore');//商品资源路由添加 ...
 - php 访问java接口数据
			
$header = []; $header[] = 'Accept:application/json'; $header[] = 'Content-Type:application/json;char ...
 - 实践1使用XGB实现酒店信息消歧
			
XGB算法是决策树衍生出来的一种算法 场景:酒店的业务人员希望我们能够提供一个算法服务去为酒店信息做一个自动化的匹配,以通过算法的手段,找到那些确定相同的酒店和确定不同的酒店 以下代码为部分 理解业务 ...
 - C/C++语言读取SEGY文件(二)
			
SEGY IO (2D) 本文档将介绍SEGY的读取与写入过程,即SEGY文件的复制,并且在实现过程采用采样点×道数二维数组的形式读写. 新建头文件SegyDataIO2D.h与C++文件SegyDa ...