Vue(웹)에서 FCM 설정하기

FCM 사용하는 방법

1. public 폴더 내에 추가해야 되는 사항

1. firebase-messaging-sw.js

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

firebase.initializeApp({
  apiKey: "AIzaSyBnULIhMOeoGSDa66fD-g8-_nbCxqtCZmY",
  authDomain: "hello-notification-13973.firebaseapp.com",
  projectId: "hello-notification-13973",
  storageBucket: "hello-notification-13973.appspot.com",
  messagingSenderId: "176466236713",
  appId: "1:176466236713:web:a955f2caa78f5b8fc65338",
  measurementId: "G-N4H39NYW0B",
});

const messaging = firebase.messaging();

messaging.onBackgroundMessage((payload) => {
  console.log(
    "[firebase-messaging-sw.js] Received background message ",
    payload
  );
  // Customize notification here
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    // icon: "/icon.png",
  };

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

2. view 폴더에, 파일하나 만들기

<script setup>
import { initializeApp } from "firebase/app";
import { getMessaging, getToken, onMessage } from "firebase/messaging";

const firebaseConfig = {
  apiKey: "AIzaSyBnULIhMOeoGSDa66fD-g8-_nbCxqtCZmY",
  authDomain: "hello-notification-13973.firebaseapp.com",
  projectId: "hello-notification-13973",
  storageBucket: "hello-notification-13973.appspot.com",
  messagingSenderId: "176466236713",
  appId: "1:176466236713:web:a955f2caa78f5b8fc65338",
  measurementId: "G-N4H39NYW0B",
};

const app = initializeApp(firebaseConfig);

const messaging = getMessaging();
onMessage(messaging, (payload) => {
  console.log("Message received. ", payload);
  // ...
});

getToken(messaging, {
  vapidKey:
    "BEgyKA8_75UEWD_r86WeuoEyaNwB6UvzA9jJsEHRWivr7pvg8pQA7CzVByuwpaJg9M1F4mhnDbUgX9ROw49yD94",
})
  .then((currentToken) => {
    if (currentToken) {
      console.log("Token is:", currentToken);
    } else {
      console.log(
        "No registration token available. Request permission to generate one."
      );
      // ...
    }
  })
  .catch((err) => {
    console.log("An error occurred while retrieving token. ", err);
  });
</script>

<template>
  <div>기능만 추가해놓았지 뭐</div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

3. Router에 view에 만든 폴더 넣어주기

4. 껐다가 다시 시작해본 후에, /폴더명으로 바꿔본 후, console을 보면, currentToken이 확인된다.

5. 테스트 메시지 전송에, FCM 등록 토가

6. 전송해보면 보내지는 것이 확인됨

2. web app 만들기 누른후에,

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "AIzaSyB84AptCaiBHjXnd7wVTAUoRYThS9Yi_yA",
  authDomain: "hello-notification-60bea.firebaseapp.com",
  projectId: "hello-notification-60bea",
  storageBucket: "hello-notification-60bea.appspot.com",
  messagingSenderId: "396547239024",
  appId: "1:396547239024:web:d39665383b3c4cbfec98b5"
};


const app = initializeApp(firebaseConfig);

import { getMessaging, getToken } from "firebase/messaging";

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
const messaging = getMessaging();
getToken(messaging, { vapidKey: 'BGK0V6lGVIG2p-VGkVBim3Ycq32T7aJ0RSnswu8eHBsjZ8fSsKQxmdWSygkHwsZoe2jhHAlNVy5vhZOlWGvel1A' }).then((currentToken) => {
  if (currentToken) {
    console.log("Token is..")
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});

// Handle incoming messages. Called when:
// - a message is received while the app has focus
// - the user clicks on an app notification created by a service worker
//   `messaging.onBackgroundMessage` handler.
import { getMessaging, onMessage } from "firebase/messaging";

const messaging = getMessaging();
onMessage(messaging, (payload) => {
  console.log('Message received. ', payload);
  // ...
});