Push Notifications with data on push Event

Question

I am trying to push notifications using GCM,able to show notifications with hard coded data or message on Push Event.But when I tried to push custom messages using data object as Json,Push event is triggering but ,data object always shoeing as null.

Service worker code:sw.js

 self.addEventListener('push', function(event) {
 console.log('Received a push message', event);
 console.log("event data",event.data);//here data is giving as null
var data=event.data.json();
var title= data.title||'No tiltle';
 var body= data.message||'no messgae';

event.waitUntil(
self.registration.showNotification(title, {
  body: body,
  icon: icon,
  tag: tag


  })
  );
  });

am using third party site(requestmaker.com) to check the notifications. format am sending like below

 URL:https://android.googleapis.com/gcm/send
 content-type:application/json
 authorization:key=XXXXXXXXXX

below is data format

 {
 "registration_ids":["someid"],
    "data":{"title":"hai",
    "body":"hello new message"
   }
 }

How can i get data in Push Event and in which format i have to send data as request sothat i can get that data on push event(event.data).

Answer 1

You can access the data on notification click trigger event.

self.addEventListener('notificationclick', function(event) {

 // here data you access from event using event.notification.data
  console.log('On notification click: ', event.notification.tag);

}

Answer 2

From the push notification triggered, the payload data wont be sent across to the service worker. You will have to use browser auth keys while triggering the push notification for the payload to be sent across.

Please refer the documentation below for details. https://developers.google.com/web/updates/2016/03/web-push-encryption?hl=en