用HTML5 AppCache运行你的离线web应用
BY SHWETANK DIXIT · 1 JUL, 2010
原文链接 http://dev.opera.com/articles/view/offline-applications-html5-appcache/
介绍
互联网已经成为许多人生活的重要组成，以至于我们无时无刻不在用它们。如果我们即使在断线的时候也能使用他们该有多棒？但直到最近之前(Until recently)，都没有什么可行的办法来达成这个目的——然而，在引入W3C HTML5的应用缓存(application cache)特性后，让你的互联网应用在联线和断线状态下都能运行将成为可能。
为什么需要让你的应用离线运行？
每天，互联网应用都在变得越来越复杂，越来越给力。我们可以举出涉及多个领域的可以完成桌面应用功能的互联网应用（比如Google Docs，Picasa等）。但是，他们最大的缺陷在于，他们不能离线状态下工作。
这正是HTML5的新离线存储特性的出发点。它力图寻求一种保存文件于缓存的方法，排除这个缺点，让用户在断线情况下，浏览器仍然可以访问到必须的文件。这些文件可以是HTML,CSS,JAVASCRIPT文件，或者其他网站运行所需的资源。
用应用缓存保存你的文件以供离线时使用
HTML5用于离线互联网应用的特性叫做应用缓存（Appplication Cache），或者简称AppCache。存储在AppCache的文件即使在用户断线的时候也可以被应用访问到。你可以在manifest文件里指明这些你需要保存在AppCache里的文件。
AppCache和一般的浏览器缓存的不同
AppCache与一般的浏览器缓存有诸多不同。首先，两者的目的不同。AppCache的目标是特定的WebApp而浏览器缓存则是针对大部分的网页。一般的缓存会保存几乎所有网页，而AppCache只保存在manifest里面指明的页面。并且，一般的缓存是不稳定的，我们不确定哪些页面（以及其中包括的资源）是可用的。
现在，开发人员可以通过AppCache更加编程式的控制缓存，这意味着在离线状态下，对WebApp我们有更高的确定度和控制度。需要特别一提的是，你可以让多个页面分享同一个AppCache。并且，你可以使用API来决定AppCache的状态，然后，甚至让它自动更新。
Manifest文件
该文件存放在服务器端，指明那些文件需要保存在客户端。让我们好好看看它是怎么工作的。你可以任意命名manifest文件的名字，但最好让它的后缀名是.manifest。每个manifest文件以CACHE MANIFEST开头，后面你可以列出你想保存的文件。注释可以在行首用#标注。一个简单的例子如下：
CACHE MANIFEST
#You can also use the CACHE: section header to explicitly declare the following three files.
style.css
script.js
index.htm
Manifest文件必须要有正确的MIME类型：text/cache-manifest。你可以在你服务器上的.htaccess文件上加这么一行来搞定这个问题：
AddType text/cache-manifest .manifest
在HTML里连接manifest文件
现在你已经创建了manifest文件指出需要缓存的文件，下一步就是告诉HTML页面去使用缓存了。为了做到这点，比需要在HTML标签上添加manifest属性，如：
<html manifest=”demo.manifest”>
如果你的WebApp有多个页面，确定他们都连接了manifest文件，否则他们不会成为AppCache的一部分。
使用段首更好的控制AppCache
我们已经看到了一个很简单的关于如何使用manifest文件的例子。通过是使用段首，我们其实可以精确的指明某个文件是否要被缓存。
明确定义需要被缓存的文件
你可以使用cache：段首来明确声明那些文件需要被缓存。例如，前面那个manifest文件可以写成这样，功能不变：
CACHE MANIFEST
CACHE:
style.css
script.js
index.htm
唯一的差别是在这个例子里我们明确的声明全部这些文件都会成为AppCache的一部分，这里有个很简单的实例。
需要重点说明的是，里面提到文件的路径是相对于manifest文件的路径的。在这个例子里，我们假设这些文件都是和manifest文件在同一个文件夹里的。并且，你可以使用相对路径也可以使用绝对路径。
当文件明确声明在CACHE：中，即便你在线，只要manifest文件没有变动，那它们都将从AppCache（而非服务器）中读取，然而，如果浏览器发现一个更新了的manifest文件，新的缓存会再次根据新manifest文件的指示下载相应的文件。所以AppCache可能不适合内容变动很快的网站，比如新闻博客等。但对于专注于某个应用，需要离线工作的WebApp却十分有用（如日历，todo list等）。
如果我要文件绕过缓存直接从服务器下载怎么办？
如果一个页面与一个manifest文件关联，那么只有那些被提到的文件会被尝试读取，无论用户是否在线。然后，也许会存在一些情况你需要一些文件在用户在线的时候绕过缓存，然后从服务器下载最新的文件取代缓存中的文件（比如，一个CGI脚本的动态内容）。
基本上，如果一个页面和manifest文件关联，那所有关于它的文件的网络流量都会被阻隔，于是这些文件要么从AppCache里读取，要么读取失败。而段首NETWORK:给出了这条规则的例外。你可以用段首NETWORK:来声明那些文件不该被缓存，于是它们就会从服务器直接下载，永远不会成为AppCache的一部分。NETWORK:和浏览器的一般缓存头（normal cache header）是分开的，所以如果一个文件应该会被浏览器的一般缓存保存，那即便它被指定在NETWORK:之下，它还是会被那样被保存（跟其他在AppCache中没有指定的文件一样）。
CACHE MANIFEST
CACHE:
style.css
script.js
index.htm
NETWORK:
style2.css
在上面的例子中，style2.css将总是从服务器下载而不会成为AppCache的一部分。值得注意的是，如果你有太多文件要列在NETWORK:下，你可以用通配符*，这样所有的url都被准许在用户在线的时候从服务器下载文件（译者按：这个通配符的作用应该不只于此吧）。
看一下这个例子。你会注意到当你离线并重新加载页面，页面重新加载了，但背景样式也消失了。这是因为背景样式是写在NETWORK:下的style2.css里面的，于是它不会被保存，只有当你在线并刷新的时候才会加载。
提供后备（fallback）内容
（无良的译者按：鉴于callback叫做回调，我觉得fallback是不是可以叫衰调）
段首FALLBACK:是用来定义后备内容，取代无法读取或者读取不完全的文件：
CACHE MANIFEST
CACHE:
style.css
script.js
index.htm
NETWORK:
style2.css
FALLBACK:
main_image.jpg backup_image.jpg
后备内容是会被缓存的，并且只在主要内容无法读取的时候才被使用。上例中，backup_image.jpg缓存在AppCache里面，所以，如果main_image.jpg无法读取，backup_image.jpg就会替代它的位置。看下这个manifest文件——如果你访问这个页面，断线，刷新，浏览器会试图加载图片，但因为你不在线（图片也没有被缓存），它不会被读取到，于是备用内容就会取代它的位置（浏览器会首先花点时间读取主要内容，然后才使用备用内容，请耐心等待——译者按：好像没用多少时间）
一个提供备用内容给多个图片的例子看这里。
待续
分享到：
相关推荐
ApplicationCache（简称AppCache）是HTML5提供的一种离线存储技术，它允许浏览器缓存应用的资源文件，以便在离线状态下使用。 ##### 定义manifest： - **定义方式**：通过在HTML文档头部添加`<html manifest=...
总的来说，“腾讯X5内核离线使用Demo”是一个宝贵的教育资源，可以帮助开发者深入了解离线Web应用的开发，以及腾讯X5内核的高效利用，尤其对于需要在各种网络环境下提供稳定服务的项目具有重要意义。通过深入研究和...
本文将深入探讨如何使用 HTML5 的离线存储功能来构建支持移动 Web 应用程序离线工作的应用。 离线存储主要是通过两种技术实现的：`AppCache`（Application Cache）和`IndexedDB`。AppCache 提供了一个静态资源的...
总的来说，`django-html5-appcache`是Django开发中一个实用的工具，它利用HTML5的离线存储特性，使得Web应用可以在没有网络连接的情况下保持部分功能的可用性。对于那些希望提升用户体验，尤其是考虑离线场景的...
HTML5离线存储是Web应用程序实现离线工作的关键技术，它允许网页在用户离线时仍然可以访问和使用部分数据，极大地提升了用户体验。本课程代码主要围绕这个主题展开，旨在帮助开发者掌握HTML5离线存储的基本原理和...
离线应用缓存（Application Cache），也称为AppCache，是Web应用程序的一种离线存储机制。它允许开发者通过一个名为`manifest`的特殊文件来指定一系列静态资源，浏览器会根据这个清单文件自动下载并缓存这些资源，...
HTML5离线缓存技术是Web开发中的一个重要进步，它使得网页在无网络连接的情况下...通过以上内容，你应该对HTML5的离线缓存技术有了深入的理解，现在你可以尝试创建自己的离线缓存项目，为用户提供更加流畅的浏览体验。
离线应用是HTML5引入的一项重要特性，它允许开发者创建可以在用户离线时仍然能运行的应用程序。在本示例中，我们将探讨如何在Tomcat7服务器上部署一个基于Firefox的离线应用，并通过相关代码了解其实现原理。 首先...
6. **离线存储与缓存**：通过离线应用缓存（AppCache）和Web存储（包括本地存储和会话存储），开发者可以创建离线工作的Web应用程序。 7. **Canvas和SVG**：元素提供了动态图形绘制的能力，而SVG则支持矢量图，两者...
1. **离线存储**：HTML5的离线存储（如AppCache和Service Worker）使得web应用能够在没有网络连接时仍然能够访问部分数据，提高阅读器的离线阅读体验。 2. **本地存储**：Web Storage（包括localStorage和...
- **离线存储**：通过 Application Cache 和 IndexedDB，开发者可以让 Web 应用程序在离线状态下也能正常运行。 - **数据库支持**：Web SQL Database 和 IndexedDB 为 Web 开发提供了持久化的数据存储方案。 ##### ...
还有离线存储API（如AppCache和Service Worker）、Web Storage（localStorage和sessionStorage）以及Web Workers和WebAssembly等，都是HTML5为开发者提供的强大工具。 CSS3则是层叠样式表的最新标准，它的出现极大...
HTML5是现代网页开发的核心标准，它极大地扩展了Web应用程序的功能性和表现力。这两本PDF书籍，"HTML5高级程序设计"和"深入HTML5应用开发"，将为读者提供全面且深入的HTML5知识。 "HTML5高级程序设计"可能会涵盖...
appCache保姆教一些方式的applicationCache douchebag！ 众所周知， 。 现在该教一些礼节了– appCache Nanny for Rescue！ HTML文件上不再有清单属性。 无论您是否要离线缓存资产，何时启动... You Are In Control:...
这个"验证html5应用在线升级DEMO"将帮助你深入理解离线应用的工作原理以及在线升级的过程，通过实际操作，你可以更好地掌握这些概念并应用到自己的项目中。在Test_Offline文件夹中，你会找到相关的HTML、JavaScript...
综上所述，"HTML5CSS3移动Web开发实战-PPT.zip"压缩包将引导开发者深入理解HTML5和CSS3在移动Web开发中的应用，帮助他们掌握创建高性能、响应式的移动Web应用的关键技术和策略。通过学习和实践，开发者能够更好地...
这个项目的核心是利用HTML5的新特性，如Canvas、SVG、WebSocket、离线存储（AppCache）以及媒体元素等，来构建一个具有窗口管理、任务栏、通知中心等功能的Web界面。HTML5的Canvas元素允许开发者通过JavaScript绘制...