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

最新推荐文章于 2021-06-23 10:35:08 发布

dingshi7798

最新推荐文章于 2021-06-23 10:35:08 发布

阅读量144

点赞数

文章标签： java python html css web

原文链接：https://www.sitepoint.com/common-pitfalls-avoid-using-html5-application-cache/

版权

html5应用程序缓存

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

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

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

这是一个清单文件示例：

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

NETWORK:
*

FALLBACK:
/server/ /fallback.html

除了AppCache的优点外，还应避免一些常见的陷阱，以免破坏用户体验并破坏应用程序。

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

如果将清单文件本身包含在应用程序缓存清单中，它将陷入一种循环，几乎不可能通知您的网站有新的缓存文件可用，它应该下载并使用新的清单文件而不是旧的清单文件。之一。因此，请始终注意不要犯以下错误：

CACHE MANIFEST
# 23-01-2015 v0.1

manifest.appcache
page2.css

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

首次使用AppCache时，这是一个非常常见的错误。这是清单文件中的NETWORK标志发出救援的地方。清单文件的NETWORK部分指定Web应用程序需要对其进行联机访问的资源。

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

NETWORK:

/api

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

清单文件应始终以text/cache-manifest的正确媒体类型提供。如果未设置媒体类型，则AppCache将不起作用。

应该始终在生产服务器的.htaccess中配置它。在大多数讲授AppCache的教程中都提到了这一点，但是当许多开发人员将其Web应用程序从开发过渡到生产服务器时，却忽略了这一点。

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

AddType text/cache-manifest .manifest

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

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

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

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

例如：

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

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

即使在线也从AppCache加载数据

通过Web浏览器保存缓存清单文件后，即使用户已连接到Internet，也将从缓存清单本身加载文件。此功能有助于提高网站的加载速度，并有助于减少服务器负载。

在清单文件更新之前，不会对服务器进行更改

从上一点可以知道，即使用户处于联机状态，也将从AppCache加载数据，因此，在清单文件更新之前，不会对网站或服务器中的文件进行更改。

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

CACHE MANIFEST
# 23-01-2015 v0.1

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

CACHE MANIFEST
# 23-01-2015 v0.2

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

清单文件的来源必须与主机相同

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

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

CACHE MANIFEST
# 23-01-2015 v0.2

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js

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

相对URL相对于清单的URL

需要注意的重要一件事是，清单中提到的相对URL是相对于清单文件的，而不是相对于引用清单文件的文档的。如果清单和引用不在同一路径中时发生此错误，则资源将无法加载，并且清单文件也将无法加载。

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

css/style.css
js/main.js
img.jpg
index.html
manifest.appcache

然后，清单文件应如下所示：

CACHE MANIFEST
# 23-01-2015 v0.2

css/style.css
js/main.js
img.jpg

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

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

function onUpdateReady() {
  alert('found new version!');
}

window.applicationCache.addEventListener('updateready', onUpdateReady);

if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {
  onUpdateReady();
}

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

window.applicationCache.swapCache();

结论

AppCache是一项有用的技术，但是正如我们已经看到的那样，在项目中实现它时应格外小心。开发人员应该选择要在清单文件中包含的内容。理想情况下，清单文件应包含静态内容，例如样式表，脚本，Web字体和图像。但是，您始终是清单文件中包含内容的最佳法官。 Appcache是一把双刃剑，因此在使用时要小心！

上面讨论的大部分内容以及其他一些要点都已在其他地方介绍。您可以查看以下资源以获取更多信息：

翻译自: https://www.sitepoint.com/common-pitfalls-avoid-using-html5-application-cache/

html5应用程序缓存

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5应用程序缓存_使用HTML5应用程序缓存时应避免的常见陷阱

html5应用程序缓存如今，应用程序缓存（也称为AppCache）已成为Web开发人员的热门话题。 AppCache使您可以允许网站访问者离线时浏览您的网站。您甚至可以将网站的某些部分（例如图像，样式表或Web字体）存储在用户计算机的缓存中。这可以帮助您的网站更快地加载，从而减少服务器上的负载。要使用AppCache，请创建清单文件，其文件扩展名为“ appcache”，例如： m...
复制链接

扫一扫