CODEWITHSUNDEEP
javascriptphpcurlpush-notificationgoogle-cloud-messaging
Sree KS
Sree KS

Reputation: 1343

Desktop push notification using Google cloud messaging and service worker

I want to send push notification to all my desktop users using google cloud messaging

I completed following steps successfully

Here is my CURL commands

$url = 'https://android.googleapis.com/gcm/send';
$msg="hi";
$data = array('title'=> $msg,'message'=>'Hello');
$regids= // added regids;
$fields = array('to' => $regids,'data' => $data);
$headers = array( 'Authorization: My auth key','Content-Type: application/json');

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($fields));

print_r(json_encode($fields));
$result=curl_exec($ch);
echo $result; 
if($result==FALSE)
{
    die('Curl Failed');
}
curl_close($ch);

Everything is working fine and I am able to display a default notification using the following code

self.addEventListener('push', function(event) {
  console.log('Push message', event);
  var title = 'Push message';
  event.waitUntil(
    self.registration.showNotification(title, {
      body: 'The Message',
      icon: 'images/icon.png',
      tag: 'my-tag'
    }));
});

But what I need is to display the notification message which I sent through CURL command (In app we can do that easily)

I got the following code for receiving the push notification (google)

self.addEventListener('push', function(event) {  
  // Since there is no payload data with the first version  
  // of push messages, we'll grab some data from  
  // an API and use it to populate a notification  
  event.waitUntil(  
    fetch(SOME_API_ENDPOINT).then(function(response) {  
      if (response.status !== 200) {  
        // Either show a message to the user explaining the error  
        // or enter a generic message and handle the
        // onnotificationclick event to direct the user to a web page  
        console.log('Looks like there was a problem. Status Code: ' + response.status);  
        throw new Error();  
      }

      // Examine the text in the response  
      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;  
        var notificationTag = data.notification.tag;

        return self.registration.showNotification(title, {  
          body: message,  
          icon: icon,  
          tag: notificationTag  
        });  
      });  
    }).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 = URL_TO_DEFAULT_ICON;  
      var notificationTag = 'notification-error';  
      return self.registration.showNotification(title, {  
          body: message,  
          icon: icon,  
          tag: notificationTag  
        });  
    })  
  );  
});

It always displays

We were unable to get the information for this push message

What is the SOME_API_ENDPOINT mentioned in that code ?
I tried with https://android.googleapis.com/gcm/send instead of endpoint and also with user endpoints in service worker but not working .

Any Help is much Appreciated

Upvotes: 10

Views: 1069

Answers (1)

Teyam
Teyam

Reputation: 8112

As far as I know, SOME_API_ENDPOINT mentioned is an API backend which is used to simplify client access to data from other applications.

As discussed in Overview of Cloud Endpoints,

Google Cloud Endpoints consists of tools, libraries and capabilities that allow you to generate APIs and client libraries from an App Engine application, referred to as an API backend, to simplify client access to data from other applications. Endpoints makes it easier to create a web backend for web clients and mobile clients such as Android or Apple's iOS.

More information on the use of endpoints are completely discussed in Best practices for Google Cloud Endpoints such as, how to create your App Engine backend.

You may also use this SO post - Google endpoints and Google Cloud Messaging as one of your references which can help.

Upvotes: 4

Related Questions