在线文档教程
首页 技术教程 开发文档 觅分类 ICON图标
技术教程 开发文档 觅分类 ICON图标

Using the application cache

使用应用程序缓存

Deprecated

该功能已从Web标准中删除。尽管一些浏览器可能仍然支持它，但它正在被丢弃。避免使用它并尽可能更新现有的代码；请参阅本页底部的兼容性表格来指导您的决定。请注意，此功能可能随时停止工作。

使用此处描述的应用程序缓存功能在这一点上非常令人沮丧；它正在从Web平台中移除。改用服务人员。事实上，从Firefox 44开始，当AppCache用于为页面提供脱机支持时，控制台中现在会显示一条警告消息，建议开发人员使用服务人员（bug 1204581）。

介绍

HTML5提供了一种应用程序缓存机制，可让基于Web的应用程序脱机运行。开发人员可以使用应用程序缓存（AppCache）界面来指定浏览器应缓存的资源并使其可供离线用户使用。即使用户在脱机状态下单击刷新按钮，缓存的应用程序也会正常加载并正常工作。

使用应用程序缓存为应用程序提供了以下好处：

  • 离线浏览：用户即使在离线时也可以浏览网站。

应用程序缓存如何工作

启用应用程序缓存

要为应用程序启用应用程序缓存，必须在应用程序页面manifest的<html>元素中包含该属性，如以下示例所示：

<html manifest="example.appcache">
  ...
</html>

清单属性引用缓存清单文件，该文件是列出浏览器应为应用程序缓存的资源（文件）的文本文件。

您应该manifest在应用程序的每个页面上包含要缓存的属性。浏览器不会缓存不包含manifest属性的页面，除非这些页面明确列在清单文件本身中。您不需要列出要在清单文件中缓存的所有页面，浏览器会隐式添加用户访问的每个页面，并将manifest属性设置为应用程序缓存。

某些浏览器（例如Firefox）会在用户首次加载使用应用程序缓存的应用程序时显示通知栏。通知栏显示一条消息，例如：

本网站（www.example.com）要求将数据存储在您的计算机上供脱机使用。现在不允许

术语“脱机（启用）应用程序”有时专指用户已允许使用脱机功能的应用程序。

加载文件

使用应用程序缓存修改了加载文档的正常过程：

  • 如果应用程序缓存存在，则浏览器直接从缓存中加载文档及其关联资源，而不访问网络。这加快了文档加载时间。

下面更详细地指定加载文档和更新应用程序缓存的过程：

  • 当浏览器访问包含manifest属性的文档时，如果没有应用程序缓存存在，浏览器将加载文档，然后获取清单文件中列出的所有条目，从而创建应用程序缓存的第一个版本。

存储位置并清除脱机缓存

在Chrome中，您可以通过在首选项中选择“清除浏览数据...”或通过访问chrome://appcache-internals/来清除脱机缓存。Safari在其偏好设置中有类似的“空缓存”设置，但也可能需要重启浏览器。

在Firefox中，脱机缓存数据与Firefox配置文件分开存储 - 位于常规磁盘缓存旁边：

  • Windows Vista/7: C:\Users\<username>\AppData\Local\Mozilla\Firefox\Profiles\<salt>.<profile name>\OfflineCache

在Firefox中，可以在about:cache页面上检查脱机缓存的当前状态（在“脱机缓存设备”标题下）。可以使用工具 - >选项 - >高级 - >网络 - >离线数据中的“删除...”按钮单独清除每个站点的脱机缓存。

在Firefox 11之前，无论是工具 - >清除最近的历史记录，还是工具 - >选项 - >高级 - >网络 - >离线数据 - >立即清除，都会清除离线缓存。这已被修复。

在Linux上，您可以在编辑>首选项>高级>网络>离线Web内容和用户数据中找到该设置

另请参阅清除DOM存储数据。

应用程序缓存也可能过时。如果从服务器中删除应用程序的清单文件，浏览器将删除使用该清单的所有应用程序缓存，并向该applicationCache对象发送“已废弃”事件。这将应用程序缓存的状态设置为OBSOLETE。

缓存清单文件

引用缓存清单文件

manifestWeb应用程序中的属性可以指定缓存清单文件的相对路径或绝对URL。（绝对URL必须来自与应用程序相同的来源）。缓存清单文件可以具有任何文件扩展名，但它必须以MIME类型提供text/cache-manifest。

注意：在Apache服务器上，清单（.appcache）文件的MIME类型可以通过添加AddType text/cache-manifest .appcache到根目录或与应用程序相同的目录中的.htaccess文件来设置。

