使用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. Android ObjectOutputStream Serializable引发的血案

    遇到一个问题 安装后第二次进app,闪退 重现步骤 [前置条件] 打包分支:dev_7.13 手机:vivo NEX 8.1.0 [步骤] 安装三星app----同意用户协议进入书城---连续点击ba ...

  2. 对HashMap进行排序

    首先来看看Map集合获取元素的三种常见方法keySet().values().entrySet() 1. values():返回map集合的所有value的Collection集合(于集合中无序存放) ...

  3. 解决jQuery不同版同时引用的冲突

    今天研发的同事在开发一个新jQuery插件时,遇到一个揪心的问题.平台以前使用的 jQuery版本是1.2.6,偶,天啊!这是古代的版本啊! 由于很多功能基于老版本,不能删除啊,同志们都懂的! 于是我 ...

  4. Tensorflow - Implement for generating some 3-dimensional phony data and fitting them with a plane.

    Coding according to TensorFlow 官方文档中文版 import tensorflow as tf import numpy as np ''' Intro. for thi ...

  5. LeetCode 386——字典序排数

    1. 题目 2. 解答 2.1 方法一 假设返回 118 以内数的字典顺序,则为 1,10,100,101,102,...,109,11,110,111,112,...,118,12,13,....根 ...

  6. tensorflow学习笔记(4)-学习率

    tensorflow学习笔记(4)-学习率 首先学习率如下图 所以在实际运用中我们会使用指数衰减的学习率 在tf中有这样一个函数 tf.train.exponential_decay(learning ...

  7. SpringCloud IDEA 教学 (三) Eureka Client

    写在前头 本篇继续介绍基于Eureka的SpringCloud微服务搭建,回顾一下搭建过程, 第一步:建立一个服务注册中心: 第二步:建立微服务并注入到注册中心: 第三步:建立client端来访问微服 ...

  8. 常用实例:js格式化手机号为3 4 4形式

    如何在填写手机号时将格式转换为3 4 4形式: 一:填写手机号时,在keyup事件中判断长度,符合条件时在值后面插入空格 $('#username').on('keyup',function(e){ ...

  9. 关于jquery几个自己不咋用到的常用遍历赛选的api

    1.contains:作用是返回包含某个文字的元素节点 例子:要给所以含有“lyz”的p节点加样式: 可以这样:$("p:contains(lyz)").css("col ...

  10. C语言中动态内存的分配(malloc,realloc)

    动态内存分配:根据需要随时开辟,随时释放的内存分配方式.分配时机和释放时机完全由程序员决定,由于没有数据声明,这部分空间没有名字.无法像使用变量或数组那样通过变量名或数组名引用其中的数据,只能通过指针 ...