今天看了离线缓存(manifest)方面的资料,兴冲冲地就想给自己的网站用上。待我把代码都写好部署上服务器,并测试过OK的时候,在SegmentFault刷了一把manifest方面的问答,才发现这个大坑:manifest除了缓存manifest.appcache文件所指定的资源外,还必定会缓存当前的html页面

具体来说:

  1. 当用户第一次访问页面,会从服务器上拉取html页面,以及其它静态资源。

  2. 浏览器会把html页面,连同manifest.appcache文件,连同manifest.appcache文件里所指定的静态资源一并存入Application Cache

  3. 当用户第二次访问该页面,manifest.appcache文件里所指定的静态资源就不需要重新加载了,直接从cache读出。这很好,问题是,当前的html页面也从cache直接读出来了,根本就不管线上的版本呀!

  4. 这造成的问题是,网站如果更新了,用户的浏览器根本不知道,还显示cache里的版本。

网上有所谓的利用<iframe>的方案,但由于年代久远,已不适用于当前的浏览器了。
冷静下来想想,这到底是不是个Bug呢?我认为不是,正如manifest的中文译名——离线缓存,这个功能根本就是设计给离线应用(例如Hybrid App)的:用navagator.online来判断当前用户是否联网,如果离线则任由浏览器/WebView读取缓存,如果在线则清空缓存后刷新页面让浏览器/WebView读取线上最新版本的代码。

另外,采取静态化策略的网站,也很适合采用manifest,因为静态化后的网站实际上就已经属于静态网站了,让浏览器读缓存可比从服务器读静态html还省性能。而如果网站需要更新的时候,在重新做完静态化(重新生成静态html文件)后,更改一下manifest的版本号,就可以刷新缓存了,运维成本也不高。

记离线缓存(manifest)一大坑,断定其只适用于静态网站或离线应用的更多相关文章

  1. 离线缓存 manifest

    程序的离线缓存由一个叫做manifest的文本文件控制,把需要离线缓存的文件列在里面即可,这个列表还可以控制需要缓存的情况,甚至当用户从缓存地址进入到没有缓存的地址应该显示什么 当浏览器下载解析了ma ...

  2. HTML5 离线缓存manifest

    1.简介W3C官方对manifest的介绍是HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏览 - 用户可在 ...

  3. HTML5离线缓存Manifest

    web app不比PC,有性能和流量方面的考虑,离线应用越来越重要,虽然浏览器有缓存机制,但是时常不靠谱,更何况普通情况下html文件是没法缓存的,断网之后一切over. 什么是manifest? 简 ...

  4. HTML5 离线缓存Appcache

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

  5. html5离线缓存使用

    html5 离线缓存使用以及注意事项 1.index.html中加入离线缓存的声明文件 如:<!DOCTYPE html><html manifest="test.appc ...

  6. iOS数据库离线缓存思路和网络层封装

    一直想总结一下关于iOS的离线数据缓存的方面的问题,然后近期也简单的对AFN进行了再次封装.全部想把这两个结合起来写一下.数据展示型的页面做离线缓存能够有更好的用户体验,用户在离线环境下仍然能够获取一 ...

  7. HTML5 manifest离线缓存

    一.基本概念 离线缓存是HTML5新引入的技术,能够让你的Web应用程序指定哪些文件可以缓存在本地,使得你的网络断开时依然可以通过本地的缓存来进行访问浏览. 二.使用方法 1. MIME type 声 ...

  8. H5离线缓存机制-manifest

    简介:Manifest 其实就是web应用的一种缓存机制,主要用于现在webapp应用中,它是浏览器自己的一种机制,随着移动互联网时代的到来,网络可靠性降低,如果我们已经将需要的文件缓存下下来,一旦网 ...

  9. html5 manifest 离线缓存知识点

    1.最大缓存容量为 5M. 2.manifest文件需要配置正确的MIME-type,即“text/cache-manifest”,这个是在web服务器上进行配置. ②编写.manifest文件,文件 ...

随机推荐

  1. 关于Cookie的一些小饼干

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOEx ...

  2. python刷剑指offer(1-20)(一刷)

    2019/07/28开始刷每天6题,一共66题,刷三遍,9月1号完成. 1.二维数组中的查找: 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增 ...

  3. Linux下安装mysql你又踩过多少坑【宇宙最全教程】

    一.检查以前是否安装过MySql 因为cnetos7一般默认安装mariadb,所以要检查mysql或者mariadb是否安装 rpm -pa | grep -i mysql rpm -pa | gr ...

  4. Spark SQL和CSl

    目录 1 2 3 4 1 import org.apache.spark.sql.{DataFrame, SaveMode, SparkSession} object Demo1Sess { def ...

  5. 矩池云上安装ikatago及远程链接教程

    https://github.com/kinfkong/ikatago-resources/tree/master/dockerfiles 从作者的库中可以看到,该程序支持cuda9.2.cuda10 ...

  6. Java入土---基本DOS命令

    基本DOS命令 打开cmd方式 开始+系统+命令提示符 win+R,输入cmd 在任意文件夹下,按住shift + 右键,打开命令行窗口 资源管理器里打开 常用DOS命令 盘符切换 E: dir命令查 ...

  7. 解释一下什么是线程池(thread pool)?

    在面向对象编程中,创建和销毁对象是很费时间的,因为创建一个对象要获取内存资源或者其它更多资源.在Java中更是如此,虚拟机将试图跟踪每一个对象,以便能够在对象销毁后进行垃圾回收.所以提高服务程序效率的 ...

  8. Golang 数据结构

    每种语言在实现数据结构有些许不同.go 是如何实现的呢? 1. 数组 Array go 中数组是相同的元素组成的集合,计算机会为数组分配一段连续的内存来保存元素,可以利用索引快速访问元素. go 中数 ...

  9. WPF 文本描边+外发光效果实现

    解决思路: (1)描边效果可以将文本字符串用GDI+生成Bitmap,然后转成BitmapImage,再用WPF的Image控件显示. (2)外发光效果用WPF自带的Effect实现 代码: 1 us ...

  10. Golang 常见设计模式之装饰模式

    想必只要是熟悉 Python 的同学对装饰模式一定不会陌生,这类 Python 从语法上原生支持的装饰器,大大提高了装饰模式在 Python 中的应用.尽管 Go 语言中装饰模式没有 Python 中 ...