CODEWITHSUNDEEP
push-notificationservice-worker
user479947
user479947

Reputation:

Sending & Receiving Push Notifications across major browsers & mobile devices

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?

Upvotes: 3

Views: 641

Answers (1)

Manpreet singh
Manpreet singh

Reputation: 136

Safari doesn't support FCM yet. See here

Now for why you are not receiving messages, first you have to understand what actually is happening.

The client is generating a token in browser.(That's what the generateToken method does) and Firebase admin is running the fcm server.

But Firebase server doesn't know about your client. Your client must be subscribed to the admin server from whom you want to receive notification.

To subscribe to server, you have to make a post request using your server key. see this

Upvotes: 1

Related Questions