web app不比PC，有性能和流量方面的考虑，离线应用越来越重要，虽然浏览器有缓存机制，但是时常不靠谱，更何况普通情况下html文件是没法缓存的，断网之后一切over。

什么是manifest?

简单来说manifest能让你的应用在无网的情况下也能访问。

它有三大优势：

1、离线浏览，无网情况下也能正常访问；

2、更快的加载速度，缓存在本地访问速度自然更快；

3、减轻服务请求压力，文件缓存后不需要再次请求，只需要请求需要更新的文件。

如何使用？

<!DOCTYPE HTML>

<html manifest="demo.appcache">

...

</html>

你需要在你想要缓存的web app的每一页中都包含 manifest 属性。如果一个页面没有 manifest属性，它将不会被缓存（除非在manifest文件中显式指定了这 个页面）。这意味着只要用户访问的页面包含manifest属性，它都将会被加入application cache中。这样，就不用在manifest文件中指定需要缓存哪些页面了。

Manifest属性可以指定一个绝对URL或是一个相对路径，但是，一个绝对URL需要和web app是同源的。一个manifest文件可以是任何扩展文件类型，但必须有正确的mime-type，比如在Apache中添加

“AddType text/cache-manifest .appcache”。

Manifest文件

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

一个完整的manifest文件：

CACHE MANIFEST

# 2012-02-21 v1.0.0

/theme.css

/logo.gif

/main.js

NETWORK:

login.asp

FALLBACK:

/html5/ /404.html
CACHE MANIFEST是必须的，#后面是注释，下面是需要cache的文件，需要相对路径，NETWORK是需要每次请求加载的文件。
可以使用星号来指示所有其他资源/文件都需要因特网连接：
NETWORK:

*
FALLBACK是如果无法建立因特网连接，则用 "404.html" 替代 /html5/ 目录中的所有文件。

更新机制
有三种方式更新manifest缓存：
1、用户清空浏览器缓存；
2、manifest文件被修改，哪怕是注释（所以可以通过修改注释来更新文件）
3、由程序来更新
缓存状态
在程序可以通过window.applicationCache属性来查看缓存状态。
var appCache = window.applicationCache;

switch (appCache.status) {

  case appCache.UNCACHED: // UNCACHED == 0

    return ‘UNCACHED’;

    break;

  case appCache.IDLE: // IDLE == 1

    return ‘IDLE’;

    break;

  case appCache.CHECKING: // CHECKING == 2

    return ‘CHECKING’;

    break;

  case appCache.DOWNLOADING: // DOWNLOADING == 3

    return ‘DOWNLOADING’;

    break;

  case appCache.UPDATEREADY:  // UPDATEREADY == 4

    return ‘UPDATEREADY’;

    break;

  case appCache.OBSOLETE: // OBSOLETE == 5

    return ‘OBSOLETE’;

    break;

  default:

    return ‘UKNOWN CACHE STATUS’;

    break;

};


为了通过编程更新cache，首先调用 applicationCache.update()。这将会试图更新用户的 cache（要求manifest文件已经改变）。最后，当 applicationCache.status 处于 UPDATEREADY 状态时， 调用applicationCache.swapCache()，旧的cache就会被置换成新的。




var appCache = window.applicationCache;

appCache.update(); // Attempt to update the user’s cache.

…

if (appCache.status == window.applicationCache.UPDATEREADY) {

  appCache.swapCache();  // The fetch was successful, swap in the new cache.

}




注意：像这样使用 update()和swapCache()并不会将更新后的资源 呈现给用户。这仅仅是让浏览器检查manifest文件是否发生了更新，然后下载指定的更新内容，重新填充app cache。因此，要让用户看到更新后的内容，需要两次页面下载，一次是更新app cache，一次是更新页面内容。


为了让用户能看到你的站点的最新版本，设置一个监听器来监听页面加载时的updateready 事件。




// 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();

        window.location.reload();

    } else {

      // Manifest didn’t changed. Nothing new to server.

    }

  }, false);

}, false);




监听事件，对不同的状态做出相应处理：




var appCache = window.applicationCache;

// Fired after the first cache of the manifest.

appCache.addEventListener(‘cached’, handleCacheEvent, false);

// Checking for an update. Always the first event fired in the sequence.

appCache.addEventListener(‘checking’, handleCacheEvent, false);

// An update was found. The browser is fetching resources.

appCache.addEventListener(‘downloading’, handleCacheEvent, false);

// The manifest returns 404 or 410, the download failed,

// or the manifest changed while the download was in progress.

appCache.addEventListener(‘error’, handleCacheError, false);

// Fired after the first download of the manifest.

appCache.addEventListener(‘noupdate’, handleCacheEvent, false);

// Fired if the manifest file returns a 404 or 410.

// This results in the application cache being deleted.

appCache.addEventListener(‘obsolete’, handleCacheEvent, false);

// Fired for each resource listed in the manifest as it is being fetched.

appCache.addEventListener(‘progress’, handleCacheEvent, false);

// Fired when the manifest resources have been newly redownloaded.

appCache.addEventListener(‘updateready’, handleCacheEvent, false);




如果manifest文件或者该文件中指定的某个资源下载失败，那么整个更新都会失败。在这种情况下，浏览器会继续试用老的application cache。