缓存清单文件中的条目

缓存清单文件是一个简单的文本文件，列出了浏览器为了离线访问而缓存的资源。资源由URI标识。缓存清单中列出的条目必须与清单具有相同的方案，主机和端口。

例1：一个简单的缓存清单文件

以下是一个简单的缓存清单文件example.appcache，适用于www.example.com上的虚拟网站。

CACHE MANIFEST
# v1 - 2011-08-13
# This is a comment.
http://www.example.com/index.html
http://www.example.com/header.png
http://www.example.com/blah/blah

缓存清单文件可以包括三个部分（CACHE，NETWORK，和FALLBACK，在下面讨论）。在上面的示例中，没有节头，因此假定所有数据行都位于explicit（CACHE）节中，这意味着浏览器应将所有列出的资源缓存在应用程序缓存中。资源可以使用绝对或相对URL（例如，index.html）指定。

上例中的“v1”注释有一个很好的理由。清单文件更改时，浏览器仅更新应用程序缓存，字节为字节。如果更改缓存的资源（例如，header.png用新内容更新映像），则还必须更改清单文件的内容，以便让浏览器知道他们需要刷新缓存。您可以对清单文件进行任何更改，但建议最佳做法是修改版本号。

重要提示：不要在缓存清单文件中指定清单本身，否则几乎不可能通知浏览器新的清单可用。

在缓存清单文件的部分：CACHE，NETWORK，和FALLBACK

清单可以有三个不同的部分：CACHE，NETWORK，和FALLBACK。

CACHE:这是缓存清单文件中条目的默认部分。在CACHE:部分标题下（或直接在该CACHE MANIFEST行后面）列出的文件在第一次下载后被显式缓存。缓存清单文件中NETWORK:的NETWORK:部分标题下列出的文件是需要连接到服务器的白名单资源。即使用户处于离线状态，对这些资源的所有请求都会绕过缓存。通配符*可以使用一次。大多数网站需要*。FALLBACK:该FALLBACK:部分指定浏览器在资源不可访问时应使用的备用页面。本节中的每个条目都列出了两个URI--第一个是资源，第二个是后备。这两个URI必须是相对的，并且来自清单文件的相同来源。可以使用通配符。

CACHE，NETWORK和FALLBACK部分可以在高速缓存中的清单文件的任何顺序排列，并且各部分可以在单一清单中出现一次以上。

示例2：更完整的缓存清单文件

以下是www.example.com上虚构网站的更完整的缓存清单文件：

CACHE MANIFEST
# v1 2011-08-14
# This is another comment
index.html
cache.html
style.css
image1.png

# Use from network if available
NETWORK:
network.html

# Fallback content
FALLBACK:
. fallback.html

本例使用NETWORK和FALLBACK部分指定的network.html页面必须始终从网络检索，并且该fallback.html页面应该充当后备资源（例如，在情况下与服务器的连接不能建立）。

缓存清单文件的结构

缓存清单文件必须以text/cache-manifestMIME类型提供。使用此MIME类型提供的所有资源必须遵循本节中定义的应用程序缓存清单的语法。

高速缓存清单是UTF-8格式的文本文件，可以选择包含BOM字符。换行符可以由换行符（U+000A），回车符（U+000D）或回车符和换行符来表示。

缓存清单的第一行必须包含字符串CACHE MANIFEST（U+0020两个单词之间有一个空格），后跟零个或多个空格或制表符。该行上的任何其他文本都将被忽略。

缓存清单的其余部分必须包含零个或多个以下行：

空白行您可以使用由零个或多个空格和制表符组成的characters.CommentComments包含零个或多个制表符或空格，后跟单个#字符，后跟零个或多个注释文本字符。注释只能用于他们自己的行（在第一CACHE MANIFEST行之后），不能附加到其他行。这意味着您无法指定片段标识符。部分headerSection标头指定正在处理缓存清单的哪一部分。有三种可能的部分标题：

节标题说明`CACHE：`切换到缓存清单的显式部分（这是默认部分）。`NETWORK：`切换到缓存清单的在线白名单部分。`FALLBACK：`切换到缓存清单的后备部分。

部分标题行可能包含空格，但必须:在部分名称中包含冒号 (:)。部分数据数据行的格式因部分而异。在explicit（CACHE:）部分中，每行都是要缓存的资源的有效URI或IRI引用（本节中不允许使用通配符）。在每行的URI或IRI之前和之后允许使用空格。在Fallback部分中，每一行都是对资源的有效URI或IRI引用，随后是在无法与服务器建立连接时要提供的后备资源。在网络部分，每一行都是一个有效的URI或IRI引用，用于从网络中获取资源（或者*可以在本节中使用通配符）。

