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. CSS3实现漂亮ToolTips

    演示Demo 5种效果的主要css如下: /* transform:向元素应用2D或3D转换; transform-origin属性只有在定义了transform以后才生效 */ .tooltip-e ...

  2. javascript二级联动

    二级联动在一般的网页中随处可见,一般是地址,比如点击浙江省,随后出现的是杭州市,嘉兴市:点击北京省出现的是朝阳,海淀,而不是出现杭州,嘉兴. 要想实现这个步骤,就要用到javascript来实现.其中 ...

  3. java 和 Python 的互调

    http://www.cnblogs.com/lmyhao/p/3363385.html http://blog.csdn.net/wxiaow9000/article/details/5166029 ...

  4. python练习_购物车(2)

    用python写了一个购物车程序,主要是练习,代码如下 主入口文件:main.py #!/usr/bin/env python # -*- coding:utf-8 -*- #先调用用户登录函数,在进 ...

  5. 关于异常Microsoft.CSharp.RuntimeBinder.RuntimeBinderException

    原文:关于异常Microsoft.CSharp.RuntimeBinder.RuntimeBinderException 关于Microsoft.CSharp.RuntimeBinder.Runtim ...

  6. 几个关于JPEGLIB库的博客

    1.http://blog.csdn.net/huxiangyang4/archive/2010/07/12/5728888.aspx 我认为是最好的 2.http://blog.csdn.net/a ...

  7. [Linux] 修改主机名（hostname）

    在Linux命令行下输入hostname,查看当前主机名,如果想修改它,直接在hostname后面加上新主机名即可(注:以下操作都需要root用户执行),如: # hostname newhostna ...

  8. bind新发现

    function foo(a,b){ this.val = a+b; } var bar = foo.bind(null, 'p1'); var baz = new bar('p2'); consol ...

  9. wxAui Frame Management用法

    wxAui Frame Management用法:1. 总体步骤# 安装wxpython2.8.*.*后import wx.aui# 初始化一个wxAui管理框架对象mgr = wx.aui.AuiM ...

  10. Unity UGUI 使用 CCTween 实现 打字效果

    最近闲来无事 就研究了下 打字效果的实现 结果发现很简单 直白了说是太简单了  下边效果图加代码 走着 增加可拖拽 脚本 (场景物体不支持 alpha 隐藏) 目前 CCAnim 封装了 move R ...