虫虫 HTML5::初学者使用 Application Cache 指南
对于web app来说,离线应用功能已经越来越重要。诚然,浏览器本身就有缓存机制,但是,这些缓存机制不够可靠,可能并不会按你所想要的方式运行。HTML5 则通过 Application Cache 接口处理了离线应用中的一些问题。
使用这个接口让你的应用拥有三方面的优势:
- 离线浏览——用户在不能联网的时候依然能浏览整个站点
- 高速——缓存资源是存储在本地的,因此能更快加载。
- 更小的服务器负载——浏览器只需要从服务器端下载有改变的资源即可,相同资源不需要重复下载。
Application Cache(或 AppCache)让一个开发者可以指定浏览器需要保存哪个文件。当用户在离线情况下时,即使他们按了刷新按钮,你的应用也能正确加载和工作。
CACHE MANIFEST 文件
cache manifest文件是一个简单的文本文件,其中列出了浏览器需要缓存的资源。
引用一个MANIFEST文件
为了让一个应用能启用application cache,需要在文档的html标签中包含manifest属性,如下所示:
<html manifest=”example.appcache”>…</html>
你需要在你想要缓存的web app的每一页中都包含 manifest 属性。如果一个页面没有 manifest属性,它将不会被缓存(除非在manifest文件中显式指定了这 个页面)。这意味着只要用户访问的页面包含manifest属性,它都将会被加入application cache中。这样,就不用在manifest文件中指定需要缓存哪些页面了。
Manifest属性可以指定一个绝对URL或是一个相对路径,但是,一个绝对URL需要和web app是同源的。一个manifest文件可以是任何扩展文件类型,但必须有正确的mime-type。如下所示:
<html manifest=”http://www.example.com/example.mf”>…</html>
一个manifest文件需要正确的mime-type,即text/cache-manifest。你可以在你的web服务器中加入一个定制文件类型(a custom file type),或者加入一个 .htaccess 配置。
例如,为了在Apache中能够解析这种mime-type,可以在你的配置文件中加入如下代码:
AddType text/cache-manifest .appcache
或者,如果你的应用是在Google App Engine中,那么在app.yaml文件中加入代码:
- url: /mystaticdir/(.*\.appcache)
static_files: mystaticdir/\1
mime_type: text/cache-manifest
upload: mystaticdir/(.*\.appcache)
MANIFEST FILE的结构
一个简单的manifest文件看起来可能是下面这样的:
CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
这个示例将会缓存指定使用这个manifest的页面中的四个文件。
有几点是需要注意的:
- 必须在第一行包括 CACHE MANIFEST 字符串。
- 站点所能缓存的数据上限是5MB 。但是,如果你是在为Chrome Web Store做开发的话,你可以使用unlimitedStorage 来去除这个限制。
- 如果manifest文件或者是其中指定的某个资源下载失败的话,整个cache的更新都会失败。在这种情况下,浏览器将会使用老的application cache。
下面来看一个更复杂的例子:
CACHE MANIFEST
# 2010-06-18:v2
# Explicitly cached ‘master entries’.
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js
# Resources that require the user to be online.
NETWORK:
login.php
/myapi
http://api.twitter.com
# static.html will be served if main.py is inaccessible
# 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:
/main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html
以“#”开头的都是注释,这些注释还可以起到另外的作用。一个应用只有在manifest文件发生变化时才会更新 cache。例如,如果你编辑了图像或是改写了一个Javascript函数,cache并不会发生更新。你必须改写manifest文件本身来通知浏览 器需要更新cache文件了。通过在manifest文件中添加一行注释,在其中写上版本号,或者文件hash值,或者时间戳,你都可以确保用户拥有你的 软件的最新版本。如果有新版本出现,你同样可以以编程的方式更新cache,就跟在Updating the cache 中所讨论的那样。
一个manifest文件可能包括三个部分:CACHE, NETWORK 以及 FALLBACK.
CACHE:
这是默认部分,列在这个条目下的文件(或者紧跟在CACHE MANIFEST字符串之后的)都会在第一次被下载后进入cache。
NETWORK:
这一部分中所列出的资源都是需要联网使用的资源。它们都不会进入cache中,即使用户处于离线状态。这部分可能会使用Wildcards。
FALLBACK:
可选部分,指定了如果资源获取失败,将会呈现怎样的页面。第一个URL是资源,第二个就是fallback页面。两个URL都必须是相对地址,并且由同一个manifest文件指定。可以使用Wildcards。
注意:这三部分可以以任何顺序在manifest文件中出现,并且每部分都可以在一个manifest文件中出现多次。
下面的manifest文件定义了一个“catch-all”页面(offline.html),这个页面将会在用户试图离线访问网站根节点时显示。它还指明了需要联网使用的其他资源(如远程站点上的资源)。
CACHE MANIFEST
# 2010-06-18:v3
# Explicitly cached entries
index.html
css/style.css
# offline.html will be displayed if the user is offline
FALLBACK:
/ /offline.html
# All other resources (e.g. sites) require the user to be online.
NETWORK:
*
# Additional resources to cache
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png
注意:引用了你的manifest文件的HTML文件都会自动被缓存,因此,没有必要在你的manifest文件中再指定这个文件,但是,在manifest文件中指定这个文件是一种更好的做法。
注意:页面上基于SSL的HTTP cache headers以及caching restrictions都会被cache manifests重写。因此,基于https的页面也能离线工作。
更新缓存(CACHE)
如果一个应用是在离线情况下,那么它会保持它的缓存状态,除非有以下事件发生:
- 用户清除了浏览器中存储有你的站点的数据。
- manifest file 被修改了。注意:修改了在manifest文件中列出的某个文件并不会让浏览器重新缓存资源。必须是manifest文件本身改变了,才会重新进行缓存。
- app cache通过编程更新了。
缓存状态CACHE STATUS
在程序中,你可以通过window.applicationCache 对象来访问浏览器的app cache。你可以查看 status 属性来获取cache的当前状态:
var appCache = window.applicationCache;switch (appCache.status) {case appCache.UNCACHED: // UNCACHED == 0return ‘UNCACHED’;break;case appCache.IDLE: // IDLE == 1return ‘IDLE’;break;case appCache.CHECKING: // CHECKING == 2return ‘CHECKING’;break;case appCache.DOWNLOADING: // DOWNLOADING == 3return ‘DOWNLOADING’;break;case appCache.UPDATEREADY: // UPDATEREADY == 4return ‘UPDATEREADY’;break;case appCache.OBSOLETE: // OBSOLETE == 5return ‘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();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);
APPCACHE事件(APPCACHE EVENTS)
也许你已经想到了,还有更多事件可以反映出cache的状态。在诸如下载、app cache更新、出现错误等事件都会让浏览器触发相应事件。下面的代码片段为每一类cache event都设置了监听器:
function handleCacheEvent(e) {//…}function handleCacheError(e) {alert(‘Error: Cache failed to update!’);};// 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。
原文链接:http://www.webapptrend.com/2012/03/2103.html
虫虫 HTML5::初学者使用 Application Cache 指南相关推荐
- html5调用手机中的application,HTML5中的Application Cache概念
HTML5中的Application Cache概念 我们知道缓存技术对于提高我们的应用程序性能有着非常重要的作用,主流的编程语言基本上都有相应的缓存技术比如 Applic览或讲琐了过自系一读页围这就 ...
- 为提高访问速度建立本地文件服务器,html5 Application Cache——加快简历二次访问速度...
上篇博客(在github上写个人简历--最简单却又不容易的内容罗列)介绍了我在github上放的一个个人在线简历,有朋友看了后告诉我一个很大缺陷,使用github挺慢的,每次看的时候都很慢,第一反应这 ...
- HTML5应用程序缓存Application Cache
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
- html5 application cache 空间限制,HTML5离线存储之Application Cache
关于html5的离线存储,大致可分为: localStorage, sessionStorage indexedDB web sql application cache 可以在chrome的debug ...
- HTML5 - 应用程序缓存(Application Cache)
为什么要使用Application Cache技术? 在HTML5之前,我们需要接入网络才能访问,这毫无疑问是网站多次请求服务器,造成速度变慢,对于PC用户,网络相对比较稳定,载入速度也不会差太多.但 ...
- HTML5 应用程序缓存 离线浏览【Application Cache】轻松地创建 web 应用的离线版本。
HTML5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(Application Cache)? HTML ...
- 精选案例 | “虫虫音乐”如何做到搜索CTR提高150%
简介:简介: 本文通过[虫虫音乐]在阿里云开放搜索的最佳实践,和大家介绍影音行业如何快速实现高质量的搜索服务助力业务更好发展! 公司背景 虫虫音乐是一家版权乐谱分发平台,致力于专业打造音乐教育和乐谱版 ...
- 完美使用application cache几点心得
web app最大的硬伤是页面渲染与交互性能问题,页面渲染与加载静态文件的快慢有关.如何快速加载它们?我们可以用html5的新特性application cache(非官方简称:appCache)来缓 ...
- python入门必备指南-致Python初学者 Anaconda入门使用指南完整版
打算学习 Python 来做数据分析的你,是不是在开始时就遇到各种麻烦呢? 到底该装 Python2 呢还是 Python3 ? 为什么安装 Python 时总是出错? 怎么安装工具包呢? 为什么提示 ...
- python编程入门指南 代码库在哪下-致Python初学者 Anaconda入门使用指南完整版
打算学习 Python 来做数据分析的你,是不是在开始时就遇到各种麻烦呢? 到底该装 Python2 呢还是 Python3 ? 为什么安装 Python 时总是出错? 怎么安装工具包呢? 为什么提示 ...
最新文章
- Service Worker ——这应该是一个挺全面的整理
- golang interface 类型转换_无符号Golang程序逆向方法解析
- JqueryMobile- 搭建主模板
- Google Chrome 53 Beta 引入影子 DOM V1
- 【POJ - 2392】Space Elevator (dp,优秀的背包问题)
- Android 蓝牙技术 实现终端间数据传输
- 英特尔将推Nervana神经网络处理器,要让DL训练提速100倍
- vue-router 懒加载优化
- Storm实验 -- 单词计数2
- 数字化转型案例:美的集团
- 尚硅谷JavaWeb视频教程,新版升级
- 图像识别距离算法matlab
- Android4太极,Android 绘制太极图实例详解
- 论文阅读:Permutation Matters: Anisotropic Convolutional Layer for Learning on Point Clouds
- linux 播放m4a 文件,M4A是什么文件?如何提取M4A音频?
- Unity Rigidbody.AddForce 的 ForceMode
- U-Boot中支持USB
- 【原理篇】qBittorrent下载+转种Transmission快校版+IYUU Plus辅种教程
- 计算机网络安全属性不包括哪些,计算机安全的属性不包括什么
- 什么样的教育是真正有意义的?---范美忠