如何注销并移除旧的Service Worker？

Question

我使用 .register 注册了一个 Service Worker，并在开发工具的应用程序选项卡中看到了它。现在我的问题是如何取消注册这个 Service Worker。

我运行了以下脚本：

if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
                console.group('====SW registration=======');
                navigator.serviceWorker.register('/sw.js', {scope: './'}).then(function(registration) {
                    console.log('SW registratered successfully');
                    console.log(registration);
                    registration.unregister().then(function(result) {
                        console.log('Unregistered done', result);
                    });
                }).catch(function(error){
                    console.error('sw registration failed', error);
                });
                console.groupEnd();
        });
}

但是我发现这样做，我们实际上是先注册服务工作者，然后注销它。这对我来说似乎不是正确的方式。

或者，我可以在开发工具中的服务工作者附近单击“注销”链接服务工作者，然后也单击应用程序>清除存储，并在新选项卡中重新打开URL。

但是，当我通过chrome：//serviceworker-internals/进行检查时，

它会在列表底部显示旧的和未注册的服务工作者列表（请参见图像）。

那么为什么我在这里看到多余的服务工作者列表？它何时更新？这是Chrome浏览器的默认行为吗？

- diEcho

Answer 1

您应该说明为什么要注销Service Worker。

我想有两种可能性：

• 您想摆脱/service-worker.js文件并完全删除SW
• 您想要一个新的/更新的SW并替换之前的SW

第一种情况： 请查看此答案：如何卸载Service Worker？

第二种情况： 您无需注销旧的SW，只需在/service-worker.js中更新代码并在旧代码之上注册即可。这是通常的情况。新的、更新的SW将接管，而过时的SW将消失。 我建议您非常仔细地阅读这些教程: https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

我强调仔细，因为很容易出现SW相关问题，并完全破坏您的网站：）

- pate

Answer 2

也许下面链接中的答案能帮助您解决问题。

Stackoverflow 链接: 取消注册/移除服务工作者 链接: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/unregister 如果您想更新服务工作者代码，请使用https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/update。

以下代码将删除服务工作者（取消注册）。

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.getRegistrations()
        .then(function(registrations) {
            for(let registration of registrations) {
               if(registration.active.scriptURL == 'http://localhost/my-push/myworker.js'){ registration.unregister(); }
            }
        });
}

- Akhilesh Kumar