53. mylog FCM 받기

Vue로 PWA 개발 - 그랜파 개발자

 

CM 푸시 메시지를 수신할 때 사용자가 웹 페이지에 있을 때와 앱이 백그라운드에 있을 때 각 수신 방법이 다릅니다.
사용자가 현재 웹페이지에 있을 때 들어오는 메시지를 처리하려면 FCM SDK의 'onMessage' 메서드를 사용하여 해당 메시지를 수신할 수 있습니다. 이것은 main.js에서 설정합니다.
앱이 백그라운드에 있을 때 알림을 처리하려면 서비스 워커가 필요합니다. 앱이 시작할 때 서비스 워커를 등록합니다.

1. 앱이 Foreground에 있을 때 푸시 메시지 받기

// src/main.js

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import { getMessaging, onMessage } from "firebase/messaging";

Vue.config.productionTip = false

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App),
  created() {
    // Set up Firebase auth state change listener
    const { dispatch } = this.$store;
    // Initialize Firebase authentication to check for the logged-in user
    dispatch('auth/initializeAuth');
    dispatch('auth/fetchUsers');

    dispatch('mylogs/fetchMylogs');

    // 서비스 워커 등록 - 앱이 백그라운드 있을 때 푸시 메시지 수신 처리
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/firebase-messaging-sw.js')
      .then((registration) => {
        console.log('Service Worker registered with scope:', registration.scope);
      }).catch((err) => {
        console.error('Service Worker registration failed:', err);
      });
    } 

    // 앱이 포그라운드에 있을 때 푸시 메시지 수신 처리
    // Request Notification Permission
    // '알림 요청'으로 fcm 토큰을 저장할 것이므로 웹앱을 시작할 때 알림 표시 요청과 관계없이 onMessage를 구현해 둔다. 
    //Notification.requestPermission().then((permission) => {
      //if (permission === 'granted') {
        //console.log('Notification permission granted.');
        const messaging = getMessaging();       
        // Handle incoming messages in the foreground
        onMessage(messaging, (payload) => {
          console.log('Message received: ', payload);
          // Extract notification data
          const title = payload.notification.title;
          const options = {
            body: payload.notification.body,
            icon: payload.notification.icon || "/img/push-noti-icon.png",
            badge: "/img/push-badge-icon.png",
            image: "/img/push-image.png",
            data: { url: payload.notification.click_action || 'https://velog.io/@inetsos/posts' } // Custom data for the click event
          };

          // Show notification
          const notification = new Notification(title, options);
          // Handle click event on the notification
          notification.onclick = (event) => {
            event.preventDefault(); // Prevent the browser from focusing the Notification's tab
            window.open(notification.data.url, '_blank'); // Open the URL in a new tab
          };

        });

      //} else {
      //  console.log('Unable to get permission to notify.');
      //}
    //});
  }
}).$mount('#app')

 

2. 앱이 Background에 있을 때 푸시 메시지 받기

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

// Your web app's Firebase configuration (same as in your firebase.js)
const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id",
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Retrieve Firebase Messaging object.
const messaging = firebase.messaging();

// 백그라운드에서 푸시 메시지 수신 처리
messaging.onBackgroundMessage(function (payload) {
  console.log('Received background message ', payload);
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/firebase-logo.png', // Optional
  };

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