无法在 Chrome 中安装 service worker答案

【问题标题】：Cannot install service worker in Chrome无法在 Chrome 中安装 service worker
【发布时间】：2016-12-18 08:49:16
【问题描述】：

我正在尝试在 localhost:3000 上的 Chrome 中使用服务工作者。我的应用正在使用 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 阶段：安装

ServiceWorker 阶段：冗余

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

【问题讨论】：

如果sw变得多余，说明注册表中的sw no有错误。如果您向您展示 sw 代码，它会更容易帮助您。
尝试关闭您网页的所有选项卡。仅当没有活动选项卡在使用 Service Worker 时才会重新安装。
service worker install event is called before register event is completed的可能重复
遇到同样的问题，你找到解决办法了吗？

标签： javascript angularjs service-worker progressive-web-apps

【解决方案1】：

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

浏览页面，该页面正在运行 Service Worker
在 chrome 浏览器中导航到 chrome://inspect/#service-workers
找到处于冗余状态的 Service Worker，然后单击终止

刷新您的页面，其中包含服务人员
打开开发者控制台，转到应用程序选项卡，然后转到服务工作者部分。您现在应该会看到您的 Service Worker 的绿色图标。
在您的 SW 中添加以下功能

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

【讨论】：