从serviceworker中获取和显示推送数据

get and show push data from serviceworker in chrome

本文关键字：数据 显示 serviceworker 获取      更新时间：2023-09-26

我使用pushwoosh在我的web应用程序中接收推送通知。每件事都工作得很好，在serviceworker监听器中收到了推送消息，但我想从serviceworker中获得推送消息数据，并在另一个js类

中处理它

main.js:

if ('serviceWorker' in navigator) {
  console.log('Service Worker is supported');
  navigator.serviceWorker.register('sw.js').then(function() {
    return navigator.serviceWorker.ready;
  }).then(function(reg) {
    console.log('Service Worker is ready :^)', reg);
      // TODO
  }).catch(function(error) {
    console.log('Service Worker error :^(', error);
  });
}
// get push message data in main.js and process it

service worker:

self.addEventListener('push', function(event) {
  console.log('Push message', event);
  var title = 'Push message';
  event.waitUntil(
    self.registration.showNotification(title, {
      'body': 'The Message',
      'icon': 'images/icon.png'
    }));
});

正如我在评论中提到的，对于service worker而不是标准worker来说，这个用例似乎有点奇怪，但是:

你可以让service worker在收到推送消息时向所有连接的客户端发送消息。

这个答案显示了一个service worker与客户端对话的完整示例，但基本上:

  1. 它管理的页面侦听消息:

    navigator.serviceWorker.addEventListener('message', event => {
    // use `event.data`
});

  2. service worker这样发送给它们:

    self.clients.matchAll().then(all => all.forEach(client => {
    client.postMessage(/*...message here...*/);
}));

或者使用ES5和更早的语法(但我不认为任何支持service worker的浏览器都不支持箭头函数):

页面听:

navigator.serviceWorker.addEventListener('message', function(event) {
    // use `event.data`
});

工人发送:

self.clients.matchAll().then(function(all) {
    all.forEach(function(client) {
        client.postMessage(/*...message here...*/);
    });
});

相关文章：