对于web app来说，离线应用功能已经越来越重要。诚然，浏览器本身就有缓存机制，但是，这些缓存机制不够可靠，可能并不会按你所想要的方式运行。HTML5 则通过 Application Cache 接口处理了离线应用中的一些问题。
使用这个接口让你的应用拥有三方面的优势：
离线浏览——用户在不能联网的时候依然能浏览整个站点
高速——缓存资源是存储在本地的，因此能更快加载。
更小的服务器负载——浏览器只需要从服务器端下载有改变的资源即可，相同资源不需要重复下载。
Application Cache(或 AppCache)让一个开发者可以指定浏览器需要保存哪个文件。当用户在离线情况下时，即使他们按了刷新按钮，你的应用也能正确加载和工作。
CACHE MANIFEST 文件
cache manifest文件是一个简单的文本文件，其中列出了浏览器需要缓存的资源。
引用一个MANIFEST文件
为了让一个应用能启用application cache，需要在文档的html标签中包含manifest属性，如下所示：
1<html manifest="example.appache" >
2
3 …
4
5</html>
你需要在你想要缓存的web app的每一页中都包含 manifest 属性。如果一个页面没有 manifest属性，它将不会被缓存(除非在manifest文件中显式指定了这 个页面)。这意味着只要用户访问的页面包含manifest属性，它都将会被加入application cache中。这样，就不用在manifest文件中指定需要缓存哪些页面了。
一个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的当前状态：
01var appCache = window.applicationCache;
02
03switch (appCache.status) {
04
05 case appCache.UNCACHED: // UNCACHED == 0
06
07 return ‘UNCACHED’;
08
09 break;
10
11 case appCache.IDLE: // IDLE == 1
12
13 return ‘IDLE’;
14
15 break;
16
17 case appCache.CHECKING: // CHECKING == 2
18
19 return ‘CHECKING’;
20
21 break;
22
23 case appCache.DOWNLOADING: // DOWNLOADING == 3
24
25 return ‘DOWNLOADING’;
26
27 break;
28
29 case appCache.UPDATEREADY: // UPDATEREADY == 4
30
31 return ‘UPDATEREADY’;
32
33 break;
34
35 case appCache.OBSOLETE: // OBSOLETE == 5
36
37 return ‘OBSOLETE’;
38
39 break;
40
41 default:
42
43 return ‘UKNOWN CACHE STATUS’;
44
45 break;
46
47};
为了通过编程更新cache，首先调用 applicationCache.update()。这将会试图更新用户的 cache(要求manifest文件已经改变)。最后，当 applicationCache.status 处于 UPDATEREADY 状态时， 调用applicationCache.swapCache()，旧的cache就会被置换成新的。
01var appCache = window.applicationCache;
02
03appCache.update(); // Attempt to update the user’s cache.
04
05…
06
07if (appCache.status == window.applicationCache.UPDATEREADY) {
08
09 appCache.swapCache(); // The fetch was successful, swap in the new cache.
10
11}
注意：像这样使用 update()和swapCache()并不会将更新后的资源 呈现给用户。这仅仅是让浏览器检查manifest文件是否发生了更新，然后下载指定的更新内容，重新填充app cache。因此，要让用户看到更新后的内容，需要两次页面下载，一次是更新app cache，一次是更新页面内容。
好消息是，你可以避免两次页面下载带来的麻烦。为了让用户能看到你的站点的最新版本，设置一个监听器来监听页面加载时的updateready 事件。
01// Check if a new cache is available on page load.
02
03window.addEventListener(‘load’, function(e) {
04
05 window.applicationCache.addEventListener(‘updateready’, function(e) {
06
07 if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
08
09 // Browser downloaded a new app cache.
10
11 // Swap it in and reload the page to get the new hotness.
12
13 window.applicationCache.swapCache();
14
15 if (confirm(‘A new version of this site is available. Load it?’)) {
16
17 window.location.reload();
18
19 }
20
21 } else {
22
23 // Manifest didn’t changed. Nothing new to server.
24
25 }
26
27 }, false);
28
29}, false);
APPCACHE事件(APPCACHE EVENTS)
也许你已经想到了，还有更多事件可以反映出cache的状态。在诸如下载、app cache更新、出现错误等事件都会让浏览器触发相应事件。下面的代码片段为每一类cache event都设置了监听器：
01function handleCacheEvent(e) {
02
03 //…
04
05}
06
07function handleCacheError(e) {
08
09 alert(‘Error: Cache failed to update!’);
10
11};
12
13// Fired after the first cache of the manifest.
14
15appCache.addEventListener(‘cached’, handleCacheEvent, false);
16
17// Checking for an update. Always the first event fired in the sequence.
18
19appCache.addEventListener(‘checking’, handleCacheEvent, false);
20
21// An update was found. The browser is fetching resources.
22
23appCache.addEventListener(‘downloading’, handleCacheEvent, false);
24
25// The manifest returns 404 or 410, the download failed,
26
27// or the manifest changed while the download was in progress.
28
29appCache.addEventListener(‘error’, handleCacheError, false);
30
31// Fired after the first download of the manifest.
32
33appCache.addEventListener(‘noupdate’, handleCacheEvent, false);
34
35// Fired if the manifest file returns a 404 or 410.
36
37// This results in the application cache being deleted.
38
39appCache.addEventListener(‘obsolete’, handleCacheEvent, false);
40
41// Fired for each resource listed in the manifest as it is being fetched.
42
43appCache.addEventListener(‘progress’, handleCacheEvent, false);
44
45// Fired when the manifest resources have been newly redownloaded.
46
47appCache.addEventListener(‘updateready’, handleCacheEvent, false);
如果manifest文件或者该文件中指定的某个资源下载失败，那么整个更新都会失败。在这种情况下，浏览器会继续试用老的application cache。
相关推荐
为了提升用户体验，尤其是离线使用时，Firefox OS 提供了 App Cache（应用程序缓存）功能。本篇文章将深入探讨 App Cache 的概念及其在 Firefox OS 应用开发中的应用。 **一、Web App 缓存简介** Web App 缓存是 ...
3. **APP Web技术**：由于是模仿移动端APP，这个项目可能结合了HTML5的离线存储（如Web Storage或IndexedDB）、Service Worker以及App Cache等技术，实现离线浏览和后台更新，提高用户体验。同时，可能使用了Web App...
HTML5是超文本标记语言的最新版本，它增强了网页的语义化，提供了更好的数据存储（Web Storage和IndexedDB）、离线工作能力（App Cache）以及多媒体支持（Audio、Video元素），使得开发者可以更方便地创建富媒体和...
1. **离线存储（App Cache）**：HTML5的离线存储允许开发者将部分网页资源缓存到本地，使得用户在无网络连接时也能访问部分或全部应用内容，提升了用户体验。 2. **Web Storage (Local Storage & Session Storage)*...
2. **离线存储**：HTML5提供了离线存储机制，包括App Cache和IndexedDB，允许Web App在离线状态下仍然可以访问数据，提升用户体验，同时减少了对服务器的依赖。 3. **3D/图形和特效**：HTML5中的Canvas元素允许...
3. **App Cache (Application Cache)**：虽然现在已被废弃，但在过去，它允许开发者创建一个离线应用程序清单，浏览器会自动缓存清单中的资源。 4. **IndexedDB**：一种客户端数据库，可以用来存储较大的文件，如...
App Cache允许开发者创建一个应用资源的清单，浏览器会自动缓存这些资源，以便在无网络连接时使用。IndexedDB则提供了一个更高级的数据库系统，用于存储结构化数据，支持复杂的查询操作。 其次，HTML5的表单控件...
离线存储功能（App Cache）使得网站可以在离线状态下依然可以访问部分预先缓存的内容，这对于移动应用官网尤其有用。 CSS3则是层叠样式表的第三个主要版本，它提供了更多样化的选择器，如属性选择器、伪类和伪元素...
2. **离线缓存（App Cache）**：HTML5的离线存储功能允许开发者将应用的部分或全部内容缓存在本地，即使在网络不稳定或无网络连接的情况下，用户仍能正常使用应用，提高了用户体验。 3. **本地存储（Web Storage）*...
1. HTML5：这是网页开发的最新标准，提供了许多新的元素和功能，如语义化标签（例如、、等）、媒体元素（、）、离线存储（App Cache）以及拖放功能等。模板中的files如“index.html”和“about.html”都使用了HTML5...
4. **离线缓存**: 支持Service Worker和App Cache，实现离线浏览和数据存储。 5. **兼容性好**: 能够良好地运行在各种主流的移动浏览器上。 **SSM框架** SSM是Spring、Spring MVC和MyBatis的组合，是Java后端开发中...
这些功能的实现依赖于HTML5的新特性，如本地存储（Web Storage）和离线应用（App Cache），它们让网站在离线状态下也能运行部分功能。 模板中的"Zp_demo.demohuo.top_35"可能是一个示例文件或者演示版本，它可能...
- **局限性**：由于App Cache存在一些限制，如无法处理动态内容，更新机制复杂，以及可能引发的缓存问题，现在已逐渐被更先进的Service Worker取代。 2. **Service Worker** - **定义**：Service Worker是一段...
1. **离线存储（App Cache）**：HTML5的离线存储功能允许开发者将部分网站数据缓存在本地，使用户在离线状态下也能访问部分网页内容，提高了用户体验，特别适用于制作离线应用。 2. **多媒体支持**：HTML5引入了新...
首先，HTML5是当前网页开发的标准，它引入了许多新特性，如语义化元素（如、、等）、媒体元素（、）、离线存储（App Cache）以及拖放功能等。这些特性使得开发者能够创建更富交互性、更具可访问性的网站。在这个模板...
App Cache定义了一个应用的离线 manifest 文件，列出所有需要离线可用的资源。Service Worker则更进一步，可以在后台运行，拦截网络请求，实现缓存策略的动态控制和更复杂的离线体验。 二、HTML5 App Cache App ...
这个过程涉及到HTML5的一些关键特性，特别是应用程序缓存（App Cache），这使得Web App可以存储必要的资源以便离线使用。下面我们将深入探讨如何创建这样的离线Web App。 首先，理解Web App的优势至关重要。它们...
App Cache（应用程序缓存）是一种允许Web应用在离线状态下运行的技术。通过以下设置可以配置App Cache的大小和路径： - `setAppCacheMaxSize`: 设置App Cache的最大容量，单位为字节。 - `setAppCachePath`: ...
4. **App Cache（Application Cache）**：虽然Service Worker现在更为先进，但App Cache仍然是一个老式的离线存储方案。它通过一个manifest文件列出要缓存的资源，浏览器会在首次加载网页时下载这些资源。然而，由于...
需要注意的是，虽然App Cache提供了离线访问和性能提升的优势，但它也有一些限制和缺点，例如更新策略可能导致用户获取旧版本的缓存，以及管理复杂性。因此，在现代Web开发中，Service Worker和IndexedDB等更先进的...