data object in push event is empty

[Isatol]

When the notification is send, the data object in the push event of the service worker is empty:

I have a project made it with Vue and I registered a service worker to receive the notification

The PushSubscription object looks like this:

And PushMessage: {"notification":{"title":"Prueba","body":"Notifiación de prueba","icon":"","vibrate":[],"data":null,"actions":[]}}

Thanks for your help

[tpeczek]

I'll be happy to take a look at it, but first I need to fully understand your issue.

What do you mean by "data object in the push event of the service worker is empty"? From the screenshot it looks like it's a correct PushMessageData instance. Yes it doesn't show the actual notification in debugger, but that's because it doesn't have properties to do so, you should use proper method (https://developer.mozilla.org/en-US/docs/Web/API/PushMessageData#Methods). In your case (if I'm reading correctly) you are trying to send JSON, so what you probably want is something like this:

console.log('Service Worker Push Event Data', evt.data.json());

Does this return what you expect?

[Isatol]

I'll be happy to take a look at it, but first I need to fully understand your issue.

What do you mean by "data object in the push event of the service worker is empty"? From the screenshot it looks like it's a correct PushMessageData instance. Yes it doesn't show the actual notification in debugger, but that's because it doesn't have properties to do so, you should use proper method (https://developer.mozilla.org/en-US/docs/Web/API/PushMessageData#Methods). In your case (if I'm reading correctly) you are trying to send JSON, so what you probably want is something like this:

console.log('Service Worker Push Event Data', evt.data.json());

Does this return what you expect?

Ok amm... i send a post request to an API for save the keys(auth and p256dh), so far so good... Then in my BackgroundService I have a method to send a Notification. The pushMessage object is identically as you recommend... And now... you have a guide in Telerik but for angular, I have adapted the service worker to vue and looks like this... The method for send the notification is:

In another guides for create and receive a notification from service worker, they uses evt.data.json()... but when i inspect the console for the push listener, the data is empty and does not include what it should be the PushMessage object from the back-end... Or something I am doing wrong?

----UPDATE---- evt.data.json() now shows the notification... I had no idea it was like that... inspected every part of data, and I never saw that I had data that I had sent from the back-end... So thank you so much for your answer, it helped me a lot to understand the PushMessageData.

[tpeczek]

I'm happy you get it working. What data holds is always an instance of PushMessageData, but that's a JS type completely unrelated to the type on the server side. This is probably the source of confusion, but this is how Push works on the client side :).

[RouR]

I have same issue - evt.data is empty object {} and evt.data.json() is throw exception Unexpected token u in JSON at position 0

[tpeczek]

Hi @RouR, you would need to share some code (the best would be smallest working reproduction) so I can take a look at it. THe only blind guess I may have based on the error message is that your Push Message is not a properly formatted JSON.