关闭

HTML5 使用application cache 接口实现离线数据缓存

标签: html5applicationcache离线manifest
22724人阅读 评论(5) 收藏 举报
分类:

1.配置缓存文件 cache manifest

MIME TYPE:text/cache-manifest
文件名称:name.appcache
作用:用于配置需要缓存的文件

2.使用方法

在服务器上添加MIME TYPE
在apache virtual host 中添加
AddType text/cache-manifest .appcache
创建 name.manifest,文件后缀可自定义,定义后需要在服务器上添加对应的MIME TYPE
CACHE MANIFEST

#VERSION 1.0

CACHE:
index.html
./js/jquery.js
./css/style.css

NETWORK:
./upload/

FAILBACK:
./proxy/ proxy.html

CACHE MANIFEST:文件标识
#VERSION 1.0 :版本号,只是一行注释,但改变可以更新缓存
CACHE:表示要缓存的文件
NETWORK:表示需要连接服务器的文件
FAILBACK:表示当没有响应时的替代方案


<html>标签添加manifest属性

<html manifest="name.appcache">

3.更新方法

1.自动更新:浏览器在第一次访问时访问应用缓存,之后只会在cache manifest文件发生变化时更新缓存(即使注释变化也会更新,#VERSION 1.0的作用),而cache manifest中的资源文件发生变化则不会触发更新。

2.手动更新:以编程方法更新缓存,先调用applicationCache.update(),此操作尝试更新用户的缓存(前提是cache manifest文件有更改)。然后当applicationCache.status为UPDATEREADY状态时,调用applicationCache.swapCache()即可将原缓存换成新缓存。

代码如下:

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() 不会向用户提供更新的资源,只会让浏览器检查是否有新的cache manifest清单,下载指定的更新内容及重新填充应用缓存。因此需要两次加载才能向用户提供新内容。第一次是获得新的应用缓存,第二次是刷新网页内容。

避免重新加载两次的麻烦,可以设置监听器,监听网页加载时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();
			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);

4.在线状态检测和监视

检测:navigator.onLine 属性表示当前是否在线,如果为 true,表示在线。如果为 false, 表示离线。
监视:当在线/离线状态切换时,会触发online/offline事件,这两个事件触发在body元素上,并且沿着document.body,document 和 window的顺序冒泡。

5.测试

chromw 浏览器的自带测试工具,console会显示缓存的情况
Document was loaded from Application Cache with manifest http://localhost/fdipzone/test.appcache main.html:31
Application Cache Checking event main.html:31
Application Cache Downloading event main.html:31
Application Cache Progress event (0 of 1) http://localhost/fdipzone/main.html main.html:31
Application Cache Progress event (1 of 1)  main.html:31
Application Cache UpdateReady event 

6.注意事项

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文件发生改变时,资源请求本身也会触发更新

1
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

HTML5系列之——applicationCache对象

HTML5离线功能应用
  • laijieyao
  • laijieyao
  • 2014-11-11 17:51
  • 4851

HTML5 AppCache机制分析

随着移动互联网越来越普及,
  • liqinghua1653
  • liqinghua1653
  • 2014-06-16 18:25
  • 12342

HTML5 Application Cache

1、应用场景 离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制,但它们并不可靠,也不一定总能起到预期的作用。HTML5 使用ApplicationCache 接口解决了由离线带来的...
  • fwwdn
  • fwwdn
  • 2012-10-17 17:59
  • 15465

cache策略实现的原理(200、304返回码含义)

什么是cache?定义:浏览器缓存(Browser Caching)是为了加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以...
  • dinglang_2009
  • dinglang_2009
  • 2014-07-26 12:37
  • 4874

网页缓存Js,css以及图片导致页面刷新无效果的三种解决办法

转自:http://www.phpernote.com/seo/197.html
  • chelen_jak
  • chelen_jak
  • 2014-11-14 16:36
  • 9835

HTML5系列之——applicationCache对象

HTML5离线功能应用
  • laijieyao
  • laijieyao
  • 2014-11-11 17:51
  • 4851

node.js与HTML5离线缓存(1)

最近正学到HTML5的离线缓存,却看到需要配置服务器。一下子就懵了,毕竟服务器的有关配置一般是很复杂的,而node.js的服务器是自己的代码生成的,这下要怎么配置?在网上搜索了很久,都没用关于node...
  • wbr306408943
  • wbr306408943
  • 2016-02-22 01:18
  • 1262

HTML5离线存储原理及实现

前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。 HTML5引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没...
  • dj0379
  • dj0379
  • 2016-11-26 13:14
  • 3809

HTML5离线缓存(Application_Cache)

点击打开链接 HTML5离线缓存(Application Cache) shy丶gril 2016-05-20 14:06:12 浏览321 评论0 Cache appl...
  • bystarlight
  • bystarlight
  • 2017-05-05 12:27
  • 211

Html5 离线应用缓存application Cache

HTML5的离线web应用允许我们在脱机时与网站进行交互。这在提高网站的访问速度和制作一款web离线应用上(如HTML5游戏)有一定的用处。  一、什么是离线Web应程序?为什么要开发离线的Web应...
  • Molly_Xu
  • Molly_Xu
  • 2016-04-13 22:00
  • 557
    微博
    微信公众号
    微信分享公众平台-破晓领域
    破晓领域
    微信号:fdipzone-idea
    名称:破晓领域

    个人资料
    • 访问:7711108次
    • 积分:46000
    • 等级:
    • 排名:第78名
    • 原创:295篇
    • 转载:24篇
    • 译文:0篇
    • 评论:508条
    博客专栏
    最新评论