使用HTML5应用程序缓存时，常见的陷阱要避免

关键要点

• 切勿将清单文件包含在应用程序缓存清单中，这会造成循环，几乎无法通知您的网站有新的缓存文件可用。
• 始终在服务器的 .htaccess 文件中设置应用程序类型清单，以确保 AppCache 正确运行。如果未设置媒体类型，AppCache 将无法工作。
• 请注意，如果清单文件中指定的单个文件都找不到或无法下载，则整个清单文件将被丢弃。这是 AppCache 的一种特殊行为。
• 更新网站后，始终更新清单文件，否则用户将看不到更改，只会看到以前缓存的数据。您可以在清单文件中注释中更新版本号或日期，以强制用户的 Web 浏览器下载清单文件的新版本。

HTML5 应用程序缓存（也称为 AppCache）近来成为 Web 开发人员关注的热点话题。AppCache 使您可以允许网站访问者在离线时浏览您的网站。您甚至可以将网站的部分内容（例如图像、样式表或 Web 字体）存储在用户计算机上的缓存中。这可以帮助您的网站加载速度更快，从而减少服务器的负载。

要使用 AppCache，您可以创建一个扩展名为“appcache”的清单文件，例如：manifest.appcache。在此文件中，您可以列出要缓存的所有文件。要在您的站点上启用它，您必须在 html 元素的网页上包含对该清单文件的引用，如下所示：

<code class="language-html"></code>

这是一个示例清单文件：

<code>CACHE MANIFEST
# 2015-01-23 v0.1
/style.css
/logo.gif
/script.js

NETWORK:
*

FALLBACK:
/server/ /fallback.html</code>

除了 AppCache 的好处之外，还有一些常见的陷阱应该避免，以防止破坏用户体验并破坏您的应用程序。

切勿在清单文件中列出清单文件

如果您在应用程序缓存清单中包含清单文件本身，它会陷入某种循环，几乎无法通知您的网站有新的缓存文件可用，并且它应该下载并使用新的清单文件而不是旧的清单文件。因此，务必小心不要犯以下错误：

<code>CACHE MANIFEST
# 2015-01-23 v0.1

manifest.appcache
page2.css</code>

缓存页面上未缓存的资源不会加载

这是第一次使用 AppCache 时非常常见的错误。这就是清单文件中的 NETWORK 标志发挥作用的地方。清单文件的 NETWORK 部分指定 Web 应用程序需要在线访问的资源。

在 NETWORK 标志下指定的 URL 基本上是“白名单”，也就是说，在此标志下指定的文 件在有互联网连接时始终从服务器加载。例如，以下代码片段确保对加载包含在 /api/ 子树中的资源的请求始终从网络加载，而不是从缓存加载。

<code class="language-html"></code>

始终在服务器的 .htaccess 文件中设置应用程序类型清单

清单文件应始终在正确的媒体类型 text/cache-manifest 下提供服务。如果未设置媒体类型，则 AppCache 将无法工作。

它应始终在生产服务器的 .htaccess 文件中配置。大多数讲解 AppCache 的教程中都提到了这一点，但在将 Web 应用程序从开发服务器迁移到生产服务器时，许多开发人员都会忽略这一点。

在 Apache 的 .htaccess 文件中输入以下内容：

<code>CACHE MANIFEST
# 2015-01-23 v0.1
/style.css
/logo.gif
/script.js

NETWORK:
*

FALLBACK:
/server/ /fallback.html</code>

如果您将应用程序上传到 Google App Engine，则可以通过将以下代码段添加到 app.yaml 文件中来完成相同的任务：

<code>CACHE MANIFEST
# 2015-01-23 v0.1

manifest.appcache
page2.css</code>

避免因找不到文件而丢弃整个清单

如果清单文件中指定的单个文件都找不到或无法下载，则整个清单文件将被丢弃。这是 AppCache 的一种奇怪的行为，在设计使用 AppCache 的 Web 应用程序时应牢记这一点。

例如：

<code>NETWORK:

/api</code>

如果删除了 logo.gif，AppCache 将无法找到已删除的图像文件，因此清单文件中的任何内容都不会执行。

即使在线，数据也从 AppCache 加载

一旦您的 Web 浏览器保存了缓存清单文件，即使用户已连接到互联网，文件也会从缓存清单本身加载。此功能有助于提高网站的加载速度，并有助于减少服务器负载。

服务器上的更改不会发生，直到清单文件更新

由于您从前一点知道即使用户在线，数据也会从 AppCache 加载，因此对网站或服务器中文件的更改不会发生，直到清单文件更新。

更新网站后，您始终必须更新清单文件，否则您的用户将永远无法看到更改，他们只会看到以前缓存的数据。您可以在清单文件中注释中更新版本号或日期，以强制用户的 Web 浏览器下载清单文件的新版本。例如，如果在对网站进行更改之前，以下是您使用的清单文件：

<code>AddType text/cache-manifest .manifest</code>

它可以更改为类似于以下代码块的内容，以便用户的浏览器可以下载清单文件的新副本。

<code>- url: /public_html/(.*\.appcache)
  static_files: public_html/
  mime_type: text/cache-manifest
  upload: public_html/(.*\.appcache)</code>

请注意，以 # 开头的行是不会执行的注释行。

