HTML5应用程序缓存和浏览器缓存的区别。
（有些）浏览器会主动保存自己的缓存文件以加快网站加载速度。但是要实现浏览器缓存必须要满足一个前提，那就是网络必须要保持连接。如果网络没有连接，即使浏览器启用了对一个站点的缓存，依然无法打开这个站点。只会收到一条错误信息。而使用离线web应用，我们可以主动告诉浏览器应该从网站服务器中获取或缓存哪些文件，并且在网络离线状态下依然能够访问这个网站。

如何实现HTML5应用程序缓存。
实现HTML5应用程序缓存非常简单，只需三步，并且不需要任何API。只需要告诉浏览器需要离线缓存的文件，并对服务器和网页做一些简单的设置即可实现。

•创建一个 cache.manifest 文件，并确保文件具有正确的内容
•在服务器上设置内容类型
•所有的HTML文件都指向 cache.manifest
首先我们需要建立一个名为 cache.manifest 的文件，Windows平台下用记事本即可（也可用其他的IDE）。文件内容如下：

CACHE MANIFEST
#v1 - 2013-09-09

CACHE:
index.html
favicon.ico
css/main.css
…

NETWORK: *
其中 CACHE: 之后的部分为列出我们需要缓存的文件。 NETWORK: 之后可以指定在线白名单，即列出我们不希望离线存储的文件，因为通常它们的内容(www.111cn.net)需要互联网访问才有意义。另外，在此部分我们可以使用快捷方式：通配符*。这将告诉浏览器，应用服务器中获取没有在显示部分中提到的任何文件或URL。需要特别指出的是，上面例子中的注释 v1 很有必要存在。只有当 cache.manifest 文件发生变化时，浏览器才会去更新应用缓存。如果你要更改缓存资源，你必须同时修改此文件中的内容，以便让浏览器知道它们需要更新缓存。你可以对清单文件做任何改动，但大家都认同的最佳实践则是修正版本号（即v*）。

接下来需要在服务器上设置内容类型：

假使你使用的事Apache服务器，在.htaccess文件中添加以下代码：

AddType text/cache-manifest .manifest最后，我们需要将HTML页面指向清单文件。通过设置每一个页面中HTML元素的manifest属性来完成这一步：

<html manifest="/cache.manifest">完成这一步后，就完成了web离线缓存的所有步骤。由于浏览的文件内容都没有更改且存储在本地，因此现在网页的打开速度会更快（即使是在线状态也如此）。
需要注意的问题：

•网站的每一个html页面都必须设置html元素的manifest属性。一定要这样做；
•在你的整个网站应用中，只能有一个cache.manifest文件（建议放在网站根目录下）；
•部分浏览器（如IE8-）不支持HTML5离线缓存；
from:http://www.111cn.net/wy/html5/52979.htm

HTML5应用程序缓存实现离线Web网页或应用的更多相关文章

  1. 【HTML5】浅析HTML5应用程序缓存（ApplicationCache）

    一.为什么需要Web应用程序缓存 在移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐在火车上,过了一个隧道(15分钟),便无法访问网站,这对于web的伤害是很大的    ...

  2. HTML5: HTML5 应用程序缓存

    ylbtech-HTML5: HTML5 应用程序缓存 1.返回顶部 1. HTML5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线 ...

  3. cookie，sessionStorage，loclaStorage，HTML5应用程序缓存

    cookie Cookie 是一些数据,由服务器生成,发送给浏览器,一旦用户从该网站或服务器退出,Cookie 就存储在用户本地的硬盘上,下一次请求同一网站时会把该cookie发送给服务器.Cooki ...

  4. IIS通过HTML5实现应用程序缓存的离线浏览

    这里我是使用的IIS7: IIS7发布了网站后要想使用HTML5的应用程序缓存,需要增加一个关于文本/缓存清单( text/cache-manifest)的新的MIME类型,选中网站添加一个MIME类 ...

  5. HTML5应用程序缓存Application Cache

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  6. HTML5应用程序缓存Application Cache详解

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  7. html5—— 应用程序缓存

    使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这 ...

  8. HTML5之appcache语法理解/HTML5应用程序缓存/manifest缓存文件官方用法翻译

    习惯性的贴几个参考链接: W3School-HTML 5 应用程序缓存 官方 MDN window.applicationCache 接口文档 官方 MDN 用法示例 看所有的教程不如直接看最原始的官 ...

  9. html5应用程序缓存

    缓存概念: ------页面缓存: html.JS.CSS等,这些缓存资源是由于浏览器的行为而产生; ------数据缓存 ----------AppCache:  Cache Manifest 操作 ...

随机推荐

  1. 性能测试工具——Mxdperfstat

    Mxdperfstat是一款mxd性能检测工具,使用它来测试专题地图的性能非常不错! 获取工具 https://www.arcgis.com/home/item.html?id=a269d03aa1c ...

  2. Linq中的连接(join)

    http://www.cnblogs.com/scottckt/archive/2010/08/11/1797716.html Linq中连接主要有组连接.内连接.左外连接.交叉连接四种.各个用法如下 ...

  3. spring boot 运行提示：Process finished with exit code 1

    spring boot 运行提示:Process finished with exit code 1 经检查发现是由于在application.properties配置文件中将某些自定义配置项移除了, ...

  4. Android StageFrightMediaScanner源码解析

    1. 简单介绍 Android中在StageFrightMediaScanner实现对多媒体文件的处理. 此外在StageFrightMediaScanner定义了支持的多媒体文件类型. 文件位置 f ...

  5. Python学习笔记_01:基本概念介绍

    目录 1.Python语言简介 2.Python中常用数据结构 2.1什么是列表? 2.2什么是元组? 2.3什么是字典? 2.4索引及分片 3.其它基本概念 3.1数据类型和变量 3.2生成器 3. ...

  6. iWatch应用开发-oc篇

    1.创建项目 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/di ...

  7. 【Linux】找出文件之间的差异

    使用命令comm可以找出2个文件之间的差异 现在有文件如下: Linux:/qinys # cat A.txt apple lemon onion orange pear Linux:/qinys # ...

  8. django之创建第10-1个项目-图片上传并记录上传时间

    1.百度云盘:django之创建第10-1个项目-图片上传并记录上传时间 2.主要修改的配置文件有3个,forms.views和models3个文件以及html 3.forms.py文件修改 #cod ...

  9. 基于py3和pymysql的数据库查询，查询某几列的数据

    #python3 #xiaodeng #基于py3和pymysql的数据库查询,查询某几列的数据 import pymysql conn=pymysql.connect(....) cur=conn. ...

  10. 转 PHP5+APACHE2.2配置

    初学php,配置起来老出问题,找了篇不错的帖子,一试就通过了,所以就顺带着转了过来. 不过在我安装phpMyAdmin的时候还是发现这篇文章的一个问题,就是php.ini如果放在system32下,启 ...