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

Posted 2023-02-24

【中文标题】重新加载页面后，Service Worker 显示为已删除

【英文标题】：Service Worker showing as deleted after reloading the page

【发布时间】：2021-06-30 17:34:57

【问题描述】：

我正在使用 react 并尝试实现 service worker，我为推送通知编写了一个 mini 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 删除截图

【参考方案1】：

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

这会强制服务工作者在您重新加载页面时进行更新。 （阅读更多here）

【讨论】：

请编辑您的答案并简要总结您提供的链接的内容。请记住，此类内容以后可能不再可用。阅读How to Answer。

@hkh12 抱歉，这对我的问题没有帮助

【参考方案2】：

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

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

如果您仔细观察，getRegistrations 返回一个承诺，因此其中的代码（注册）可能不会在注册行之前运行，在我的情况下，非常奇怪（对不起我的英语）它在重新加载时交替出现，一旦删除，一旦运行。 我通过在链中移动注册来解决这个问题：

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

（顺便说一句，这是我的第一个答案：D）