CODEWITHSUNDEEP
javascriptgoogle-chromepush-notificationgoogle-cloud-messaging
Ryan Martin
Ryan Martin

Reputation: 1693

How do you link GCM chrome push notifications and payload data?

Push notifications in Chrome via GCM are driving me crazy.

I've got everything up and running. I serve the push using my python server to GCM. A service worker displays the push notification fine.

To my knowledge, there is NO data passed with push events. Sounds like it's coming soon but not available yet.

So just before the push notification shows, I call my server to get extra data for the push notification. But I have no information on the push notification to send to my server to match and return relevant data.

Everything I can think of to match a notification and user data is purely speculative. The closest thing I can find is a timestamp object on the PushEvent{} that roughly matches the successful return of the GCM call for each user.

So how are other people handling custom payload data to display Chrome push notifications?

The PushEvent{} does not seem to have any ID associated with it. I know the user that the push is for because I've previously stored that information at the time of registration.

But once I receive a push, I have no idea of knowing what the push was for.

I would like to avoid:

How are other sites like Whatsapp and Facebook linking custom payload data with a seemingly sterile event data as a result of a push notification?

How are you doing it? Any suggestions?

Here's what my receiver code looks like:

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

    event.waitUntil(
    fetch("https://oapi.co/o?f=getExtraPushData&uid=" + self.userID + "&t=" + self.userToken).then(function(response) {  
      if (response.status !== 200) {  
        console.log('Looks like there was a problem. Status Code: ' + response.status);
        throw new Error();  
      }

      return response.json().then(function(data) {  
        if (data.error || !data.notification) {  
          console.error('The API returned an error.', data.error);  
          throw new Error();  
        }  

        var title = data.notification.title;  
        var message = data.notification.message;  
        var icon = data.notification.icon;  

        return self.registration.showNotification(title, {  
          body: message,  
          icon: icon,  
        });  
      });  
    }).catch(function(err) {  
      console.error('Unable to retrieve data', err);

      var title = 'An error occurred';
      var message = 'We were unable to get the information for this push message';  
      var icon = "https://oapi.co/occurrences_secure/img/stepNotify_1.png";  
      var notificationTag = 'notification-error';  
      return self.registration.showNotification(title, {  
          body: message,  
          icon: icon,  
          tag: notificationTag  
        });  
    })  
);  
});

Upvotes: 0

Views: 1004

Answers (2)

Emma
Emma

Reputation: 323

Assuming you are still in the past. That is, sending only a push trigger to your browser with no payload it's now time to move on with time. You can now send payload in your push events. Since you seem familiar with GCM, it's ok to go with that though there is now the Web Push Protocol which is browser vendor independent.

Briefly, to make that work you need to encrypt your payload with specifications found here, in your server.

There is a node by google chrome and PHP implementations for that, that I know of. You may check out the PHP Web Push here.

In the browser you would need to provide the subscription object now with the p256dh and auth on top of the endpoint as before.

You may check this out for more details.

Upvotes: 1

prajnavantha
prajnavantha

Reputation: 1131

I understand your problem, and i've been fiddling with the same when i wanted to use chrome notification. You can use indexedDB to save ObjectStore and retrieve data in webServices.

IndexedDB is accessible to webservices. I am using it to store user information and when the user recieves a push notification i pass the stored access key to identify the user and pass him relevent information. Here's matt gaunt's tutorial which says indexed db is accessible to web services: http://www.html5rocks.com/en/tutorials/service-worker/introduction/

Here's a good indexedDB tutorial: http://blog.vanamco.com/indexeddb-fundamentals-plus-a-indexeddb-example-tutorial/

Upvotes: 1

Related Questions