Vue 2에서 FCM 푸시 알림 수신 서비스 워커를 등록하는 방법

Vue 2에서 FCM 푸시 알림 수신 서비스 워커를 등록하는 방법

파이어베이스 버전을 사용하고 있습니다.8.2.7

코드 입력public/firebase-messaging-sw.js

//firebase-messaging-sw.js

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

const firebaseConfig = {
  // firebase config credentials
};
const app = firebase.initializeApp(firebaseConfig);

const messaging = app.messaging();

messaging.onBackgroundMessage((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"
  };

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

코드 입력firebase.js

//firebase.js

import firebase from "firebase/app";
import "firebase/firebase-messaging";

const firebaseConfig = {
  // firebase config credentials
};  

firebase.initializeApp(firebaseConfig);

export default firebase.messaging();

코드 입력main.js

import firebaseMessaging  from "./firebase"; // firebase

firebaseMessaging.getToken({ 
  vapidKey: process.env.VUE_FIREBASE_PUSH_KEY })
  .then((currentToken) => {
    if (currentToken) {
      console.log("Firebase Current Token", currentToken);
      // this.$messaging.onMessage((msg) => {
      //   window.alert(msg);
      // });
      // // getMessaging(payload => {
      // //   console.log("//////////////message Firebase", payload);
      // //   window.alert(payload);
      // // });
    } else {
      console.log("No registration token available. Request permission to generate one.");
    }}).catch( err => {
    console.log("/////////errrr Firebase", err);
  });         

Vue.prototype.$messaging = firebaseMessaging;



new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

random Component.js

methods: {
  getFirebaseNotifications() {
       try {
        this.$messaging.onMessage((payload) => {
          console.log("//////////////message Firebase", payload);
        });
      } catch (error) {
        console.log("/////////errrr Firebase", error);
      }
     
    },
}

 created() {
     this.getFirebaseNotifications();

  }

어떤 변경을 해야 합니까?public/firebase-messaging-sw.jsFCM(FireBase Cloud Messaging)에서 푸시 알림을 받을 수 있습니다.또, 이러한 서비스 워커를 vue 앱에 등록하려면 어떻게 해야 합니까?또한 vue 컴포넌트에서 FCM 알림을 수신하려면 어떻게 해야 합니까?

언급URL : https://stackoverflow.com/questions/70791412/how-to-register-a-fcm-push-notification-receiving-service-worker-in-vue-2