使用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. eclipse注释任务标记

     一.概述 TODO: + 说明: 如果代码中有该标识,说明在标识处有功能代码待编写,待实现的功能在说明中会简略说明. FIXME: + 说明: 如果代码中有该标识,说明标识处代码需要修正,甚至代码是 ...

  2. Python 获取windows管理员权限办法

    from __future__ import print_function import ctypes, sys, os def is_admin(): try: return ctypes.wind ...

  3. 创龙DSP6748开发板上电测试-第一篇

    1. 创龙DSP6748开发板测试.2980元的售价很高,我估计新的1200元比较合适,当然创龙定价是按照供需关系的.仿真器XDS100V2卖598元,真是狮子大张口. 2. 上电是5V-2A的电源. ...

  4. Android 模拟器 下载、编译及调试

    Android 模拟器源码下载 Android 模拟器源码的下载与 Android AOSP 源码库的下载过程类似,可以参考 Google 官方提供的 Android 源码下载文档 来了解这个过程. ...

  5. java Arrays.asList

    List<String> list = Arrays.asList("A B C D E F G H I J K L ".split(" ")); ...

  6. HTML <head>里面的标签

    <head> 中的标签可以引用脚本.指示浏览器在哪里找到样式表.提供元信息等等. 下面这些标签可用在 head 部分:<base>, <link>, <met ...

  7. Fiddler使用总结(三)

    我们知道Fiddler是位于客户端和服务器之间的代理,它能够记录客户端和服务器之间的所有 HTTP请求,可以针对特定的HTTP请求,分析请求数据.设置断点.调试web应用.修改请求的数据,甚至可以修改 ...

  8. Python 多线程、进程、协程上手体验

    浅谈 Python 多线程.进程.协程上手体验 前言:浅谈 Python 很多人都认为 Python 的多线程是垃圾(GIL 说这锅甩不掉啊~):本章节主要给你体验下 Python 的两个库 Thre ...

  9. 消费者用nginx做负载均衡,提供者用zookeeper自带功能实现负载均衡

    公司的项目基于阿里的Dubbo微服务框架开发.为了符合相关监管部门的安全要求,公司购买了华东1.华东2两套异地服务器,一套是业务服务器,一套是灾备服务器.准备在这两套服务器上实现Dubbo的分布式服务 ...

  10. 阿里云ECS下CentOS7.4 yum安装Python3.6环境

    一.安装EPEL和IUS软件源 二.安装Python3.6 三.创建python3软链接连接符 四.安装pip3 五.创建pip3链接符 六.进行验证是否安装成功 一.安装EPEL和IUS软件源 yu ...