Question

这是我第一次使用服务工作者和通知。

我正在尝试在指定时间显示通知。我尝试在服务工作者中进行如下操作：

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函数时，我收到通知，所以我认为它与超时有关。还有其他办法还是我错过了什么？

谢谢！

Answer 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);    
});

希望这有帮助！

Javascript服务工作者通知超时

1 个答案: