Use data from Push in Web Push Notifications

Question

I am trying to setup a demo for Web Push Notifications using Service Workers. In the service worker, sw.js, I have the following code.

var title = 'Yay a message.';
var body = 'We have received a push message.';
var icon = 'icon.png';
var tag = 'simple-push-demo-notification-tag';

console.log("Hello!");

self.addEventListener('push', function(event) {
event.waitUntil(
    self.registration.showNotification(title, {
        body: body,
        icon: icon,
        tag: tag
    })
);
});

This works okay. I wish to receive data that I have sent with my push cURL request like title and more. Is there any way to get all that data here in this waitUntil method?

Any help is highly appreciated.

score 4 · Accepted Answer · edited Oct 07 '21 at 07:24

4

There are two ways:

Push payload (example https://serviceworke.rs/push-payload.html). This is more complex and is currently ~~only~~ supported in Firefox and chrome v50. You can attach a payload to a push message and access it through the data property of the event (https://developer.mozilla.org/en-US/docs/Web/API/PushMessageData).

The payload needs to be encrypted (https://datatracker.ietf.org/doc/html/draft-thomson-webpush-encryption-01), using a library to take care of the encryption details is highly suggested (e.g. for Node.js https://github.com/marco-c/web-push).

The push event handler in this case would be (assuming the payload is sent as a JSON message):

    var data = event.data.json();

    event.waitUntil(
      self.registration.showNotification(data.title, {
        body: data.body,
        icon: data.icon,
        tag: data.tag,
      })
    );

A GET request to your server to get the data. For example, assuming that your server returns a JSON response:

event.waitUntil(
  fetch('someURL')
  .then(response => response.json())
  .then(data =>
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: data.icon,
      tag: data.tag,
    })
  )
);

edited Oct 07 '21 at 07:24

Community

1
1

answered Jan 20 '16 at 13:26

Marco Castelluccio

10,152
2
33
48

Is there anyway to make first procedure work in Chrome? – Samarth Agarwal Jan 20 '16 at 13:52
Not currently, Chrome doesn't support push payload yet: https://code.google.com/p/chromium/issues/detail?id=568106 – Marco Castelluccio Jan 20 '16 at 17:08
Looks like it is possible by enabling some experimental features in Chrome. https://gauntface.com/blog/2014/12/15/push-notifications-service-worker . I can't get it to work though. – Samarth Agarwal Jan 21 '16 at 19:20
That's pretty old, I guess things have changed since that post. There's an experimental GCM endpoint that might support it, see http://www.ietf.org/mail-archive/web/webpush/current/msg00238.html. I think an agreement has been reached to use P-256, but I don't know if they've updated the server. – Marco Castelluccio Jan 22 '16 at 00:09

score 0 · Answer 2 · answered Jan 26 '16 at 13:47

0

Wait until Chrome 49 comes out: Mar 8th, 2016

Like said in this article: https://www.chromestatus.com/features/5746279325892608, chrome will implement payloads

answered Jan 26 '16 at 13:47

Jonathan Martins

734
7
24

I am really close to implementing it using Chrome Canary and enabling some experimental features. I am stuck at encrypting the payload. Just can't get it to work. – Samarth Agarwal Jan 26 '16 at 17:24

Use data from Push in Web Push Notifications

2 Answers2