重新加载页面后 Service Worker 显示为已删除

IT技术 javascript reactjs push-notification progressive-web-apps service-worker
2021-05-11 14:47:39

正在使用 react 并尝试实现 Service Worker,我编写了一个用于推送通知的迷你 Service Worker 文件,当用户单击按钮时正在注册 Service Worker,现在如果我发送推送消息,它会按预期工作,但是当我重新加载时页面,申请中的service worker显示为已删除,注册成功,请参考截图

服务工作者代码

    const self = this;

    function receivePushNotification(event) {
      console.log('[Service Worker] Push Received.');
      console.log(event);

      // const { image, tag, url, title, text } = event.data.json();

      const options = {
        data: '/neworders',
        body: 'New order request',
        vibrate: [200, 100, 200],
        badge: 'https://spyna.it/icons/favicon.ico',
        actions: [
          {
            action: 'Detail',
            title: 'View',
            icon: 'https://via.placeholder.com/128/ff0000',
          },
        ],
      };
      event.waitUntil(self.registration.showNotification('Hello', options));
    }

    function openPushNotification(event) {
      console.log(
        '[Service Worker] Notification click Received.',
        event.notification.data
      );

      event.notification.close();
      event.waitUntil(clients.openWindow(event.notification.data));
    }

    self.addEventListener('install', function (event) {
      console.log({ event });
      // The promise that skipWaiting() returns can be safely ignored.
      self.skipWaiting();

      // Perform any other actions required for your
      // service worker to install, potentially inside
      // of event.waitUntil();
    });

    self.addEventListener('activate', (event) => {
      console.log('V1 now ready to handle fetches!');
    });
    self.addEventListener('push', receivePushNotification);
    self.addEventListener('notificationclick', openPushNotification);

注册服务工作者函数

function registerServiceWorker() {
  return navigator.serviceWorker.register('/newsw.js');
}

Service Worker 删除的截图

Service Worker 删除的截图

2个回答

我怀疑这是因为您打开了“重新加载时更新”。

这会强制 Service Worker 在您重新加载页面时进行更新。在这里阅读更多

我知道它已经有一段时间了,但到达这里遇到了同样的问题,在我的情况下,这是一个时间问题,我刚刚开始了解服务工作者,所以我想在我的测试页面上编写一个取消注册/注册脚本,例如

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.getRegistrations().then(regs=>regs.map(r=>r.unregister()))
    navigator.serviceWorker.register("/modules/service-worker.js")
}

如果你仔细观察,getRegistrations 会返回一个 promise,所以里面的代码(注册)可能不会在注册行之前运行,在我的例子中,很奇怪(对不起我的英语)它在重新加载时交替,一旦删除,一次运行。我通过在链内移动注册来解决这个问题,例如:

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.getRegistrations().then(regs=>{
        regs.map(r=>r.unregister())
        navigator.serviceWorker.register("/modules/service-worker.js")
    })
}

(顺便说一句,这是我的第一个答案:D)