硬刷新后注册服务工作者

本教程将介绍硬刷新后注册服务工作者的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

硬刷新后注册服务工作者 教程 第1张

问题描述

只要在硬刷新后(例如,对于Chrome,Ctrl + F5)重新加载包含服务工作者的Web应用程序,服务工作者之后就无法注册。

根据W3C

的文档

注意:如果请求的值为
是强制刷新(Shift+刷新)。返回的ServiceWorker对象
从该属性中,表示同一服务工作者的getter是
相同的对象。

因此,问题是:是否真的不可能在执行硬刷新后立即注册服务工作者?我正在使用navigator.serviceWorker.controller检查服务人员是否存在。请参阅所附的GIF,其中显示了与https://googlechrome.github.io/samples/service-worker/basic/页的交互

推荐答案

使服务工作人员即使在硬重新加载后也能工作的解决方案是通过以下代码片段取消注册和注册服务工作人员脚本。

if ('serviceWorker' in navigator) {
if (navigator.serviceWorker.controller) {
  navigator.serviceWorker.getRegistration(navigator.serviceWorker.controller.scriptURL).then(function (sw) {
 if (sw) {
sw.unregister().then(() => {
  navigator.serviceWorker.register('service-worker.js');
});
 }
  });
} else {
  const url = window.location.protocol + '//' + window.location.host + '/service-worker.js';
  navigator.serviceWorker.getRegistration(url).then(function (sw) {
 if (sw) {
sw.unregister().then(() => {
  navigator.serviceWorker.register('service-worker.js');
});
 }
  });
}
 }

好了关于硬刷新后注册服务工作者的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。