[PWA] FCM 모바일 알림 구현하기 (Vue.js)

현재 진행중인 프로젝트에서 모바일 알림을 구현해야 했다. 그래서 가장 간편하게 쓸 수 있다는 FCM을 사용해 보았는데 나중에 까먹을 것 같아서 남겨두려고 작성한다. 

FCM(Firebase Cloud Messaging) 이란?

firebase에서 제공하는 서비스 중 하나로 여러 플랫폼에 푸시 메세지를 보낼 수 있다. iOS, 안드로이드, 웹 모두 지원하므로 쉽게 사용 가능하다는 장점이 있다. 

 

공식 문서가 잘 작성되어 있어 처음 사용해보는 사람들도 쉽게 접근할 수 있어서 좋았던 것 같다.

 

개발 환경 ⚙️

나는 Vue를 사용하고 있으므로 vue/cli-plugin-pwa 플러그인을 설치했다. 그런데 파이어베이스에서 서비스 워커를 줘서 제공되는registerServiceWorker.js 에서는 따로 구현하지 않았다. 

 

 그리고 firebase/config.js 파일에 파이어베이스 초기화 부분을 넣었고, 권한 요청 부분을 service/notificationPermission.js 파일에 구현했다. 마지막으로 백그라운드 사용을 위해서 public/firebase-messaging-sw.js 파일을 넣었다. 이 파일은 공식 문서에서도 나와있듯이 반드시 프로젝트 루트에 넣어야 한다. 

사용 방법

먼저 파이어베이스 프로젝트를 만들어야 한다. firebase 사이트에서 프로젝트를 생성한다.     

 

그 다음 프로젝트 터미널에서 파이어베이스를 설치한다.

npm install firebase

 

firebase 초기화 

//firebase/config.js

import { initializeApp } from 'firebase/app';
import { getMessaging } from "firebase/messaging";

const firebaseConfig = {
/*
  여기부터는 본인 프로젝트에 맞는 데이터 넣으시면 됩니다. 
  ex) 
  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.VUE_APP_FIREBASE_APP_ID,
  measurementId: process.env.VUE_APP_FIREBASE_MEASUREMENT_ID,
 */
};

const app = initializeApp(firebaseConfig);

// FCM 메시징 설정
const messaging = getMessaging(app);

export { messaging };

 

이 파일에서는 파이어베이스를 초기화 하고 메세징 객체를 설정한다. 이 파일에서 내보낸 messaging을 이용하여 푸시 알림을 보낸다. 

 

알림을 보내기 위해서는 토큰과 권한이 필요하다. 먼저 권한을 승인하면 해당 기기의 토큰이 발급되고 이 토큰을 이용해 사용자를 알 수 있다. 아래 코드는 권한 요청과 토큰 발급 코드이다. 

//service/notificationPermission.js

import { getToken } from "firebase/messaging";
import { messaging } from "../firebase/config";

export function requestFCMPermission() {
  // Notification 권한 요청
  console.log('권한을 요청하는 중...');
  
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('알림 권한이 부여되었습니다.');
      
      // FCM 토큰 요청
      getToken(messaging, { vapidKey: process.env.VAPID_KEY })
        .then((currentToken) => {
          if (currentToken) {
            console.log('FCM Token:', currentToken);
          } else {
            console.log('권한을 허용해주세요');
          }
        })
        .catch((err) => {
          console.log('푸시 토큰 가져오는 중에 에러 발생', err);
        });
      
    } else {
      console.log('권한을 얻을 수 없습니다.');
    }
  });
}

 

이렇게 설정이 끝났으면 테스트를 해야한다. 테스트를 하기에 앞서 토큰을 알아야 하는데 방금 작성한 requestFCMPermission 메서드를 main.js에서 불러와서 실행하면 콘솔창에 본인의 토큰이 나올 것 이다.

 

그 토큰을 가지고 다시 파이어 베이스로 간다. 그리고 클라우드 메세징 클릭

 

첫번째 캠페인 만들기 선택 후 알림 제목과 설명을 입력하면 토큰을 추가할 수 있는 버튼이 나온다. 여기에 아까 받은 토큰을 입력한다.

 

백그라운드 알림을 보내기 위해서는 루트에 firebase-messaging-sw.js 파일이 있어야 한다. 나는 public 폴더에 만들었으며 코드는 아래와 같다.

// /public/firebase-messaging-sw.js
importScripts(
    "https://www.gstatic.com/firebasejs/10.8.0/firebase-app-compat.js"
);
importScripts(
    "https://www.gstatic.com/firebasejs/10.8.0/firebase-messaging-compat.js"
);

self.addEventListener("install", function (e) {
    console.log("fcm service worker가 설치되었습니다.");
    self.skipWaiting();
});

self.addEventListener("activate", function (e) {
    console.log("fcm service worker가 실행되었습니다.");
});

const firebaseConfig = {
    apiKey: '',
    authDomain: '',
    projectId: '',
    storageBucket: '',
    messagingSenderId: '',
    appId: '',
    measurementId: '',
};

// 파이어베이스 초기화
firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();

messaging.onBackgroundMessage((payload) => {
    const notificationTitle = payload.title;
    const notificationOptions = {
        body: payload.body
    };
    self.registration.showNotification(notificationTitle, notificationOptions);
});

src에 없으므로 .env 파일이나 inport 를 직접 해주어야 한다. 나는 이 부분에서 왜 파이어베이스를 또 초기화 하는지 궁금했었는데 초기화를 두 번 하는 이유는 애플리케이션 실행 환경과 서비스 워커 실행 환경이 서로 다르기 때문이다.

 

쉽게 말해서 앱이 꺼져있을 때 알림이 오면 파이어베이스 객체를 생성해야 하기 때문이다. 

 

아무튼 이거 생성하고 테스트를 보내면 끝! 

 

추가로 Mac에서는 설정에서 크롬 알림을 또 켜줘야 한다

 

암튼 이렇게 하면 드디어 끝!!!!!