Javascript 显示服务工作者状态的消息

上周我一直在使用ServiceWorker，目前有一个很棒的安装，可以离线缓存文件和推送通知

还有最后一件事，我希望能够在UI中显示service worker某些状态的消息，目前我有以下激活状态的代码：

if ('serviceWorker' in navigator) {
navigator.serviceWorker.addEventListener('controllerchange',function(event) {
  navigator.serviceWorker.controller.addEventListener('statechange', function() {
if (this.state === 'activated') {
  document.getElementById('offlineNotification').classList.remove('hidden');
}
});
});
}

现在我想为安装状态创建一条消息，允许我显示一条类似于“脱机服务正在更新”的消息，如果有人正在处理此问题，并且知道如何操作，请告诉我

我已经尝试了相同的代码，但是使用了“if（this.state=='installing'）”

及

“如果（this.state==‘安装’”

---

两者似乎都不起作用。

服务人员的生命周期与您的网页完全不同。 要为您的站点安装service worker，您需要注册它

self.addEventListener('install', function(event) {
    // Perform install steps
});

安装后，将执行激活步骤，这是处理旧缓存的任何管理的绝佳机会

self.addEventListener('activate', function(event) {
    // Perform activate steps, Typically cache management.
});

在激活步骤之后，服务工作者将控制其范围内的所有页面，尽管首次注册服务工作者的页面在再次加载之前不会被控制

一旦服务工作者处于控制状态，它将处于两种状态之一：

服务工作者将被终止

以节省内存，或者

它将处理从您的页面发出网络请求或消息时发生的获取和消息事件

。 你也可以尝试一下

if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js').then(function(reg) {
        // updatefound is fired if service-worker.js changes.
        reg.onupdatefound = function() {
          var installingWorker = reg.installing;

          installingWorker.onstatechange = function() {
            switch (installingWorker.state) {
              case 'installed':
                if (navigator.serviceWorker.controller) {
                  // At this point, the old content will have been purged and the fresh content will have been added to the cache.
                  // It's the perfect time to display a "New content is available; please refresh."
                  console.log('New or updated content is available.');
                } else {
                  // At this point, everything has been precached.
                  // It's the perfect time to display a "Content is cached for offline use." message.
                  console.log('Content is now available offline!');
                }
                break;

              case 'redundant':
                console.error('The installing service worker became redundant.');
                break;
            }
          };
        };
      }).catch(function(e) {
        console.error('Error during service worker registration:', e);
      });
    }

---

服务工作者的生命周期与您的网页完全分离。 要为您的站点安装service worker，您需要注册它

self.addEventListener('install', function(event) {
    // Perform install steps
});

安装后，将执行激活步骤，这是处理旧缓存的任何管理的绝佳机会

self.addEventListener('activate', function(event) {
    // Perform activate steps, Typically cache management.
});

在激活步骤之后，服务工作者将控制其范围内的所有页面，尽管首次注册服务工作者的页面在再次加载之前不会被控制

一旦服务工作者处于控制状态，它将处于两种状态之一：

服务工作者将被终止

以节省内存，或者

它将处理从您的页面发出网络请求或消息时发生的获取和消息事件

。 你也可以尝试一下

if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js').then(function(reg) {
        // updatefound is fired if service-worker.js changes.
        reg.onupdatefound = function() {
          var installingWorker = reg.installing;

          installingWorker.onstatechange = function() {
            switch (installingWorker.state) {
              case 'installed':
                if (navigator.serviceWorker.controller) {
                  // At this point, the old content will have been purged and the fresh content will have been added to the cache.
                  // It's the perfect time to display a "New content is available; please refresh."
                  console.log('New or updated content is available.');
                } else {
                  // At this point, everything has been precached.
                  // It's the perfect time to display a "Content is cached for offline use." message.
                  console.log('Content is now available offline!');
                }
                break;

              case 'redundant':
                console.error('The installing service worker became redundant.');
                break;
            }
          };
        };
      }).catch(function(e) {
        console.error('Error during service worker registration:', e);
      });
    }

---

查看ServiceWorker Cookbook上的和用于在有更新时通知用户的电报。

查看ServiceWorker Cookbook上的和用于在有更新时通知用户的电报。

这是因为代码中的

此
始终指激活的
se为您的页面提供服务

navigator.serviceWorker.controller
将只引用您页面的一个服务工作者，即当前处于控制状态的服务工作者。如果在该服务工作者控制您页面的同时安装了另一个服务工作者，那么它将在
ServiceWorkerRegistration
的另一个字段中“排队”>（即，
安装
或
等待
）

您想要的是在
updatefound
事件处理程序（而不是
controllerchange
）中引用此
ServiceWorkerRegistration
（而不是
navigator.serviceWorker.controller
）上的各种状态：

我相信只有当控制器合法更改时才会调用
controllerchange
，这只有在您通过
skipWaiting（）
和
clients.claim（）在服务工作者中明确声明对客户端的控制时才会发生
或者如果你在开发工具中摆弄，强迫新的服务人员控制。因此，你永远不会看到
在该控制器上安装
，因为它已经超越了
安装
，
安装
，以及
激活
，以触发
控制器更改
事件。

一些有用的链接：





这是因为您的代码中的
此
总是指为您的页面激活的
服务人员

navigator.serviceWorker.controller
将只引用您页面的一个服务工作者，即当前处于控制状态的服务工作者。如果在该服务工作者控制您页面的同时安装了另一个服务工作者，那么它将在
ServiceWorkerRegistration
的另一个字段中“排队”>（即，
安装
或
等待
）

您想要的是在
updatefound
事件处理程序（而不是
controllerchange
）中引用此
ServiceWorkerRegistration
（而不是
navigator.serviceWorker.controller
）上的各种状态：

我相信只有当控制器合法更改时才会调用
controllerchange
，这只有在您通过
skipWaiting（）
和
clients.claim（）在服务工作者中明确声明对客户端的控制时才会发生
或者如果你在开发工具中摆弄，强迫新的服务人员控制。因此，你永远不会看到
在该控制器上安装
，因为它已经超越了
安装
，
安装
，以及
激活
，以触发
控制器更改
事件。

一些有用的链接：





正如我在OP中所说，我已经知道如何安装service worker，并且我已经安装了service worker，我不需要编写lol。我需要的是在UI中显示更新通知的某种方式（即：不是控制台日志，而是实际的网页），正如我在OP中所说的那样，就像你可以激活一样。区分更新和第一次安装正是我所需要的