注意事项：


1. 站点离线存储的容量限制是5M
2. 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
3. 引用manifest的html必须与manifest文件同源，在同一个域下
4. 在manifest中使用的相对路径，相对参照物为manifest文件
5. CACHE MANIFEST字符串应在第一行，且必不可少
6. 系统会自动缓存引用清单文件的 HTML 文件
7. manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
8. FALLBACK中的资源必须和manifest文件同源
9. 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
10. 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
11. 当manifest文件发生改变时，资源请求本身也会触发更新


 
												


											
HTML5离线缓存Manifest的更多相关文章
	

    
						
  1. HTML5 离线缓存manifest
		
    1.简介W3C官方对manifest的介绍是HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏览 - 用户可在 ...
    
		
    2. 
								
  2. HTML5 离线缓存Appcache
		
    创建一个和html同名的manifest文件,比如页面为index.html,那么可以建一个index.manifest的文件,然后给index.html的html标签添加如下属性即可: <ht ...
    
		
    3. 
						
  3. HTML5离线缓存（Application Cache）
		
    HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源.  ...
    
		
    4. 
						
  4. HTML5离线缓存问题
		
    HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. ...
    
		
    5. 
						
  5. html5离线缓存使用
		
    html5 离线缓存使用以及注意事项 1.index.html中加入离线缓存的声明文件 如:<!DOCTYPE html><html manifest="test.appc ...
    
		
    6. 
						
  6. node.js与HTML5离线缓存
		
    最近正学到HTML5的离线缓存,却看到需要配置服务器.一下子就懵了,毕竟服务器的有关配置一般是很复杂的,而node.js的服务器是自己的代码生成的,这下要怎么配置?在网上搜索了很久,都没用关于node ...
    
		
    7. 
						
  7. HTML5离线缓存攻击测试
		
    本实验采用局域网模拟,通过修改本地HOSTS文件来模拟域名以及DNS欺骗.合法网站使用Linux CentOS7的apache服务器搭建,IP为192.168.1.113,HOSTS文件中加入192. ...
    
		
    8. 
						
  8. HTML5 离线缓存管理库
		
    一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...
    
		
    9. 
						
  9. 记离线缓存(manifest)一大坑，断定其只适用于静态网站或离线应用
		
    今天看了离线缓存(manifest)方面的资料,兴冲冲地就想给自己的网站用上.待我把代码都写好部署上服务器,并测试过OK的时候,在SegmentFault刷了一把manifest方面的问答,才发现这个 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. [转]使用Cadence ADE + Spectre做Montel Carlo仿真
			
    1. 工艺模型的选择.以TSMC 180nm工艺为例,1.8V Normal devices 有TT,SS,FF,SF,FS共5种工艺Corner及Montel Carlo(MC)共6种可选用工艺角. ...
    
			
    2. 
						
  2. Android开发艺术探索笔记——View(二)
			
    Android开发艺术探索笔记--View(二) View的事件分发机制 学习资料: 1.Understanding Android Input Touch Events System Framewo ...
    
			
    3. 
						
  3. NSString Byte NSData 字节（字符）字符串
			
    NSUTF8StringEncoding 3个字节(字符)一个中文字符 一个字节一个英文字符
    
			
    4. 
						
  4. ruby 中文字符to_json后乱码（unicode）
			
    今天遇到一个中文to_json问题 text = "第1章 青豆 不要被外表骗了" text.to_json => "\"\\u7b2c1\\u7ae0  ...
    
			
    5. 
						
  5. CSS3 垂直居中 左右居中
			
    display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: c ...
    
			
    6. 
						
  6. label标签跳出循环
			
    出场: 首先我们来说说为什么需要label标签,虽然我们已经知道有break,continue跳出循环,但如果是多重循环那么它们就显的无能为力了,所以就出现了label这个标签来为我们服务. 我们先来 ...
    
			
    7. 
						
  7. php -- php读取sqlserver2005的数据实现分页查询
			
    --php5.2 --sqlserver2005 php读取sqlserver多条数据时,有时因为数据太多,需要进行分页查询. 例如,按价格的顺序,读取同一类型的产品的第30到第48条记录 $star ...
    
			
    8. 
						
  8. 关于MySQL的Admin Ping Command
			
    前言: 最近在线上诊断QPS飙升的过程中深入进行了下Admin Ping Command的测试.此外,再一些国外文章中最近也读到了一些相关知识,所以写成一篇博文做一下总结. 1. 关于Admin Pi ...
    
			
    9. 
						
  9. 【转载】让windows使用linux系统的命令
			
    转载自:http://blog.chinaunix.net/uid-28336510-id-3824903.html 1.下载GnuWin32,GnuWin32的安装文件(GetGnuWin32-0. ...
    
			
    10. 
						
  10. 谷歌联合 Adobe 发布 Noto 字体【免费下载】
			
    Noto 涵盖了世界上所有主要语言,包括欧洲,非洲,中东,印度语,南亚和东南亚,中亚,美洲和东亚语言.也支持几个少数民族和历史语言.不久前,还发布了针对文.日文.韩文的开源字体——Noto Sans  ...
    
			
    11.