使用HTML5,通过创建 cache manifest 文件,可以轻松创建web应用的离线缓存。
 
什么事应用程序缓存?
HTML5引入了应用程序缓存,这意味着 web 应用可进行缓存,并在没有因特网连接时进行访问。
 
应用程序缓存为应用带来三个优势:
1.离线浏览 - 用户可在应用离线时使用它们
2.速度 - 已缓存资源加载的更快
3.减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
 
浏览器支持
IE10,火狐,谷歌,苹果,欧鹏支持应用程序缓存。
 
Cache Manifest 基础
如需启用应用程序缓存,请在文档<html>标签包含manifest属性:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html> 
每个指定了 manifest 的页面在用户访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存。除非在manifest文件中直接指定了该页面。
manifest文件的建议的文件扩展名是“appcache”
注意:manifest文件需要配置正确的MIME-type,即"text/cache-manifest"。必须在web服务器上配置。
 
manifest文件
manifest文件是简单地文本文件,它告知浏览器被缓存的内容以及不缓存的内容。
CACHE MANIFEST在此标题下列出文件将在首页下载后进行缓存。
NETWORK在比标题下列出的文件需要与服务器连接,且不会被缓存。
FALLBACK在此标题下列出的文件规定当页面问法访问时的回退页面比如404页面。

CACHE MANIFEST

第一行,CACHE MANIFEST,是必需的:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

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

NETWORK

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

NETWORK:
login.php

可以使用星号来指示所有其他其他资源/文件都需要因特网连接:

NETWORK:
*

FALLBACK

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

FALLBACK:
/html/ /offline.html

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

更新缓存

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

  • 用户清空浏览器缓存
  • manifest 文件被修改(参阅下面的提示)
  • 由程序来更新应用缓存

实例 - 完整的 Manifest 文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

提示:以 "#" 开头的是注释行,但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

关于应用程序缓存的说明

请留心缓存的内容。

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

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

HTML5 应用程序缓存的更多相关文章

  1. HTML5应用程序缓存实现离线Web网页或应用

    HTML5应用程序缓存和浏览器缓存的区别.(有些)浏览器会主动保存自己的缓存文件以加快网站加载速度.但是要实现浏览器缓存必须要满足一个前提,那就是网络必须要保持连接.如果网络没有连接,即使浏览器启用了 ...

  2. HTML5: HTML5 应用程序缓存

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

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

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

  4. HTML5应用程序缓存Application Cache

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

  5. 【HTML5】浅析HTML5应用程序缓存(ApplicationCache)

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

  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. C# WebBrowser的DrawToBitmap方法 截取网页保存为图片

    bool mark = true;         private void btnOpen_Click(object sender, EventArgs e)         {           ...

  2. 成都Uber优步司机奖励政策(3月4日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  3. CF 570 D. Tree Requests

    D. Tree Requests http://codeforces.com/problemset/problem/570/D 题意: 一个以1为根的树,每个点上有一个字母(a-z),每次询问一个子树 ...

  4. 封装一个Automapper单例

    public class DataModule : IModule { public void Configure(IMapperConfigurationExpression cfg) { //cf ...

  5. 安装虚拟机以及ubuntu

    近期要用到linux,所以开始学习.想要在这里记录自己的学习之路 1.安装虚拟机以及装ubuntu系统 虚拟机就相当于一台电脑,电脑里得有系统,我们选择了ubuntu作为操作系统. 安装看下面的博客操 ...

  6. Ubuntu 14.04 登录 界面添加 root账号

    1打开终端输入:sudo gedit /usr/share/lightdm/lightdm.conf.d/50-ubuntu.conf 2在弹出的编辑框里加入:greeter-show-manual- ...

  7. postman使用感言

    这段时间接口测试一直使用的postman,一款谷歌接口测试插件,感受如下 优点: 1.对于中小型公司来说应该是够用的,特别是一键接口环境切换,一键设置header,作为一般的接口测试来说已经很不错了, ...

  8. 【转】Haml 这货是啥? 附参考

    Haml是一种用来描述任何XHTML web document的标记语言,它是干净,简单的.而且也不用内嵌代码.Haml的职能就是替代那些内嵌代码的page page templating syste ...

  9. 购物单:Excel的应用

    题目描述: 小明刚刚找到工作,老板人很好,只是老板夫人很爱购物.老板忙的时候经常让小明帮忙到商场代为购物.小明很厌烦,但又不好推辞. 这不,XX大促销又来了!老板夫人开出了长长的购物单,都是有打折优惠 ...

  10. hibernate提示Unknown entity: :xxx

    错误提示: org.hibernate.MappingException: Unknown entity: org.dao.po.Role at org.hibernate.internal.Sess ...