Javascript 在何处放置serviceworker的eventlisteners

基本上，我试图在检测到新的serviceworker版本时显示一个对话框，然后让用户决定重新加载以获取它。要实现这一点，我们需要在重新加载窗口之前主动设置

skipWaiting

以下是我的行动：

  onClickHandler = () => {
    console.log('on click', 'posting skipWaiting');
    navigator.serviceWorker.controller.postMessage('skipWaiting');
  };

下面是我创建eventListener的尝试：

navigator.serviceWorker
    .register(swUrl)
    .then(registration => {
      registration.onupdatefound = () => {
        const installingWorker = registration.installing;
        if (installingWorker == null) {
          return;
        }
        installingWorker.onstatechange = () => {
          console.log('worker state', installingWorker.state);
          if (installingWorker.state === 'installed') {
            if (navigator.serviceWorker.controller) {
              console.log(
                'New content is available and will be used when all ' +
                  'tabs for this page are closed.'
              );

              navigator.serviceWorker.addEventListener('message', event => {
                console.log('skip waiting');
                if (event.data === 'skipWaiting') {
                  self.skipWaiting();
                }
              });
            }
          }
        };
      };
    })
    .catch(error => {
      console.error('Error during service worker registration:', error);
    });

---

问题是没有触发

navigator.serviceWorker.addEventListener（'message'，event=>

）。我是否声明侦听器错误？

您已关闭。在已安装的块中，您可以检查

navigator.serviceWorker.controller

如果存在，则意味着旧内容将被清除，新内容将被添加到缓存中。这是显示消息或强制刷新的最佳时机

  navigator.serviceWorker.register('service-worker.js').then(function (registration) {

                    $log.debug('The service worker has been registered ', registration);

                    if(navigator.online) {
                        toastr.warning('Offline Mode', 'Application Status');
                    }

                    // updatefound is fired if service-worker.js changes.
                    registration.onupdatefound = function () {
                        // The updatefound event implies that reg.installing is set; see
                        // https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#service-worker-container-updatefound-event
                        var installingWorker = registration.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."
                                        // message in the page's interface.
                                        toastr.info('Application has been updated, please refresh this page for the most recent version');

                                        window.location.reload();

                                        });
                                        caches.delete('scope-dynamic').then(function () {
                                            $log.debug('Killed the dynamic cache!');
                                        })
                                        $log.debug('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.
                                        toastr.success('Content is cached for offline use.', 'Application Status');
                                        $log.debug('Content is now available offline!');
                                    }
                                    break;

                                case 'redundant':
                                    $log.error('The installing service worker became redundant.');
                                    break;

                            }
                        };
                    };
                }).catch(function (e) {
                    $log.error('Error during service worker registration:', e);
                });

---

这里有一些有棱角的东西，但这应该可以帮助你到达你想要的地方。

这里的问题是，你提供的代码只定义了从你的客户机向服务人员接收和发送消息

navigator.serviceWorker.addEventListener('message', event => {
    console.log('skip waiting');
    if (event.data === 'skipWaiting') {
        self.skipWaiting();
    }
});

下面的方法已定义要发送给控制器（活动）服务人员的消息

onClickHandler = () => {
    console.log('on click', 'posting skipWaiting');
    navigator.serviceWorker.controller.postMessage('skipWaiting');
};

下面的定义在ServiceWorker容器上添加了一个事件侦听器，用于接收从ServiceWorker发送的任何消息

navigator.serviceWorker.addEventListener('message', event => {
    console.log('skip waiting');
    if (event.data === 'skipWaiting') {
        self.skipWaiting();
    }
});

现在需要从服务工作者文件中定义事件处理程序来接收和发送消息

在service worker文件中，要从客户端接收消息，请执行以下操作：

self.addEventListener('message', function handler (event) {
   console.log('skip waiting');
   if (event.data === 'skipWaiting') {
      self.skipWaiting();
   }
});

要从serviceworker向客户端发送消息，请执行以下操作：

self.addEventListener('fetch', function(event) {
  self.clients.matchAll().then(all => all.map(client => client.postMessage('data from webworker')));
});

您还可以使用MessageChannel从serviceworker发回数据。在您的客户端上，您必须定义如下内容：

    navigator.serviceWorker
        .register(swUrl)
        .then(registration => {
            var messageChannel = new MessageChannel();
            // listener for messages from the ServiceWorker    
            messageChannel.port1.addEventListener('message', (event) => console.log(event.data)); 

            function sendMessage (message) {
                //send message to the active service worker
                navigator.serviceWorker.controller.postMessage(message, [messageChannel.port2]);
            }
      onClickHandler = () => {
          sendMessage('skipWaiting');
      };
   });

我发现下面的文章很有帮助

---

您的

控制台.log（）

似乎在

末尾缺少引号。此页的选项卡已关闭。

这是一个输入错误，我已更正。是否可以在JS主线程中侦听

消息

事件？