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
请注意,以#
开头的行是未执行的注释行。
清单文件的来源必须与主机相同
![](https://i-blog.csdnimg.cn/blog_migrate/ac891e91b0b4996985c7db7bf2ce09cd.png)
免费学习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是一把双刃剑,因此在使用时要小心!
上面讨论的大部分内容以及其他一些要点都已在其他地方介绍。 您可以查看以下资源以获取更多信息:
- MDN上的应用程序缓存Gothas
- 应用程序缓存是 Jake Archibald 的Douchebag
- 杰克·阿奇博尔德的离线食谱
翻译自: https://www.sitepoint.com/common-pitfalls-avoid-using-html5-application-cache/
html5应用程序缓存