今天看了离线缓存(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. LeetCode-059-螺旋矩阵 II

    螺旋矩阵 II 题目描述:给你一个正整数 n ,生成一个包含 1 到 \(n^{2}\) 所有元素,且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix . 示例说明请见LeetCode ...

  2. WPF优秀组件推荐之FreeSpire

    概述 Spire是一套可以轻松处理Word.Excel和PDF的商业组件,需要收费,但是他有一套对应的免费组件FreeSpire可以使用,免费组件在功能上有一些限制(比如:excel的sheet数量不 ...

  3. jQuery-ajax-天气接口

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Clickhouse 与 Kafka 的数据同步

    作者: LemonNan 原文地址: https://mp.weixin.qq.com/s/SUUHF9R_FKg-3vq7Q3cwBQ 注: 转载需注明作者及原文地址 介绍 Clickhouse 本 ...

  5. ASP.NET Core框架探索之Authorization

    今天我们一起来探索一下ASP.NET Core框架中的Authorization.我们知道请求进入管道处理流程先会使用Authentication进行用户认证,然后使用Authorization进行用 ...

  6. Excel 使用 公式

    1. 查询单元数据在另一列中是否存在 =VLOOKUP(E2,F:F,1,FALSE) 2.判断一列数据是否重复 =IF(COUNTIF(A:A,A2)>1,"重复",&qu ...

  7. Java基础—String构造方法

    Java基础--String构造方法 public String(): 创建一个空表字符串对象,不包含任何内容 public String(char[]chs): 根据字符数组的内容,来创建字符串对象 ...

  8. Linux 显示文件大小的命令

    ll显示的是字节,可以使用-h参数来提高文件大小的可读性,另外ll不是命令,是ls -l的别名ls -al 是以字节单位显示文件或者文件夹大小: 字节b,千字节kb, 1G=1024M=1024*10 ...

  9. C++ cout 数字之间进制的转换

    转换一个数变成8进制,则为 cout << oct << x << endl; 转换一个数变为16进制,为 cout << hex << x ...

  10. 请说说Struts1和Struts2的区别?

      特性 Struts1 Struts2 Action Struts1.x要求Action类要扩展自一个抽象基类.Struts1.x的一个共有的问题是面向抽象类编程而不是面向接口编程. Struts2 ...