Sending & Receiving Push Notifications across major browsers & mobile devices

Viewed 567

I signed up for a Google Cloud Services account, created a new Firebase Project, and downloaded my service credentials JSON file.

In following this guide: https://firebase.google.com/docs/cloud-messaging/js/client

I added this to my web client html (in order to get a client registration token and accept push notifications):

<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js">
</script>
<script>
firebase.initializeApp({
  apiKey: "_APIKEY_",
  authDomain: "_ID_.firebaseapp.com",
  databaseURL: "https://_ID_.firebaseio.com",
  projectId: "_ID_",
  storageBucket: "_ID_.appspot.com",
  messagingSenderId: "_SENDERID_"
});
/* Is the API Key supposed to be public-facing? */

const messaging = firebase.messaging();
messaging.requestPermission().then(function() {
  console.log('Notification permission granted.');

  messaging.getToken().then(function(currentToken) {
    if (currentToken) {
      console.log(currentToken)
    } else {
      console.log('No Instance ID token available. Request permission to generate one.');
    }
  }).catch(function(err) {
    console.log('An error occurred while retrieving token. ', err);
  });
}).catch(function(err) {
  console.log('Unable to get permission to notify.', err);
});

messaging.onTokenRefresh(function() {
  messaging.getToken().then(function(refreshedToken) {
    console.log(refreshedToken)
  }).catch(function(err) {
    console.log('Unable to retrieve refreshed token ', err);
  });
});
</script>

I grabbed the registration token generated by the client and added a service worker (firebase-messaging-sw.js):

importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js');

firebase.initializeApp({
  'messagingSenderId': '_ID_'
});

const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '_ICON_'
  };

  return self.registration.showNotification(notificationTitle,
    notificationOptions);
});

Then, downloaded the npm module for Firebase Admin and setup a basic push notification test template using the client token:

  var admin = require("firebase-admin");
  var serviceKey = require("./_KEY_.json");

  admin.initializeApp({
    credential: admin.credential.cert(serviceKey),
    databaseURL: "https://_PROJECTID_.firebaseio.com"
  });

  var registrationToken = "_TOKEN_";

  var notification = {
    data: {
      msg:"Hello!"
    }
  };

  admin.messaging().sendToDevice(registrationToken, notification)
    .then(function(response) {
      console.log("Successfully sent message:", response);
    })
    .catch(function(error) {
      console.log("Error sending message:", error);
    });

Now, node.js is telling me that it "Successfully sent message", yet I'm not receiving anything in the Chrome web client. In Safari, I see the error: This browser doesn't support the API's required to use the firebase SDK.

What's the easiest way for me to simply message individual clients via push notification across the major browsers & mobile devices?

1 Answers
Related