javascript - 无法在 Chrome 中安装服务 worker

Question

我正尝试在 localhost:3000 上使用 Chrome 中的服务 worker 。我的应用程序使用的是 AngularJS 1.5。

Service Worker 状态未激活。从安装到冗余。

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 phase: installing

ServiceWorker phase: redundant

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

Answer 1

我遇到了同样的问题，我是这样解决的:

• 浏览正在运行 service worker 的页面
• 在 Chrome 浏览器中导航到 chrome://inspect/#service-workers
• 找到你的 service worker，它处于冗余状态并点击终止

• 刷新包含 service worker 的页面

• 打开开发人员控制台，转到“应用程序”选项卡，然后转到“服务 worker ”部分。您现在应该会看到服务人员的绿色图标。

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

  self.addEventListener("激活", 函数(事件) {
event.waitUntil(self.clients.claim());
});