今天看了离线缓存(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. 2016EC Final F.Mr. Panda and Fantastic Beasts

    题目大意 \(T(1\leq T\leq42)\)组数据,给定\(n(2\leq n\leq 50000)\)个字符串\(S_{i}(n\leq\sum_{i=1}^{n}S_{i}\leq 2500 ...

  2. 操作Jexus

    jws.start等命令在Jexus V5.6.3中已经合并为一个单一命令,即"jws",这是一个shell脚本文件. 命令参数与对应的功效: jws start : 启动Jexu ...

  3. 积分图(三) - Boxfilter 的实现过程分析

    Boxfilter 快速计算 它可以使复杂度为O(MN)的求和,求方差等运算降低到O(1)或近似于O(1)的复杂度,它的缺点是不支持多尺度. Boxfilter 的原理有点类似 Integral Im ...

  4. Go基础知识梳理(三)

    Go基础知识梳理(三) 结构 type Person struct { name string sex int } func main() { //推荐写法 person := Person{ nam ...

  5. JZ-064-滑动窗口的最大值

    滑动窗口的最大值 题目描述 给定一个数组和滑动窗口的大小,找出所有滑动窗口里数值的最大值.例如,如果输入数组{2,3,4,2,6,2,5,1}及滑动窗口的大小3,那么一共存在6个滑动窗口,他们的最大值 ...

  6. 安装CentOS时,推荐的分区方案

    最佳分区设置取决于 Linux 系统的用途.

  7. think php 软删除

    <a href="/admin/exam/delete/id/{$v.id}" onclick="if(confirm('确认删除?')) location.hre ...

  8. 给定class对象返回该类的实例

    今天分享给大家一个实用的开发技巧, 创建一个返回值为泛型的对象构建函数, 要求是传入返回值类的 class 对象. 例如: 平时我们开发接口的时候发现很多响应类里面基本都会有`code`和`error ...

  9. GO语言基础(结构+语法+类型+变量)

    GO语言基础(结构+语法+类型+变量) Go语言结构 Go语言语法 Go语言类型 Go语言变量       Go 语言结构 Go 语言的基础组成有以下几个部分: 包声明 引入包 函数 变量 语句 &a ...

  10. ListBox 控件模板

    <Window x:Class="WpfApplication22.MainWindow" xmlns="http://schemas.microsoft.com/ ...