使用html5 通过创建cache manifest文件，可以轻松地创建web应用的离线版本。

html5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

1，离线缓存-用户可在应用离线时使用它们。

2，速度-已缓存资源加载得更快

3，减少服务器负载 浏览器将只从服务器下载更新过或更改过的资源。

HTML5 Cache Manifest实例

下面的例子展示了带有cache manifest的html文档（供离线浏览）:

<!DOCTYPE HTML>

 <html manifest="demo.appcache">

 <body>

 </body>

 </html>

Cache Manifest基础

如需启用应用程序缓存，请在文档的html标签中包含manifest属性：

每个指定了manifest的页面在用户对其访问时都会被缓存。如果未指定manifest属性，则页面不会被缓存(除非在manifest文件中直接指定了该页面)

Tmanifest文件的建议的文件扩展名是:".appcache".

请注意：manifest文件需要配置正确的MIME-type,即"text/cache-manifest".必须在web服务器上进行配置。

Manifest文件

manifest文件是简单的文本文件，它告知浏览器被缓存的内容（以及不被缓存的内容）。

manifest文件可分为三个部分：

CACHE MANIFEST 在此标题下列出的文件将在首次下载后进行缓存

NETWORK 在此标题下列出的文件需要与服务器连接，且不会被缓存

FALLBACK,在此标题下列出的文件规定当页面无法访问回退页面

CACHE MANIFEST

第一行，CACHE MANIFEST是必需的：

CACHE MANIFEST

/theme.css

/logo.gif

/jquery.js

上面的manifest文件列出了三个资源：一个css文件，一个gif图像，以及一个js文件，当manifest文件加载后，浏览器会从网站的根目录下下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。

NETWORD

下面的NETWORD小节规定文件"login.php"永远不会被缓存，且离线时是不可用的：

FALLBACK

下面的FALLBACK小节规定如果无法建立因特网连接，则用"offline.html",替代/html5/目录中所有的文件：

FALLBACK:

 /html/ /offline.html

注意: 第一个 URI 是资源，第二个是替补。

更新缓存

一旦应用被缓存，它就会保持缓存直到发生下列情况：

用户清空浏览器缓存

manifest文件被修改（参阅下面的提示）

由程序来更新应用缓存

关于应用程序缓存的说明

请留心缓存的内容

一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新manifest文件。

注意：浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个闪站点5MB）

HTML5 学习笔记 应用程序缓存的更多相关文章

  1. HTML5学习(九)----应用程序缓存

    参考教程:http://www.w3school.com.cn/html5/html_5_app_cache.asp 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 w ...

  2. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  3. HTML5学习总结-08 应用缓存(Application Cache)

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

  4. HTML 5 学习之应用程序缓存

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

  5. html5学习笔记3——高级特性

    一:Web存储 数据以 键/值 对存在, web网页的数据只允许该网页访问使用. web存储有两种: localStorage - 没有时间限制的数据存储,存于浏览器缓存 sessionStorage ...

  6. mybatis学习笔记(14)-查询缓存之中的一个级缓存

    mybatis学习笔记(14)-查询缓存之中的一个级缓存 标签: mybatis mybatis学习笔记14-查询缓存之中的一个级缓存 查询缓存 一级缓存 一级缓存工作原理 一级缓存測试 一级缓存应用 ...

  7. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. SpringBoot学习笔记：Redis缓存

    SpringBoot学习笔记:Redis缓存 关于Redis Redis是一个使用ANSI C语言编写的免费开源.支持网络.可基于内存亦可以持久化的日志型.键值数据库.其支持多种存储类型,包括Stri ...

  9. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

随机推荐

  1. 【转】如何修改maven工程jdk版本

    1.使用maven的时候,默认会使用1.5版本的JDK,并且也是编译成1.5的,我的电脑里面用的JDK是1.7的,1.8也出来了,没理由还用1.5的吧!所以我手动改成了1.7,郁闷的是,每次 mave ...

  2. hssworkbook 用法案例

    public ActionResult excelPrint() { HSSFWorkbook workbook = new HSSFWorkbook();// 创建一个Excel文件 HSSFShe ...

  3. PYPY_GC

    Author:Jin Date: 2014-7-8 http://doc.pypy.org/en/latest/windows.html http://www.pypy.org/download.ht ...

  4. Debounce 和 Throttle 的原理及实现---防止频繁触发某事件

    原文:http://blog.csdn.net/redtopic/article/details/69396722 在处理诸如 resize.scroll.mousemove 和 keydown/ke ...

  5. 【提醒】使用 iptables 时，特别注意 规则的顺序

    在 centos 上安装 redis 服务器,很快就搞定了,服务器上使用 redis-cl 测试都没有问题了. 但到宿主机上测试,怎么测试都不通过,关键是:关闭了 centos 的 Iptables ...

  6. Java：volatile 关键字的一点理解

    背景 学了六年C#,一直没有使用过 volatile,对多线程编程也是偶尔才会使用,这次学习 Java 又遇到了 volatile,准备稍微深入的了解一下. volatile 的作用? 几乎所有支持这 ...

  7. NYOJ 8 一种排序（comparator排序）

    一种排序 时间限制: 3000 ms  |  内存限制: 65535 KB 难度: 3   描述 现在有很多长方形,每一个长方形都有一个编号,这个编号可以重复:还知道这个长方形的宽和长,编号.长.宽都 ...

  8. IE6BUG汇总篇（不断更新）

    1.IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, 而左侧则呈现出20px,解决它的方 ...

  9. java设计模式3--单例模式（Singleton）

    本文地址:http://www.cnblogs.com/archimedes/p/java-singleton-pattern.html,转载请注明源地址. 单例模式 保证一个类仅有一个实例,并提供一 ...

  10. PHP的错误处理方式(开发和上线)

    对于PHP开发人员来说,一旦某个产品投入使用.应该马上将 display_errors选项关闭.以免由于这些错误所透露的路径.数据库连接.数据表等信息而遭到黑客攻击. 可是.不论什么一个产品在投入使用 ...