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. VB.NET 初涉线程的定义和调用

    什么是线程 说话一:进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,进程是系统进行资源分配和调度的一个独立单位. 线程是进程的一个实体,是CPU调度和分派的基本单位,它是比进程更小的能独 ...

  2. 【11.2noip冲刺赛】 循环整数 （分段打表）

    [问题描述]moreD在学习完循环小数之后发现循环是个很美好的性质.自己只需要记住短短的循环节以及循环次数(次数大于1,且是整数)就可以记住整个数字了.因为背诵数字变得方便了,moreD决定背诵[L, ...

  3. Kernel Packet Traveling Diagram(图片，关于iptables)

    转自:view-source:http://www.docum.org/docum.org/kptd/ Network -----------+----------- | +------------- ...

  4. mysql 蠕虫复制

    INSERT into user_info(version,create_user_count,create_pc_count) select version,create_user_count,cr ...

  5. VirtualBox安装linux增强工具报错

    错误提示: Building the OpenGL support module                         [FAILED] 解决办法 cd /media/VBOXADDITIO ...

  6. hql中in的用法

    平时经常用Hibernate,由于习惯表间不建立关联,所以HQL查询时候经常要用in语句. 由于表间没有建立外键的关联关系所以使用in是最常见的代替使用对象po中的set. 但是在写hql时如果在ne ...

  7. Python 入门之常见小问题

    1.在终端运行python,出现>>>即可输入代码回车进行执行,如果要退出,只需要执行exit()即可. -->在Python交互式命令行下,可以直接输入代码,然后执行,并立刻 ...

  8. 运维人员：走好你的IT运维路

      转自 http://os.51cto.com/art/201303/387120.htm   现阶段,大多数运维人员只是处于被动低效率手工救火的状态,企业对其重视程度不高,导致部分运维人员对自己的 ...

  9. Solaris-[ODBC-ORACLE WP Driver]遇到的几个问题

    确保之前已装好ORACLE和ODBC,ODBC连接数据库时会出现几个问题 一.登陆oracle并启动 [root@bunsol:/export]$su - oracle Oracle Corporat ...

  10. Apache Spark2.0正式发布

    Apache Spark2.0正式发布 7月26日起Databricks开始提供Apache Spark 2.0的下载,这个版本是基于社区在过去两年的经验总结而成,不但加入了用户喜爱的功能,也修复了之 ...