注意：相对URI与缓存清单的URI相关，而不是引用清单的文档的URI。

高速缓存清单文件可以随意从节段切换到节段（每节段标题可以多次使用），并且节段允许为空。

应用程序缓存中的资源

应用程序缓存始终包含至少一个由URI标识的资源。所有资源都适用于以下类别之一：

主条目这些是添加到缓存的资源，因为用户访问的浏览上下文包含一个文档，该文档使用其manifest属性指示它位于此缓存中。隐式条目这些是在应用程序的缓存清单文件中明确列出的资源。网络条目这些是应用程序的缓存清单文件作为网络条目。回退条目这些是在应用程序的缓存清单文件中列为备用条目的资源。

注意：资源可以使用多个类别进行标记，因此可以分类为多个条目。例如，一个条目既可以是显式条目又可以是后备条目。

下面将更详细地描述资源类别。

主条目

主条目是manifest在其<html>元素中包含属性的任何HTML文件。例如，假设我们有HTML文件http://www.example.com/entry.html，它看起来像这样：

<html manifest="example.appcache">
  <h1>Application Cache Example</h1>
</html>

如果entry.html未在example.appcache缓存清单文件中列出，则访问该entry.html页面会导致entry.html作为主条目添加到应用程序缓存中。

显式条目

显式条目是在CACHE缓存清单文件的部分中明确列出的资源。

网络条目

NETWORK缓存清单文件的部分指定了Web应用程序需要联机访问的资源。应用程序缓存中的网络条目本质上是“在线白名单” - 该NETWORK节中指定的URI 从服务器而不是缓存中加载。这可以让浏览器的安全模型通过限制对已批准资源的访问来保护用户免受潜在的安全漏洞攻击。

作为示例，您可以使用网络条目从服务器（而不是缓存）加载和执行脚本和其他代码：

CACHE MANIFEST
NETWORK:
/api

上面列出的缓存清单部分确保加载http://www.example.com/api/子树中包含的资源的请求始终访问网络，而不尝试访问缓存。

注意：从清单文件中简单省略主条目（manifest在html元素中设置了属性的文件）将不会有相同的结果，因为主条目将被添加到应用程序缓存中，并随后从该应用程序缓存中提供。

后备条目

当尝试加载资源失败时使用回退条目。例如，假设缓存清单文件http://www.example.com/example.appcache包含以下内容：

CACHE MANIFEST
FALLBACK:
example/bar/ example.html

对其http://www.example.com/example/bar/或其任何子目录及其内容的任何请求都会导致浏览器发出网络请求以尝试加载所请求的资源。如果尝试失败，由于网络故障或某种服务器错误，浏览器会加载example.html文件。

缓存状态

每个应用程序缓存都有一个状态，用于指示缓存的当前状态。共享相同清单URI的缓存共享相同的缓存状态，可以是以下之一：

UNCACHED指示应用程序缓存对象未完全初始化的特殊值。IDLE应用程序缓存当前未处于更新过程中。CHECKING清单正在提取并检查更新。DOWNLOADING由于资源清单发生变化，正在下载资源以添加到缓存中。UPDATEREADY有一个新版本的应用程序缓存可用。有一个相应的updateready事件，cached当一个新的更新被下载但尚未使用该swapCache()方法激活时，将被触发而不是事件。OBSOLETE应用程序缓存组现在已经过时。

测试缓存清单的更新

您可以使用JavaScript以编程方式测试以查看应用程序是否具有更新的缓存清单文件。由于缓存清单文件在脚本附加事件侦听器以测试更新之前可能已更新，因此脚本应始终测试window.applicationCache.status。

function onUpdateReady() {
  console.log('found new version!'
}
window.applicationCache.addEventListener('updateready', onUpdateReady
if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
  onUpdateReady(
}

要手动开始测试新清单文件，可以使用window.applicationCache.update()。

陷阱

  • 永远不要使用传统的GET参数来访问缓存的文件（如other-cached-page.html?parameterName=value）。这将使浏览器绕过缓存并尝试从网络获取它。要链接到具有JavaScript解析参数的缓存资源，请在链接的散列部分使用参数，例如other-cached-page.html#whatever?parameterName=value。

浏览器兼容性

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support4.0(Yes)3.5 (1.9.1)110.010.64.0

FeatureAndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support2.1(Yes)(Yes)1.0.1211.0311.03.2

  • 黔ICP备2021005045号