html扩展名用于保存清单文件,HTML5 manifest ApplicationCache

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

HTML5引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。 应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们

速度 - 已缓存资源加载得更快

减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

引用清单文件

...

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 的 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文件,文件 ...

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遇 ...

随机推荐

如何用easyui+JAVA 实现动态拼凑datagrid表格(续)

前面一段时间写了一篇文章: 如何用easyui+JAVA 实现动态拼凑datagrid表格 这篇文章的话,效果是可以实现,但是经过我反复试验,还是存在一些问题的. 今天这篇文章就是向大家介绍下如何避免 ...

Linux SendMail服务启动慢总结

在 CentOS release 6.6 上启动sendmail服务时发现服务启动过程非常慢,基本上要耗费3分多钟.有点纳闷:什么原因导致sendmail启动这么慢?搜索了这方面的一些资料,结合自己的 ...

[转载]DBA的特质第二部分：性格

本文转自http://www.searchdatabase.com.cn/showcontent_84382.htm 支持原创.尊重原创,分享知识! 在本系列文章中,笔者将谈一谈数据库管理员(DBA) ...

实用Javascript代码片段

清除select下拉选项,添加并选择特点选项 $('#mySelect') .find('option') .remove() .end() .append('

我的docker 使用笔记

0 容器启动 docker run image_name(镜像名称) echo "hello word" 1 启动容器 退出后 重新进入 方法一 sudo docker exec ...

php读取不到指定的php.ini配置

新建启动脚本 启动时指定路径 解决方案一:修改  /etc/init.d/php-fpm 文件 1 # 在这行命令上添加 指定的配置路径 2 php_opts="--fpm-config $ ...

windows 系统使用 git 和码云管理代码(本地已有项目)

1. 为本地项目创建本地仓 找到项目所在的根目录(目录下有解决方案那个),右击目录,点击右键菜单中的“Git Bash Here”(前提是你的电脑已经装了Git,我用的是TortoiseGit) 然后 ...

thinkphp 分页Pages

位置: Thinkphp/Library/Think/Pages 或Page pages.class.php <?php // +-------------------------------- ...

BZOJ&period;1901&period;Dynamic Rankings&lpar;树状数组套主席树&lpar;动态主席树&rpar;&rpar;

题目链接 BZOJ 洛谷 区间第k小,我们可以想到主席树.然而这是静态的,怎么支持修改? 静态的主席树是利用前缀和+差分来求解的,那么对于每个位置上的每棵树看做一个点,拿树状数组更新. 还是树状数组的 ...

GIT 如何从另一分支合并特定的文件

是否遇到过这种情景: 您在一个分支上工作,发现该分支上的某些文件实现的功能已经在其他分支上实现了 但因为这两个分支实现不同的功能,因此不能进行简单的合并工作,但您又不想重复其他已经完成的工作 以下操作 ...