0

What im trying to do is create a button in a android app, when button is clicked, it send a notification to web app(javascript) via FCM(Firebase cloud messaging). I have already done sending a message/notification from web app to android app. I have created a REST API( spring boot) which can send a notification to topic, then in web app, i call this api, put some data into it and in android app, i create a service to receive the notification with topic.

Now, i want to call my api from android app(when click a button) and send a notification to web app. I want to know how to subcribe to a topic in web app using javascript and receive message/notification when a message is sent to that topic.

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
Sơn Immortal
  • 3
  • 3
  • There is no client-side API to subscribe a user to an FCM topic in JavaScript (I'm not sure why), so you'll have to do that server-side. See the flow in this **question**: https://stackoverflow.com/q/48149331, and my answer here: https://stackoverflow.com/questions/40389335/how-to-subscribe-to-topics-with-web-browser-using-firebase-cloud-messaging – Frank van Puffelen Sep 20 '19 at 08:24

1 Answers1

1

Create a firebase.js

<script>
    var config = {
        messagingSenderId: '<replace-with-your-sender-id>'
    };
    firebase.initializeApp(conyou);
</script>

Now, You will have to create firebase-messaging-sw.js and place it to the root of the web folder

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

// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
   'messagingSenderId': 'YOUR-SENDER-ID'
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/itwonders-web-logo.png'
  };

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

You will also have to ask permission from the user to show a notification:

const messaging = firebase.messaging();
 messaging
   .requestPermission()
   .then(function () {
     MsgElem.innerHTML = "Notification permission granted." 
     console.log("Notification permission granted.");
   })
   .catch(function (err) {
   ErrElem.innerHTML = ErrElem.innerHTML + "; " + err
   console.log("Unable to get permission to notify.", err);
 });

Retrieve the notifcation token for FCM

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

     // get the token in the form of promise
     return messaging.getToken()
   })
   .then(function(token) {
     // print the token on the HTML page
     TokenElem.innerHTML = "token is : " + token
   })
   .catch(function (err) {
   ErrElem.innerHTML = ErrElem.innerHTML + "; " + err
   console.log("Unable to get permission to notify.", err);
 });

You can follow this tut: Web Push Notification with Firebase

Deˣ
  • 4,191
  • 15
  • 24