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).
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);
}
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
Related
I need to send data from my BE to FE when an event happen, so I have created an Event Emitter and in the Fucntion i would like to send a Broadcast message to all the client (the message is an Array of Object), this is my code but unfortunately doesn't work properly.
emitter.on('readData', function(){
wss.broadcast = function(data) {
wss.clients.forEach(client => client.send(Object));
};
});
Ok instead of broadcasting, you are defining a function to broadcast.
emitter.on('readData', function(){
wss.clients.forEach(client => client.send(Object));
});
More details here.
How we can get event fired in service worker in our angularjs app.
Here is sample code which is working and showing notification in chrome/firefox
self.addEventListener('push', function(event) {
console.log('[Service Worker] Push Received.');
// console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);
console.log(event.data);
console.log(event.data.json());
console.log(typeof (event.data.json()));
console.log(event);
window.dispatchEvent( new Event('dataisthere') );
const title = 'YummZ';
const options = {
body: 'Message Received \n ' + event.data.json().message,
icon: 'images/icon.png',
// badge: 'images/badge.png',
data : event.data.json()
};
event.waitUntil(self.registration.showNotification(title, options));
});
I tried to dispatch a window event but i got error window is undefined
when service worker get push notification, i need to notify my angular app to perform action.
NOTE: NEW TO SERVICE WORKER
Have a read on this. Havent tested it yet but I think the general idea for the solution you are looking for is there. The title says How to Send Messages Between Service Workers and Clients, so if you manage to bridge that gap, you can pretty much tell your service worker to do whatever you want.
I have made multiple attempts to get desktop notifications working in Chrome, but I have not found a single source of documentation that covers a step by step procedure to get desktop notifications to work correctly. Each resource I have come across is either outdated or inconsistent with others.
The problem I am facing is: once the Service Worker receives the push event,
self.addEventListener('push', function (event) {
console.log(event);
event.waitUntil(
self.registration.showNotification(
event.data.title,
{
body: event.data.body,
icon: event.data.icon,
tag: event.data.tag
}));
});
event.data is null. I expect it to have data that I am sending as JSON in a POST request like this:
POST https://fcm.googleapis.com/fcm/send HTTP/1.1
Content-Type: application/json
Authorization: key=<FCM Server Key here>
{
"data": {
"title": "Foo",
"body": "Bar"
},
"to": "<recipient ID here>"
}
The weird thing is the registration script gets a "subscription endpoint" that looks like https://android.googleapis.com/gcm/<recipient ID here>, but I cannot get the POST to go through unless I follow other examples on the web that say to put the recipient ID as the to field in the JSON I am sending.
Of all the examples I have come across, there are multiple URLs that POST calls are being made to:
https://fcm.googleapis.com/fcm/send
https://android.googleapis.com/gcm/send
https://gcm-http.googleapis.com/gcm/send
I have tried all three, with each attempt having the recipient at the end of the API address (like https://fcm.googleapis.com/fcm/send/<recipient ID here> and alternatively in the JSON body. My goal is to get Foo and Bar from the data I am sending into the self.registration.showNotification( method of the service worker.
Why is event.data null? Can anyone point me to a complete guide from start to finish that favors FCM over GCM? Any help would be appreciated.
You may want to check the following statement from the documentation,
A downside to the current implementation of the Push API in Chrome is that you can't send any data with a push message. Nope, nothing. The reason for this is that in a future implementation, payload data will have to be encrypted on your server before it's sent to a push messaging endpoint. This way the endpoint, whatever push provider it is, will not be able to easily view the content of the push message. This also protects against other vulnerabilities like poor validation of HTTPS certificates and man-in-the-middle attacks between your server and the push provider. However, this encryption isn't supported yet, so in the meantime you'll need to perform a fetch to get information needed to populate a notification.
Reading further, you may want to try using fetch() to get data from an API, convert the response to an object and use it to populate notification. This same method was also used in this related SO post.
In addition to that, you may want to also check the response of #Indici Indici in the thread wherein he stated that push event does not contain data values; instead it contains different events which contains information(s). Here is the sample code that was provided as a possible workaround to receive notification in Firebase service-worker in "push" event:
self.addEventListener('push', function(event) {
if (event.data) {
const dataText = event.data.text();
notificationTitle = 'Custom Notification';
notificationOptions.body = 'Message: ' + `${dataText}`;
var title = event.data.notification.title;
var message = event.data.notification.message;
var icon = event.data.notification.icon;
var notificationTag = event.data.notification.tag;
}
}
For receive data need:
self.addEventListener('push', function(event) {
var jsonData = JSON.parse(event.data.text());
// jsonData -> here is you data
const options = {
body: 'set you body',
icon: 'img/apple-icon-120x120.png',
badge: 'img/apple-icon-120x120.png'
};
event.waitUntil(self.registration.showNotification(jsonData.data.title, options));
});
The message is being received and notification does pop up when I use an example text for notification.
I've set up an account with Google for push notifications on Chrome, but the response appears to be empty.
THE SERVICE WORKER
I have this on the service worker, but its empty.
self.addEventListener('push', function(event) {
//console.log('Received a push message', event);
console.log(event.data);
});
Then there's one other thing I've tried with Fetch, using the localhost url.
var url = 'http://localhost/notification/index.php?type=fg';
self.addEventListener('push', function(event) {
event.waitUntil(fetch(url).then(function(response) {
console.log(response);
return response.json();
}).then(function(data) {
console.log(data);
//'data' does't have the json from the url
})
)
});
Chrome doesn't support push payloads yet, so the first snippet will only work in Firefox (https://serviceworke.rs/push-payload.html).
Your second approach, instead, should work in any browser (https://serviceworke.rs/push-get-payload.html).
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.
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,
})
)
);
Wait until Chrome 49 comes out: Mar 8th, 2016
Like said in this article: https://www.chromestatus.com/features/5746279325892608, chrome will implement payloads