ruby on rails - Push Notification by FCM

Question

I made an sample Web-application on IDE by rails. And made app by react-native + expo. (Im very beginner... don't know well about it. Just followed people)

I'm trying to use FCM for pushing notification. But it is toooooo hard to understand. How can i test Push notification alam? I tried but failed a lot. Nothing happend. And i don;t know how it works. (I tried to test by internet. https://firebase.google.com/docs/cloud-messaging/js/first-message )

Below is my condition's now. Thanks your thoughtful help.

in my layouts/application.html.erb / bottom of the tag

<script>
    // message starts?
    // Retrieve Firebase Messaging object.
    const messaging = firebase.messaging();
    
    // getting user's Token?
    // Get registration token. Initially this makes a network call, once retrieved
    // subsequent calls to getToken will return from cache.
    messaging.getToken({vapidKey: 'BOVfpXTI9GRP.........weWtlemQPca1EfE'}).then((currentToken) => {
      if (currentToken) {
        sendTokenToServer(currentToken);
        updateUIForPushEnabled(currentToken);
      } else {
        // Show permission request.
        console.log('No registration token available. Request permission to generate one.');
        // Show permission UI.
        updateUIForPushPermissionRequired();
        setTokenSentToServer(false);
      }
    }).catch((err) => {
      console.log('An error occurred while retrieving token. ', err);
      showToken('Error retrieving registration token. ', err);
      setTokenSentToServer(false);
    });
    
    //// Handle incoming messages. Called when:
    // - a mes      sage is received while the app has focus
    // - the user clicks on an app notification created by a service worker
    //   `messaging.setBackgroundMessageHandler` handler.
    messaging.onMessage((payload) => {
      console.log('Message received. ', payload);
      // ...
    });
</script>
<script>
  /* Service worker for Firebase Cloud Messaging */
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/firebase-messaging-sw.js')
        .then(function(reg){console.log('????? ???? :', reg)})
        .catch(function(error){console.log('????? ???? :', error)});
  };
</script>

in my public/firebase-messaging-sw.js

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here. Other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/8.2.3/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.3/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
    apiKey: "AIzaSyBdk.......ZVUers",
    authDomain: "cok....re.firebaseapp.com",
    databaseURL: 'https://cok....re.firebaseio.com',
    projectId: "cok....re",
    storageBucket: "cok....re.appspot.com",
    messagingSenderId: "1079358214378",
    appId: "1:1079............793",
    measurementId: "G-.....MBR",
    messagingSenderId: '10.....8' 
});

const messaging = firebase.messaging();

messaging.onBackgroundMessage(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: '/firebase-logo.png'
  };
    
messaging.onMessage((payload) => {
  console.log('Message received. ', payload);
  // ...
});
    
self.addEventListener('push', function(event) {
    const payload = event.data.json();
    const title = payload.notification.title;
    const options = {
        body: payload.notification.body,
        icon: payload.notification.icon,
        data: payload.notification.click_action
    };

    event.waitUntil(self.registration.showNotification(title, options));
});

self.addEventListener('notificationclick', function(event) {
    console.log(event.notification);
    event.notification.close();
    event.waitUntil(
        clients.openWindow(event.notification.data)
    );
});

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

question from:https://stackoverflow.com/questions/65863813/push-notification-by-fcm

Answer 1

Waitting for answers