無法在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
• 找到處於冗余狀態的服務工作者，然后單擊“終止”

• 刷新包含服務工作者的頁面

• 打開開發者控制台，轉到應用程序選項卡，然后轉到服務工作者部分 您現在應該看到服務人員的綠色圖標。

• 在SW中添加以下功能

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