get and show push data from serviceworker in chrome

Question

I use pushwoosh for receive push notification in my web app. every things working well and received push message in serviceworker listener but I want give push messge data from serviceworker and process it in another js class

main.js like this:

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 like this :

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

Using a *service* worker for this seems odd. Why that rather than a standard worker? — T.J. Crowder, Jul 02 '16 at 06:00
I can't find evidence of that on their website, but whatever. Presumably if they do, they have a reason. — T.J. Crowder, Jul 02 '16 at 06:21

score 6 · Accepted Answer · edited May 23 '17 at 12:15

6

As I mentioned in a comment, this seems a slightly odd use-case for a service worker rather than a standard worker, but:

You can have your service worker send a message to all connected clients when it gets a message pushed to it.

This answer shows a complete example of a service worker talking to clients, but fundamentally:

The pages it manages listen for messages:

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

The service worker sends to them like this:

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

Or with ES5 and earlier syntax (but I don't think any browser supporting service workers doesn't also support arrow functions):

Page listening:

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

Worker sending:

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

edited May 23 '17 at 12:15

Community

1
1

answered Jul 02 '16 at 06:17

T.J. Crowder

1,031,962
187
1,923
1,875

thanks for response .i put first code in html page and secend code under self.addEventListener('push', function(event) but client (html page) not give any message from serviceworker – Reza Mazarlou Jul 02 '16 at 06:50
@Roox: The above definitely works, but you have to remember the lifecycle of service workers, in particular the fact that the page that installs the worker doesn't then become a client of the worker until/unless it's refreshed. I'm still not at all sure a service worker is correct for this, but that's up to you. – T.J. Crowder Jul 02 '16 at 07:16
clients.matchAll() return a empty array – Reza Mazarlou Jul 02 '16 at 07:34
@Roox: So clearly no clients are attached to the worker when it receives the push. Again, using a service worker for this just doesn't make sense. I'm not even seeing the need for a web worker at all. – T.J. Crowder Jul 02 '16 at 07:39
for me, this code is not working. event.data is always empty. – Tun Sep 12 '16 at 10:17

get and show push data from serviceworker in chrome

1 Answers1