Application Cache

HTML5提供了一系列的特性来支持离线应用：

  • application cache
  • localStrorage
  • web SQL & indexed database
  • online/offline events

    application cache 就是希望浏览器来缓存, 和Etag last-modified-since 不同的是 前端的应用可以更加灵活

完整介绍

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Using_the_application_cache

Manifest文件

需要缓存的资源都放在Manifest文件中,

CACHE MANIFEST

# 以上折行必需要写

CACHE:

# 这部分写需要缓存的资源文件列表

# 可以是相对路径也可以是绝对路径

index.html

index.css

images/logo.png

js/main.js

http://img.baidu.com/js/tangram-base-1.5.2.1.js

NETWORK:

# 可选

# 这一部分是要绕过缓存直接读取的文件

login.php

FALLBACK:

# 可选

# 这部分写当访问缓存失败后，备用访问的资源

# 每行两个文件，第一个是访问源，第二个是替换文件*.html /offline.html

你需要这样使用一个缓存清单文件

<html manifest="demo.cache">

  ...

</html>

缓存检测步骤

使用了应用缓存机制以后加载文档的顺序是这样的：

  • 如果应用缓存存在，浏览器直接从缓存中加载文档与相关资源，不会访问网络。这会提升文档加载速度。
  • 浏览器检查清单文件列出的资源是否在服务器上被修改。

    如果清单文件被更新了, 浏览器会下载新的清单文件和相关的资源。 这都是在后台执行的，基本不会影响到webapp的性能。

更新后是所有资源全部重新下载, 在下载的过程中, 任意一个资源下载出错, 所有已下载的资源都被清空

因此, 如果你更新了文件后, 访问页面发现还是上次的资源, 因为浏览器是先读取已经缓存的资源之后再去检查更新的, 只有再一次去访问页面才是读取新资源

几个重要的事件

noupdate

如果当前缓存的清单副本是最新的，浏览器将向 applicationCache 对象发送一个 noupdate 事件，到此，更新过程结束。注意，如果你在服务器修改了任何缓存资源，同时也应该修改清单文件，这样浏览器才能知道它需要重新获取资源。

Chrome调试的时候不要勾选 Disable Cache 否则永远都无法触发noupdate事件了

cached

所有资源都获取成功，触发cached 事件。

checking

在下载资源文件的过程中, 还会触发一个checking, 检测资源文件有没有更新

应用程序缓存 AppCache的更多相关文章

  1. AppCache 离线存储 应用程序缓存 API 及注意事项

    使用ApplicationCache接口实现离线缓存 原文:http://www.mb5u.com/HTML5/html5_96464.html 推荐:html5 application cache遇 ...

  2. HTML5之appcache语法理解/HTML5应用程序缓存/manifest缓存文件官方用法翻译

    习惯性的贴几个参考链接: W3School-HTML 5 应用程序缓存 官方 MDN window.applicationCache 接口文档 官方 MDN 用法示例 看所有的教程不如直接看最原始的官 ...

  3. HTML 5 应用程序缓存manifest

    什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏 ...

  4. HTML5应用程序缓存Application Cache

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  5. HTML 5 应用程序缓存(上)

    什么是应用程序缓存(Application Cache)?HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏览 ...

  6. 【HTML5】浅析HTML5应用程序缓存（ApplicationCache）

    一.为什么需要Web应用程序缓存 在移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐在火车上,过了一个隧道(15分钟),便无法访问网站,这对于web的伤害是很大的    ...

  7. HTML5应用程序缓存Application Cache详解

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  8. HTML 5 应用程序缓存

    使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这 ...

  9. 【HTML5】Application Cache应用程序缓存

    HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载 ...

随机推荐

  1. oracle查询表信息

    oracle查询表信息(索引,外键,列等) oracle中查询表的信息,包括表名,字段名,字段类型,主键,外键唯一性约束信息,索引信息查询SQL如下: 1.查询出所有的用户表 select * fro ...

  2. 生成HFile文件后倒入数据出现Caused by: java.lang.ClassNotFoundException: org.apache.hadoop.hbase.filter.Filter

    数据导入的时候出现: at java.lang.Class.getDeclaredMethods0(Native Method) at java.lang.Class.privateGetDeclar ...

  3. c++多线程参数的传递

    #include <iostream> #include <pthread.h> //多线程相关操作头文件,可移植众多平台 using namespace std; struc ...

  4. 让乌龟在提交cocos2d-x版本时自动去掉不需要的东东

    引擎版本:2.1.4 ide:vs2012 一般协作开发情况下,有意思无意将bin.obj等一些目录添加到版本管理中是很烦人的事儿,在VS中不断地编译程序集和提交将带来版本暴增问题.如果你用的是乌龟S ...

  5. tempo 2.0 学习记录

    最近在做项目时使用了tempo,感觉还不错,但是发现网上对于tempo 2.0 的介绍比较少,我也是在GitHub才找到了比较完整的使用说明,我也简单记录一下自己的使用过程,重新学习一下tempo 2 ...

  6. CreateFile函数详解（确实很详细）

    CreateFile The CreateFile function creates or opens the following objects and returns a handle that ...

  7. Codeforces 241B

    因为博客园的公式编辑有点坑,所以-- 原题

  8. 微信的分享功能（针对web手机站页面进行的分享功能）

    把这段js粘贴进,设置可以分享的页面,当微信打开,即可微信进行分享各个圈 $(function(){ var lujing=$("#logimg").attr("src& ...

  9. js正则验证两位小数 验证数字最简单正则表达式大全

    <h3>输入完按回车后即可验证!(自认为最简单!)</h3> 正整数:    <input type="text" size="20&quo ...

  10. 关于在用Swift开发iOS时如何隐藏NavigationBar和TabBar

    举个例子:如果我有一个页面需要进入时同时隐藏NavigationBar和TabBar,那么我就在那个页面的ViewController的代码里加上下面的代码.就可以实现了.接下来告诉大家每一块要注意的 ...