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. 想使用WM_CONCAT 函数进行多列转一行，但发现没有

    查看数据库版本: SELECT * FROM v$version; 1 Oracle Database 11g Enterprise Edition Release 11.1.0.7.0 - 64bi ...

  2. ExecutorService 的理解与使用

    ExecutorService 的理解与使用  http://my.oschina.net/bairrfhoinn/blog/177639 Java线程池ExecutorService http:// ...

  3. Python基础：绑定和方法调用

    首先,方法仅仅是类内部定义的函数,也就是说,方法是类属性而不是实例属性. 其次方法有两种被调用的方式:调用绑定的方法和调用未绑定的方法. 当存在一个实例时,方法才被认为绑定到了那个实例上,没有实例时方 ...

  4. console.log几个小知识

    <script> //百度的console console.log('一张网页,要经历怎样的过程,才能抵达用户面前?\n一位新人,要经历怎样的成长,才能站在技术之巅?\n探寻这里的秘密:\ ...

  5. MediaPlayer类——播放视频和音乐

    1)如何获得MediaPlayer实例: 可以使用直接new的方式: MediaPlayer mp = new MediaPlayer(); 也可以使用create的方式,如: MediaPlayer ...

  6. cx_Oracle模块详解

    1.安装cx_Oracle模块 1-1.环境准备: 1-1-1.oracle client最小安装 instantclient-sqlplus-linux.x64-11.2.0.4.0 instant ...

  7. python基础笔记-0

    python中数据结构,主要有列表.元组.字典.集合. python中最基本数据结构是序列(sequence).序列中每个元素被分配一个序号——即元素位置,也成为索引.第一个索引是0,第二个是1,以此 ...

  8. QT5.3无法自动调用incomingConnection函数的问题

    最近将qt4.7的一个工程移到5.3,遇到了几个麻烦事,主要是这个incomingConnection监听后无法自动调用的问题,在4.7上是完全没有问题的,到了5.3就不行,网上也查了下,网友们都是放 ...

  9. 好的组件，无须太复杂 – KISSY Slide 组件简介

    KISSY Slide 组件首页:http://gallery.kissyui.com/slide/1.1/guide/index.html V1.1 New Featurs Slide是一个幻灯切换 ...

  10. Delphi窗体最大化按钮不可用情况下的最大化

    最大化按钮不可用,而且窗体最大化,我以前一直这样设置:在Object Inspector下把BorderIcons属性下的biMaximize属性设置为False,然后把WindowState属性设置 ...