根据MDN上的本文件:
之后,每隔24小时左右下载一次。它的下载频率可能会更高,但必须每24小时下载一次,以防止糟糕的脚本被打扰太久。
Firefox和Chrome也是如此吗?还是只有当用户导航到站点时才会更新服务人员javascript?
一些开发人员更喜欢显式地为他们的服务人员服务。js
,其响应头导致禁用所有HTTP缓存,这意味着对服务工作者的网络请求。js
适用于每个导航。
这种无缓存策略在快节奏的“敏捷”环境中可能会很有用。
只需将以下隐藏的. htaccess
文件放在包含service-worker.js
的服务器目录中:
# DISABLE CACHING
<IfModule mod_headers.c>
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0
</IfModule>
<FilesMatch "\.(html|js)$">
<IfModule mod_expires.c>
ExpiresActive Off
</IfModule>
<IfModule mod_headers.c>
FileETag None
Header unset ETag
Header unset Pragma
Header unset Cache-Control
Header unset Last-Modified
Header set Pragma "no-cache"
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Expires "Thu, 1 Jan 1970 00:00:00 GMT"
</IfModule>
</FilesMatch>
这将禁用所有的缓存。js
和。此服务器目录和以下目录中的html
文件;这不仅仅是服务人员。js独自一人。
仅选择了这两种文件类型,因为这是my PWA的非静态文件,可能会影响在浏览器窗口中运行应用程序的用户,而不会将其安装为一个完整的自动更新PWA。
有关服务人员行为的更多详细信息,请参阅Google Web基础知识。
注意:从Firefox 57和Chrome 68以及支持服务工作者的Safari和Edge版本开始,默认行为已更改为考虑更新的服务工作者规范。在这些浏览器中,默认情况下,在检查service worker脚本的更新时将忽略HTTP缓存指令。下面的描述仍然适用于Chrome和Firefox的早期版本。
每次导航到服务工作者范围内的新页面时,Chrome都会对传递给navigator.serviceWorker.register()
的JavaScript资源发出标准HTTP请求打电话。让我们假设它被命名为service-worker.js
。此请求仅在导航或服务工作人员被唤醒时发出,例如,推送
事件。没有一个后台进程每24小时重新访问每个服务工作人员脚本,或者类似的任何自动化过程。
此HTTP请求将遵守标准的HTTP缓存指令,但有一个例外(将在下一段中讨论)。例如,如果您的服务器设置了适当的HTTP响应标头,指示缓存的响应应使用1小时,那么在接下来的一小时内,浏览器对service-worker.js
的请求将由浏览器的缓存完成。请注意,我们讨论的不是缓存存储API,它在这种情况下不相关,而是标准的浏览器HTTP缓存。
标准HTTP缓存规则的一个例外,这就是24小时的问题,如果HTTP缓存中的service-worker.js
条目的年龄大于24,浏览器将始终访问网络十小时。因此,在功能上,使用1天、1周或1年的最大年龄没有区别——它们都将被视为最大年龄为1天。
浏览器供应商希望确保开发人员不会意外推出一个“破碎的”或有缺陷的service-worker.js
,该最大年龄
为1年,给用户留下可能是持久的、破碎的网络体验很长一段时间。(你不能指望你的用户知道清除他们的网站数据或转移-重新加载网站。)
一些开发人员更喜欢显式地为他们的service-worker.js
提供响应头,从而禁用所有HTTP缓存,这意味着为每个导航都发出了对service-worker.js
的网络请求。另一种方法可能是使用非常非常短的max-age
(比如一分钟)来提供某种程度的限制,以防单个用户进行大量快速导航。如果你真的想尽量减少请求,并且相信你不会很快更新你的service-worker.js
,你可以自由设置24小时的最大年龄
,但是我建议在关闭时使用更短的时间你意外地需要重新部署。
我一直在阅读《html5rocks服务工作者简介》一文,并创建了一个基本的服务工作者,它可以缓存页面、JS和CSS,并按预期工作: 当我对CSS进行更改时,由于服务人员正在从缓存中正确返回CSS,因此不会拾取此更改。 我陷入困境的地方是,如果我要更改HTML、JS或CSS,我如何确保服务人员可以从服务器加载较新版本,而不是从缓存加载?我曾尝试在CSS导入上使用版本戳,但似乎不起作用。
情况: 在我的网站上。com/game,我在 在我的服务器上,的最大值为。 问题: 。 问题是,每当用户访问,它显示空页面,不再执行任何操作。我无法让客户端获取新的。 如何让客户端获取新的?
有一个问题,我们的一些用户有一个错误的服务工作者坐在他们的Facebook浏览器从我们的网站。 问题:Facebook App用户在访问我们在FB上共享的页面时,会在FB浏览器上看到我们的“您离线页面”。 错误似乎是旧版本的Google Workbox(3.6.1)使用Chrome75自动返回FB应用程序中的您离线页面。更新Workbox修复了它。 对Workbox的引用在service work
我遵循angular的官方指南,成功安装了初始服务人员。接下来,我想尝试一下更新行为,得到了一个 无法读取未定义的属性id 其中as id指ngsw-worker.js方法中的client.id 我做的步骤是 注册SW,离线并重新加载(工作),关闭标签,但保持窗口打开 app.cmp.html更新代码 重建项目(ng build--prod) 打开新的Tab和应用程序(可以观察SW更新) 重新加载
我创建了react应用程序,它使用股票服务人员缓存文件。我希望该应用程序是一个可下载的PWA,但每当我更新(与heroku) 我是否错过了文档中的一些配置,以便在其为PWA时启用自动更新?或者我可以做些什么来在更新时强制刷新。(我读过这是一个糟糕的UI,但我对此没有意见) 注意:从PC上的浏览器查看时,它会按预期工作。(选项卡全部关闭时更新)
我正在尝试使用Firebase消息传递(web)。默认情况下,Firebase会搜索包含服务工作者的文件“Firebase messaging sw.js”。 服务工作者脚本应位于应用程序的绝对路径上!例如:http://localhost/firebase-messaging-sw.js 如何更改此默认位置?!搜索官方文档,我发现了这个方法:,它接受服务工作者注册,但试图使用它,我得到一个错误,