清单文件必须与主机来自相同的来源提供服务

尽管清单文件可以保存对要从其他域缓存的资源的引用，但它应从与主机页面相同的来源提供给 Web 浏览器。如果不是这种情况，则清单文件将无法加载。例如，以下清单文件是正确的：

<code>CACHE MANIFEST
# 2015-01-23 v0.1
/style.css
/logo.gif
/script.js</code>

在这里，我们指定了要存储在用户浏览器缓存中的内容，该内容是从另一个域引用的，这完全没问题。

相对 URL 相对于清单的 URL

需要注意的一件重要事情是，您在清单中提到的相对 URL 相对于清单文件，而不是相对于您引用清单文件的文档。如果清单和引用不在同一路径中，则资源将无法加载，进而清单文件将无法加载。

如果您的应用程序结构如下所示：

<code class="language-html"></code>

那么您的清单文件应如下所示：

<code>CACHE MANIFEST
# 2015-01-23 v0.1
/style.css
/logo.gif
/script.js

NETWORK:
*

FALLBACK:
/server/ /fallback.html</code>

以编程方式检查清单的状态

您可以通过测试 window.applicationCache.status 以编程方式检查您的应用程序是否正在使用缓存清单的更新版本。这是一些示例代码：

<code>CACHE MANIFEST
# 2015-01-23 v0.1

manifest.appcache
page2.css</code>

在网站上运行上述代码可以让你知道何时有 AppCache 清单的新更新可用。请注意，UPDATEREADY 是一个已定义的状态。您甚至可以在 onUpdateReady() 函数中使用 swapCache() 方法来将旧的清单文件替换为新的清单文件：

<code>NETWORK:

/api</code>

结论

AppCache 是一项有用的技术，但正如我们所看到的，在项目中实现它时应谨慎。开发人员应选择性地选择应在清单文件中包含的内容。理想情况下，清单文件应包含静态内容，例如样式表、脚本、Web 字体和图像。但是，您始终是对清单文件中包含哪些内容的最佳判断者。Appcache 是一把双刃剑，因此在使用它时要小心！

上述内容中的大部分内容已在其他地方介绍过，还有一些其他要点。您可以查看以下资源以了解更多信息：

• MDN 上的应用程序缓存陷阱
• Jake Archibald 的应用程序缓存是个混蛋
• Jake Archibald 的离线食谱

关于 HTML5 应用程序缓存的常见问题解答 (FAQ)

什么是 HTML5 应用程序缓存，为什么它很重要？

HTML5 应用程序缓存 (AppCache) 是一项允许开发人员指定浏览器应缓存哪些文件并使其可供用户离线使用的功能。它之所以重要，是因为它可以通过减少服务器负载和节省带宽来提高 Web 应用程序的性能。它还允许应用程序即使在用户离线时也能运行，从而提供更好的用户体验。

HTML5 应用程序缓存是如何工作的？

HTML5 应用程序缓存的工作原理是使用清单文件。此文件列出了浏览器应缓存以供离线使用的资源。当用户访问网页时，浏览器会检查是否与其关联了清单文件。如果是，浏览器将下载并存储列出的资源。下次用户访问网页时，浏览器将加载缓存的资源，而不是从服务器下载它们。

使用 HTML5 应用程序缓存时有哪些常见的陷阱？

使用 HTML5 应用程序缓存时，一些常见的陷阱包括：未正确更新清单文件，导致提供旧资源；未正确处理缓存清单回退部分，导致错误；以及未考虑缓存对用户设备存储的影响。

如何避免这些陷阱？

为避免这些陷阱，请在资源更改时始终正确更新清单文件。使用清单文件的 NETWORK 部分指定永远不应该缓存的资源。此外，请考虑用户的设备存储，并且只缓存必要的资源。

HTML5 应用程序缓存的未来是什么？

HTML5 应用程序缓存正在被弃用，取而代之的是 Service Workers。Service Workers 提供对缓存的更多控制，并且可以处理更复杂的场景。但是，目前并非所有浏览器都支持 Service Workers，因此了解和使用 HTML5 应用程序缓存仍然很重要。

如何创建清单文件？

清单文件是一个简单的文本文件，其中列出了要缓存的资源。它应该以 MIME 类型“text/cache-manifest”提供服务。文件的首行应为“CACHE MANIFEST”，后跟要缓存的资源。

如何将网页与清单文件关联？

要将网页与清单文件关联，请将“manifest”属性添加到网页的“html”标记中。 “manifest”属性的值应为清单文件的 URL。

如何更新缓存？

要更新缓存，请对清单文件进行更改。每次用户访问网页时，浏览器都会检查清单文件的更新。如果清单文件已更改，浏览器将下载并缓存新资源。

如果清单文件中列出的资源无法下载会发生什么？

如果清单文件中列出的资源无法下载，则整个缓存更新过程将失败。浏览器将继续使用旧缓存。

我可以将 HTML5 应用程序缓存用于所有资源吗？

虽然从技术上讲您可以将 HTML5 应用程序缓存用于所有资源，但不建议这样做。缓存过多的资源可能会填满用户的设备存储并对性能产生负面影响。最好只缓存必要的资源。

以上是使用HTML5应用程序缓存时，常见的陷阱要避免的详细内容。更多信息请关注PHP中文网其他相关文章！