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. week 与 strong区别 精辟的解释

    转:http://stackoverflow.com/questions/9262535/explanation-of-strong-and-weak-storage-in-ios5 觉得讲的很容易理 ...

  2. OC——类

    1.Objective-C是C语言的超集,完全兼容C语言 2.所有的关键字都以“@”开头,例如:@interface,@class,@implementation 3.Objective-C的所有对象 ...

  3. firemonkey打开子窗体（匿名回调函数）

    procedure TForm1.Button1Click(Sender: TObject);varChildForm: TForm2;beginChildForm := TForm2.Create( ...

  4. DELPHI 任务栏无EXE显示

    需要用到的一个函数: LONG SetWindowLong( HWND hWnd, int nIndex, LONG dwNewLong ); program Project; usesForms,  ...

  5. 新浪IP归属地API

    之前用过腾讯的AIP,但是官方暂停这个服务了,新浪的API时间很久了,稳定性也很好,但愿能一劳永逸. ''' '''

  6. Protobuf从安装到配置整理帖 --转

    新做的Mini项目计划使用Google的Protobuf来做,关于Protobuf是什么玩意能干什么请自己去看这里:http://code.google.com/p/protobuf/ 这里讲一下安装 ...

  7. redis.conf配置详解

    http://www.2cto.com/database/201307/225113.html

  8. POJ——位查询

    3:位查询 查看 提交 统计 提问 总时间限制:  5000ms  内存限制:  65536kB 描述 给出N个范围在[0, 65535]的整数,编程支持以下的操作: (1)修改操作:C d,所有的数 ...

  9. C# 分析搜索引擎url 得到搜索关键字

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  10. Windows系统的线程调度与软件中断分发

    在Windows操作系统内核把软件中断分为三个中断级别:DISPATCH_LEVEL,APC_LEVEL,PASSVIE_LEVEL.同时他们与线程的调试相关,WINDOWS内核中没有一个专门的程序来 ...