使用HTML5应用程序缓存时，常见的陷阱要避免-js教程-PHP中文网

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

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

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

<html lang="en" manifest="manifest.appcache">

登录后复制

这是一个示例清单文件：

<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/ 子树中的资源的请求始终从网络加载，而不是从缓存加载。

<html lang="en" manifest="manifest.appcache">

登录后复制

始终在服务器的 .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 相对于清单文件，而不是相对于您引用清单文件的文档。如果清单和引用不在同一路径中，则资源将无法加载，进而清单文件将无法加载。

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

<html lang="en" manifest="manifest.appcache">

登录后复制

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

<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 是一把双刃剑，因此在使用它时要小心！

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