Javascript Service Worker 通知超时

Posted 2023-02-23

【中文标题】Javascript Service Worker 通知超时

【英文标题】：Javascript service worker notification timeout

【发布时间】：2018-04-15 06:48:30

【问题描述】：

这是我第一次与服务人员和通知合作。

我正在尝试在指定时间显示通知。我尝试在服务人员中这样做：

function showNotification() 
    setTimeout(function () 
        self.registration.showNotification('Title', 
            body: 'body blablabla',
            badge: 'assets/images/logo.jpeg',
            icon: 'assets/images/logo.jpeg',
            renotify: false,
            requireInteraction: true,
            silent: false,
            vibrate: [200, 100, 200],
            dir: 'ltr',
            lang: 'en-US'
        );
    , 3000);

如果我尝试这个，我不会收到任何通知。当我删除 setTimeout 函数时，我确实收到了一个通知，所以我认为它与超时有关。还有其他方法还是我错过了什么？

谢谢！

【参考方案1】：

在我的 Chrome javascript 函数（Service Worker 之外）中调用该函数实际上适用于我的情况，我尝试过这种方式：

function showNotification() 
  navigator.serviceWorker.getRegistration().then(registration => 
    setTimeout(() => 
        registration.showNotification('Title', 
            body: 'body blablabla',
            badge: '/images/icon-light.png',
            icon: '/images/icon-light.png',
            renotify: false,
            requireInteraction: true,
            silent: false,
            vibrate: [200, 100, 200],
            dir: 'ltr',
            lang: 'en-US'
        );
    , 3000);
  );

从 SW 调用 showNotification 也可以，我只是尝试使用以下代码以及 Chrome Devtools 控制台按钮中的 Applications -> Service Workers -> Push 发送推送通知，然后在 3 秒后显示它：

self.addEventListener('push', function(event) 
  if (event.data) 
    console.log('This push event has data: ', event.data.text());
   else 
    console.log('This push event has no data.');
  

  setTimeout(() => 
    self.registration.showNotification(
      'Title',
      
        body: 'body blablabla',
        badge: '/images/icon-light.png',
        icon: '/images/icon-light.png',
        renotify: false,
        requireInteraction: true,
        silent: false,
        vibrate: [200, 100, 200],
        dir: 'ltr',
        lang: 'en-US'
      
    ); 
  , 3000);    
);

希望这会有所帮助！

【讨论】：

这可能会意外失败，因为浏览器可能会决定杀死服务人员以节省资源。您需要使用 waitUntil 来确保 serviceworker 在超时触发之前保持活动状态。即使这样，浏览器也可能决定在超时中间终止服务工作者。等待时间越长，机会越大。这是一件好事。想象一下，您访问过的每个页面都有一个服务工作者，每个服务工作者都会不断触发超时以发回一些分析。