Javascript本地储存(3):离线web应用
2013-03-30 13:03 Barret李靖 阅读(1798) 评论(0) 编辑 收藏 举报前两篇文章分别介绍了Cookie应用和另一种本地储存方式,无论是cookie、userData还是localStorage都是一段保存在客户端磁盘的一段文本,他们可以被主动删除,但是本文要讲的“应用程序缓存”是HTML5中新增的一个技术,他允许web应用将应用程序自身本地保存到用户的浏览器中,他是不会随着用户清楚浏览器缓存而被清除的。
不像localStorage和sessionS只是保存web应用程序相关的数据,他是将应用程序本身保存起来——应用程序所需运行的所有文件(HTML、CSS、JavaScript、图片等)。——《Javascript权威指南(第六版)》Page-594
“应用程序缓存”真正意义上不是“”缓存,更好的说法应该称之为“应用程序存储”。
Introduction [简单介绍]
通过在应用程序主HTML页面的<html>标签中设置manifest属性,只想到清单文件就行了。这里的清单文件就是,将要缓存的文件列表。
<!DOCTYPE HTML> <html manifest="myapp.appcache"> <head>...</head> <body>...</body> </html>
清单文件格式也是有要求的,他的杭寿必须以“CACHE MANIFEST”字符串开始,其余就是要缓存的文件URL列表,一行一个URL。
CACHE MANIFEST #上一行表示此文件是一个清单文件。本行为注释 #下面的内容都是应用程序依赖的资源文件的URL myapp.html myapp.js myapp.css images/backgorund.png
有人可能会问了:那清单文件一定要以appcache作为未见的扩展名么?
答案是否定的,web服务器真正识别清单文件的方式是通过"text/cache-manifest"这个MIME类型的一个清单。如果服务器将清单文件的Content-Type的头信息设置成其他MIME类型,那就不会缓存应用程序了,因此,肯呢过需要对web服务器做一定的配置来使用这个MIME类型,比如在web应用目录下创建Apache服务器的一个.htaccess文件。
More [更多介绍]
1.复杂的清单
先给个清单:
CACHE MANIFEST CACHE: myapp.html myapp.css myapp.js FALLBACK video/ offline_help.html NETWORK: cgi/
"CACHE"应该是不用细说了。
"NETWORK": 标识了该URL中的资源从不缓存,总要通过网络获取。
"FALLBACK":区域中的清单项每行都包含两个URL,第二个URL是指需要加载和存储在缓存中的资源,第一个URL是一个前缀。任何能够匹配到这个前缀的URL都不会缓存起来,但是可能的haunted,他们会从网络中载入。如果从网络中载入这样一个URL失败的话,就会使用第二个URL指定的缓存资源来代替,从缓存中获取。
想想一个web应用包含一定数量的视频教程,这些视频都很大,显然把他们缓存在本地是不合适的,因为,在离线状态心爱,通过清单文件中的fallback区域,就可以使用一些急于文本的帮助文件来代替了。
2.缓存的更新
CACHE MANIFEST # MyApp version 1 (更改这个数九就可以让浏览器重新下载这个文件) Myapp.html Myapp.js
浏览器在检查清单文件以及更新缓存的操作是异步的,可能是在从缓存中载入应用之前,也可能同时进行。
浏览器在更新缓存过程中会触发一系列事件,可以通过注册处理程序来跟踪这个过程同时提供反馈给用户。如下:
applicationCache.onupdateready = function(){ var reload = confirm("发现一个新版本,需要刷新页面,点击确定刷新。"); if(reload) locatiuon.reload(); }
注:只有支持应用程序缓存的浏览器才会有applicationCache属性,当然除了上面例子的updateready时间之外,还有其他7中应用程序缓存时间可以监控。
var appCache = window.applicationCache; function logEvent(e) { console.log(e); } function logError(e) { console.log(“error ” + e); }; appCache.addEventListener(‘cached’, logEvent, false); appCache.addEventListener(‘checking’, logEvent, false); appCache.addEventListener(‘downloading’, logEvent, false); appCache.addEventListener(‘error’, logError, false); appCache.addEventListener(‘noupdate’, logEvent, false); appCache.addEventListener(‘obsolete’, logEvent, false); appCache.addEventListener(‘progress’, logEvent, false); appCache.addEventListener(‘updateready’, logEvent, false);
Related blog [相关博文]
JavaScript本地储存(2):userData和localStorage
Reference [参考资料]
1.《JavaScript权威指南(第六版)》—— 淘宝团队翻译 当当
2. other
版权声明: 署名-非商业性使用-禁止演绎 3.0 国际(CC BY-NC-ND 3.0)