HTML5 manifest ApplicationCache
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。
HTML5引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。 应用程序缓存为应用带来三个优势：
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
引用清单文件
<html manifest="manifest.appcache">
...
</html>
manifest属性可指向绝对网址或相对路径，但绝对网址必须与相应的网络应用同源。清单文件可使用任何文件扩展名，但必须以正确的 MIME 类型提供text/cache-manifest。
清单文件结构
CACHE MANIFEST
# update on：2016-06-15 23:22:23 v2
# Explicitly cached 'master entries'.
CACHE:
/favicon.ico
stylesheet.css
images/logo.png
scripts/main.js
# Resources that require the user to be online.
NETWORK:
*
http://api.twitter.com
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
images/large/ images/offline.jpg
*.html /offline.html
以“#”开头的行是注释行。
CACHE MANIFEST字符串应在第一行，且必不可少。
CACHE：这是条目的默认部分。系统会在首次下载此标头下列出的文件（或紧跟在
CACHE MANIFEST后的文件）后显式缓存这些文件。
NETWORK：此部分下列出的文件是需要连接到服务器的白名单资源。无论用户是否处于离线状态，对这些资源的所有请求都会绕过缓存。可使用通配符(*)。
FALLBACK：此部分是可选的，用于指定无法访问资源时的后备网页。其中第一个 URI 代表资源，第二个代表后备网页。两个 URI 必须相关，并且必须与清单文件同源。可使用通配符。
请注意：这些部分可按任意顺序排列，且每个部分均可在同一清单中重复出现。
更新缓存
用户清除了浏览器对您网站的数据存储。
清单文件经过修改。请注意：更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改。
应用缓存通过编程方式进行更新。
var appCache = window.applicationCache;//浏览器的应用缓存对象
appCache.update(); // Attempt to update the user's cache.
switch (appCache.status) {//缓存的当前状态
case appCache.UNCACHED: // UNCACHED == 0
console.log('UNCACHED');;
break;
case appCache.IDLE: // IDLE == 1
console.log('IDLE');
break;
case appCache.CHECKING: // CHECKING == 2
console.log('CHECKING');
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
console.log('DOWNLOADING');
break;
case appCache.UPDATEREADY: // UPDATEREADY == 4
console.log('UPDATEREADY');
appCache.swapCache(); // The fetch was successful, swap in the new cache.
break;
case appCache.OBSOLETE: // OBSOLETE == 5
console.log('OBSOLETE');
break;
default:
console.log('UKNOWN CACHE STATUS');
break;
};
// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
// Swap it in and reload the page to get the new hotness.
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false);
}, false);
/*缓存公用方法*/
var EventUtil = {
addHandler: function(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
};
EventUtil.addHandler(applicationCache, "updateready", function() { //缓存更新并已下载，要在下次进入页面生效
applicationCache.update(); //检查缓存manifest文件是否更新，ps:页面加载默认检查一次。
applicationCache.swapCache(); //交换到新的缓存项中，交换了要下次进入页面才生效
location.reload(); //重新载入页面
});
注意事项
- 站点离线存储的容量限制是5M
- 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
- 引用manifest的html必须与manifest文件同源，在同一个域下
- 在manifest中使用的相对路径，相对参照物为manifest文件
- CACHE MANIFEST字符串应在第一行，且必不可少
- 系统会自动缓存引用清单文件的 HTML 文件
- manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
- FALLBACK中的资源必须和manifest文件同源
- 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
- 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
- 当manifest文件发生改变时，资源请求本身也会触发更新
HTML5 manifest ApplicationCache的更多相关文章
- HTML5 的 applicationCache 应用程序缓存离线存储功能与 manifest 文件
一. 实现 HTML5 applicationCache 的步骤 一般的操作步骤 1. 新建 manifest 文件 如文件名为 lzwme.manifest,内容配置参考如下: 01 CACHE ...
- HTML5 manifest离线缓存
一.基本概念 离线缓存是HTML5新引入的技术,能够让你的Web应用程序指定哪些文件可以缓存在本地,使得你的网络断开时依然可以通过本地的缓存来进行访问浏览. 二.使用方法 1. MIME type 声 ...
- HTML5 manifest离线缓存技术
干什么用的? 离线缓存为的是第一次请求后,根据manifest文件进行本地缓存,并且在下一次请求后进行展示(若有缓存的话,无需再次进行请求而是直接调用缓存),最根本的感觉是它使得WEB从online可 ...
- HTML5使用ApplicationCache
在html5中使用application cache可以把一些静态资源保存在客户端的浏览器上面.这样可以提高访问的速度,甚至是离线应用.关于application cache的优缺点:1.离线浏览 - ...
- html5 manifest 离线缓存知识点
1.最大缓存容量为 5M. 2.manifest文件需要配置正确的MIME-type,即“text/cache-manifest”,这个是在web服务器上进行配置. ②编写.manifest文件,文件 ...
- HTML 5 应用程序缓存（Application Cache）cache manifest 文件使用 html5 中创建manifest缓存以及更新方法 一个manifest文件会创建一份缓存，不同的manifest文件其缓存的内容是互不干扰的
HTML5 离线缓存-manifest简介 HTML 5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(A ...
- html5本次存储几种方式
一.cookies 大家都懂的,不必多说 二.sessionStorage/localStorage HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML ...
- Manifesto – HTML5 离线应用程序缓存校验工具
Manifesto 是一个 HTML5 离线应用程序缓存校验工具,提供了快速校验 HTML5 manifest 文件有效性的方法.离线应用程序缓存在使用中最困难的部分之一就是无法正常工作的时候没有明显 ...
- AppCache 离线存储 应用程序缓存 API 及注意事项
使用ApplicationCache接口实现离线缓存 原文:http://www.mb5u.com/HTML5/html5_96464.html 推荐:html5 application cache遇 ...
随机推荐
- 想了解JAVA的，看看（转载）
较新一篇 / 较旧一篇 编辑 |删除 | 复制链接 公开 想了解JAVA的,看看(转载)2009-03-01 15:41 (分类:默认分类) 先总结一下: J2SE (Core/Desktop) ...
- c#基础--常量(const),只读字段(readonly)
1.0:常量 常量被关键字const 所修饰 我们来看看常量的demo class Program { static void Main(string[] args) { const string n ...
- excel 批量替换换行符
在excel批量替换换行符操作步骤: 全选需要查找换行符的范围 CTRL+H调出查找和替换 在查找内容内输入"ctrl+enter"两个组合键 点击查找全部即可. 在excel中输 ...
- EF——一个实体对应两张表，两个实体对应一张表 06 （转）
本篇日记我们将详细探讨如何将表现领域的类映射到现有的数据库.现在的经济形势不是太好,很多公司都取消了开发新系统的预算.在这种情况下,通常的做法是把原有的几个系统修改一下做个集成,先凑合用着得了.如果要 ...
- Android进阶笔记18：选用合适的IPC方式
1. 相信大家都知道Android进程间通信方式很多,比如AIDL.Messenger等等,接下来我就总结一下这些IPC方式优缺点. 2. IPC方式的优缺点和适用场景 3. 附加:使用Intent实 ...
- 正试图在 os 加载程序锁内执行托管代码。不要尝试在 DllMain 或映像初始化函数内运行托管代码
来自:http://www.cnblogs.com/lcxu2/archive/2011/01/16/2004016.html 正试图在 os 加载程序锁内执行托管代码.不要尝试在 DllMain 或 ...
- Javascript函数（定义、传值、重载）
Javascript 函数的定义的方式有不止一种. 第一种方式: function fn1(){ alert(typeof fn1); alert(“fn1”); } 在调用的时候直接就可以fu1() ...
- React Native开发环境搭建
安装Xcode 安装Homebrew 安装Android SDK 安装flow和watchman 安装nodejs 安装react-native-cli 安装Genymotion 安装Webstorm ...
- AIX学习笔记（更新中）
AIX操作系统基本命令 系统的进入和退出login: 输入用户名(例如:user01)password: 输入用户口令若用户名及口令均正确,则用户将登陆成功.此时系统会出现命令提示符 $或#,即表示可 ...
- OS X 10.10 apache配置
配置内容转自:http://www.linuxidc.com/Linux/2015-04/116347.htm 一.apache的配置 apache已经自带了,只需如下三个命令就可以了. 开启apac ...