无法在Chrome中安装服务工作者

Question

我正在尝试在 localhost：3000 上使用Chrome中的服务工作者。 我的应用正在使用AngularJS 1.5。

服务工作者状态未激活。它从安装到冗余。

if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('/service-worker.js')
    .then(function(registration) {
        var serviceWorker;
        if (registration.installing) {
            serviceWorker = registration.installing;
        } else if (registration.waiting) {
            serviceWorker = registration.waiting;
        } else if (registration.active) {
            serviceWorker = registration.active;
        }

        if (serviceWorker) {
            console.log("ServiceWorker phase:", serviceWorker.state);

            serviceWorker.addEventListener('statechange', function (e) {
                console.log("ServiceWorker phase:", e.target.state);
            });
        }
    })
    .catch(function(err) {
        console.log('Service Worker Error', err);
    });
}

上述脚本的输出：

  

ServiceWorker阶段：安装

     

ServiceWorker阶段：冗余

<{> service-worker.js位于http://localhost:3000/service-worker.js。我没有看到任何错误消息。我做错了什么？

Answer 1

我遇到了同样的问题，这就是我解决它的方法：

• 浏览正在运行服务工作者的页面
• 在Chrome浏览器中导航到chrome://inspect/#service-workers
• 找到处于冗余状态的服务工作者，然后单击终止

• 刷新您的页面，其中有服务人员

• 打开开发人员控制台，转到“应用程序”选项卡，然后进入“服务工作者”部分。您应该现在就可以看到服务人员的绿色图标。

• 在您的软件中添加以下功能

  self.addEventListener("activate", function(event) { event.waitUntil(self.clients.claim()); });