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).

score 1 · Answer 1 · answered Sep 24 '16 at 07:29

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

}

answered Sep 24 '16 at 07:29

bvakiti

3,243
4
17
26

2

Want to show notifications on push event with that data as a message. 'notificationclick' event happens only after the notification popup comes and when we click on it rite. – venugopal Sep 26 '16 at 07:40
check if notification is granted or not using (!(self.Notification && self.notification.permission === 'granted')) { return; } – bvakiti Sep 26 '16 at 14:00

score 1 · Answer 2 · answered Sep 28 '16 at 14:24

1

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

answered Sep 28 '16 at 14:24

Nithya

204
1
7

@Nitya: actually followed that link ,Encrypted the message then am getting 200 ok response but now the Push event is not triggering. – venugopal Sep 29 '16 at 13:50
@venugopal: I had tried https://github.com/web-push-libs/web-push library for sending with and without payload to firefox and chrome. May be try this library for sending with payload. Try the below link for usage details. Its really helpful with decent documentation and demo. https://serviceworke.rs/push-get-payload_server_doc.html – Nithya Oct 03 '16 at 07:19
Am using web push java library(https://github.com/MartijnDwars/web-push/blob/master/src/main/java/nl/martijndwars/webpush/PushService.java).So it is giving 200 Ok response but no event triggered. – venugopal Oct 05 '16 at 07:49
var rawKey = pushSubscription.getKey ? pushSubscription.getKey('p256dh') : ''; console.log('rawkwy',rawKey); var key = rawKey ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawKey))) : ''; var rawAuthSecret = pushSubscription.getKey ? pushSubscription.getKey('auth') : ''; var authSecret = rawAuthSecret ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawAuthSecret))) : – venugopal Oct 05 '16 at 07:53
var content = { "registration_ids" : subId, "endpoint" :endpoint, "authKey":authKey, "PublicKey256":userkey256, "data.title":"hello" }; $.ajax({ type : "POST", url : "/callGCM", dataType : "json", data : content, success : function(data) { alert("success"); }, error : function(e) { alert("error"+e); } – venugopal Oct 05 '16 at 07:54
@Server side: in PushService.java from above mentioned git link file – venugopal Oct 05 '16 at 07:58
In send() method: headers.put("Access-Control-Allow-Origin", "http://localhost:8080"); headers.put("Authorization", gcmApiKey); List nameValuePair = new ArrayList(); nameValuePair.add(new BasicNameValuePair("registration_id", regIds)); httpPost.setEntity(new UrlEncodedFormEntity(nameValuePair)); // httpPost.setHeader("registration_id", regIds); return httpClient.execute(httpPost); }' – venugopal Oct 05 '16 at 08:02

Push Notifications with data on push Event

2 Answers2