ApplicationCache
摘要
Application Cache (AppCache) 允许基于 Web 的应用程序离线运行。开发者可以指定浏览器缓存的资源，即使无法连接到服务器，这些资源仍然可供应用程序使用。即使在离线状态下，用户点击刷新按钮，这些资源也能正确加载和工作。
概述
应用程序缓存提供以下好处
- 离线浏览：用户即使在离线状态下也能浏览网站或使用 Web 应用程序
- 速度：缓存的资源是本地的，因此加载速度更快
- 减少服务器负载：浏览器仅从服务器下载已更改的资源。
属性
- oncached
- 清单中列出的资源已下载，应用程序现在已缓存。
- onchecking
- 用户代理正在检查更新，或首次尝试下载清单。这是序列中的第一个事件。
- ondownloading
- 用户代理已找到更新并正在获取它，或者正在首次下载清单中列出的资源。
- onerror
- 指示发生错误。
- onnoupdate
- 指示清单文件没有更改。
- onobsolete
- 网页与一个应用程序缓存关联，该应用程序缓存的组已被标记为过时。
- onprogress
- 用户代理正在下载清单文件中列出的资源。事件对象的 total 属性返回要下载的总文件数。事件对象的 loaded 属性返回到目前为止处理的文件数。
- onupdateready
- ApplicationCache 对象的缓存主机与一个应用程序缓存关联，该应用程序缓存组的更新状态为闲置，并且该应用程序缓存组未被标记为过时，但该应用程序缓存不是其组中最新的缓存。
- status
- 返回应用程序缓存的当前状态，如以下常量所定义。
方法
- abort
- 取消应用程序缓存下载过程。此方法旨在由显示自身缓存进度 UI 的 Web 应用程序使用，以防用户想要停止更新（例如，因为带宽有限）。
- swapCache
- 如果存在较新的缓存，则切换到最新的应用程序缓存。如果不存在，则抛出 InvalidStateError 异常。这不会导致先前加载的资源重新加载；例如，图像不会突然重新加载，样式表和脚本也不会重新解析或重新评估。唯一的改变是，后续对缓存资源的请求将获得较新的副本。updateready 事件将在调用此方法之前触发。一旦触发，Web 应用程序可以根据需要调用此方法，以将基础缓存切换到具有更多最新更新的缓存。为了正确使用此功能，应用程序必须能够将新功能发挥作用；例如，重新加载脚本以启用新功能。一个更简单的替代方案是使用
location.reload()在适合用户的时机重新加载整个页面。 - update
- 调用应用程序缓存下载过程。如果不存在要更新的应用程序缓存，则抛出 InvalidStateError 异常。通常不需要调用此方法，因为用户代理通常会自动处理应用程序缓存的更新。此方法在诸如长期运行的应用程序中很有用。例如，Web 邮件应用程序可能会在浏览器选项卡中保持打开状态数周。这样的应用程序可能希望每天测试更新。
事件
没有事件。
用法
In order to cache files, you must do the following:
- 创建一个清单文件，列出您想要缓存的文件和其他 Web 资源。
- 在您想要缓存的每个页面的标题中引用清单文件。
清单文件
清单文件定义了用户浏览您的网站时要缓存哪些 Web 资源。清单文件通常具有 .appcache 或 .manifest 扩展名。每个网页必须将一个清单属性添加到 HTML 元素，类似于以下内容
<html manifest="example.appcache">
您可以使用绝对 URL 或相对 URL。缓存清单文件使用以下格式列出将要缓存的文件
CACHE MANIFEST
# Version 1
CACHE:
script/scriptfilename1.js
css/cssfilename.css
images/imagename1.png
images/imagename2.jpg
images/imagename3.png
FALLBACK:
# This will enable imagename4.png to be as a replacement for
# all resources under the images dir when there is no network connectivity.
images/ images/imagename4.png
NETWORK:
# This will prevent other network resources from being accessed.
images/imagename5.png
清单文件的第一行必须是 CACHE MANIFEST，其后的行列出您想要缓存的 Web 资源。您可以使用 # 符号添加注释。
或者，可以通过在资源之前添加“CACHE:”标题部分来指定需要缓存的 Web 资源（如前所示）。此外，可以定义回退资源，以在没有网络连接时替换常规或特定的 Web 资源。这通过在资源之前添加“FALLBACK:”标题部分来完成。这些资源可以是通配符，以指定一个通用的机制（如前所示）。请注意，FALLBACK: 部分中的第一个“images/”之后有一个空格。这表示“images/”目录下的任何文件都将回退到特定的 Web 资源（例如，images/imagename4.png），如果无法从网络访问它们。此外，可以指定 Web 资源仅从网络加载。这通过在资源之前添加“NETWORK: ”标题部分来完成。此功能可用于缩小可以从网络访问的资源数量，从而创建一个仅允许列表（如前所示）。
| 部分 | 描述 |
|---|---|
| CACHE | 这是默认部分，用于条目。列在此标题下（或在 CACHE MANIFEST 之后）的文件将在首次下载后显式缓存。 |
| NETWORK | 列在此部分下的文件是需要连接到服务器的白名单资源。即使用户处于离线状态，对这些资源的任何请求都会绕过缓存。可以使用通配符。 |
| FALLBACK | 一个可选部分，用于指定资源不可访问时的回退页面。第一个 URI 是资源，第二个是回退。两个 URI 必须是相对的，并且与清单文件具有相同的来源。可以使用通配符。 |
ApplicationCache 功能独立于 HTTP 缓存标头。清单文件隐式地将其自身包含为要缓存的页面。它还需要与包含它的页面具有相同的来源域。
备注
限制
规范 规定浏览器“应考虑对磁盘使用量施加限制”。磁盘使用量限制因浏览器而异。
相关规范
- W3C ApplicationCache Specification
- W3C 编辑草案
参见
外部资源
- Application Cache 是个混蛋
- HTML5Rocks - 使用 Application Cache 的初学者指南
- 使用 HTML5 appcache 将您的网站和应用程序离线
- 使用 HTML5 AppCache 离线运行您的 Web 应用程序
- appcachefacts.info
- 缓存清单文件验证器
