Question

我已经使用.register注册了服务woker，可以在dev工具的Application选项卡中看到。现在我的问题是如何取消注册这个服务工作者。

我已经运行了这个脚本

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();
        });
}

但是我看到，通过这样做，我们实际上是首先注册服务工作者然后取消注册它。这对我来说似乎不是正确的方法。

或者，我可以点击开发工具应用程序＆gt;中的服务工作者附近的取消注册链接。服务工作者并单击应用程序＆gt;清除存储并在新选项卡中重新打开URL。

但是当我查看 chrome：// serviceworker-internals /

它显示列表底部的旧的和未注册的服务工作者列表（见图）

那么为什么我在这里看到冗余服务工作者列表？什么时候会更新？这是Chrome浏览器的默认行为。

Answer 1

您应指定 为什么 取消注册服务工作者。

我想有两种可能性：

您希望摆脱/service-worker.js文件并完全删除SW
您希望拥有新的/更新的SW并替换上一个

第一种情况：查看此答案：How do I uninstall a Service Worker?

第二种情况：您不必取消注册旧SW，只需更新/service-worker.js中的代码并将其注册在旧版本之上。这是通常的情况。新的，更新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相关的内容出错并完全淹没您的网站：）

Answer 2

可能是我在以下链接的答案将帮助您解决您的疑问。

Stackoverflow链接：Unregistering/Removing a Service Worker

LINK：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(); }
            }
        });
}

如何取消注册和删除旧的服务工作者？

2 个答案: