硬刷新后注册服务工作者-前端问题

Register service worker after hard refresh(硬刷新后注册服务工作者)

本文介绍了硬刷新后注册服务工作者的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

只要在硬刷新后(例如，对于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');
            });
          }
        });
      }
    }

这篇关于硬刷新后注册服务工作者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！