토이 프로젝트 - Vue, Firebase로 서버리스 PWA 개발

28. 사이드 프로젝트 푸시 알림 Firebase Cloud Messaging (FCM)이란?

그랜파 개발자 2025. 3. 6. 03:51

Firebase Cloud Messaging (FCM)이란?

Firebase Cloud Messaging(FCM) 은 Firebase에서 제공하는 무료 서비스로, 개발자가 클라이언트 애플리케이션(웹, Android, iOS)에 푸시 알림 및 메시지 전송 기능을 구현할 수 있도록 도와줍니다.
이를 통해 앱 사용자가 실시간 알림을 받거나, 데이터를 업데이트할 수 있습니다.

FCM의 주요 기능

  • 푸시 알림(Push Notifications):
    브라우저 또는 모바일 디바이스에 알림 메시지를 표시할 수 있습니다.
  • 데이터 메시지(Data Messages):
    앱에 특정 데이터를 전달하며, 앱이 열려 있는 상태에서 백그라운드 작업을 처리할 수 있습니다.
  • 주요 플랫폼 지원:
    Android, iOS, Web(브라우저), Unity 등 다양한 플랫폼을 지원합니다.
  • 주제 기반 메시징(Topic Messaging):
    사용자가 특정 주제(예: 뉴스, 스포츠)에 구독하도록 하여 관련 메시지만 받을 수 있습니다.
  • 기기 그룹 메시징(Device Group Messaging):
    여러 기기를 하나의 그룹으로 묶어 메시지를 전송할 수 있습니다.

Firebase Functions

FCM은 서버에서 보냅니다.
우리는 서버가 없습니다.
그래서 backend로 firebase의 functions를 사용합니다.

Firebase Functions는?

Firebase에서 제공하는 서버리스(Serverless) 클라우드 컴퓨팅 서비스로,
백엔드 코드를 작성하고 실행할 수 있는 환경을 제공합니다.
이를 통해 별도의 서버를 구축하거나 유지 관리할 필요 없이
Firebase 플랫폼 내에서 백엔드 작업을 처리할 수 있습니다.

Firebase Functions 서비스를 사용하기 위해서는 Firebase 프로젝트가 필요합니다.
Firebase 프로젝트는 Firebase 서비스를 이용하기 위한 필수 단계입니다.

Firebase 프로젝트를 만들기 위해서는
Firebase Console로 이동하여
Firebase Console의 메인 화면에서 프로젝트 추가 또는 프로젝트 만들기 버튼을 클릭하면 됩니다.

Firebase functions 프로젝트

Firebase functions 프로젝트 만들기는 다음 단계를 따릅니다.

Firebase CLI 설치

Firebase 프로젝트를 로컬 개발 환경과 연결하려면 Firebase CLI를 설정해야 합니다.

npm install -g firebase-tools

Firebase CLI 로그인

firebase login

Firebase 프로젝트 초기화

Firebase CLI를 사용해 로컬 디렉토리를 Firebase 프로젝트와 연결합니다.

firebase init Functions

Firebase 클라우드 메시징 클라이언트 앱 설정

아래 원문을 참조했습니다.

https://firebase.google.com/docs/cloud-messaging/js/client?hl=ko&_gl=11mu7lfb_upMQ.._gaMTgzNzM5NDY2OS4xNzM2MzEzNzgy_ga_CW55HF8NVT*MTczNjMxMzc4Mi4xLjAuMTczNjMxMzc4Mi4wLjAuMA..

Push API를 지원하는 브라우저에서 실행되는 웹 앱에서 FCM JavaScript API를 사용하여 알림 메시지를 수신할 수 있습니다.FCM SDK는 HTTPS를 통해 제공되는 페이지에서만 지원됩니다. 이는 HTTPS 사이트에서만 사용 가능한 서비스 워커를 사용하기 때문입니다.

FCM SDK 추가 및 초기화

아직 진행하지 않았다면 Firebase JS SDK를 설치하고 Firebase를 초기화합니다.
Firebase Cloud Messaging JS SDK를 추가하고 Firebase Cloud Messaging을 초기화합니다.

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

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = getMessaging(app);

FCM에서 웹 사용자 인증 정보 구성

FCM 웹 인터페이스는 '자발적 애플리케이션 서버 ID' 또는 'VAPID' 키라고 하는 웹 사용자 인증 정보를 사용하여 지원되는 웹 푸시 서비스에 대한 보내기 요청을 승인합니다. 앱에서 푸시 알림을 구독하려면 키 쌍을 Firebase 프로젝트에 연결해야 합니다. Firebase Console을 통해 새 키 쌍을 생성하거나 기존 키 쌍을 가져올 수 있습니다.

새 키 쌍 생성

Firebase 콘솔 설정 창의 클라우드 메시징 탭을 열고 웹 구성 섹션으로 스크롤합니다.
웹 푸시 인증서 탭에서 키 쌍 생성을 클릭합니다. Console에 키 쌍이 생성되었다는 알림이 표시되고 공개 키 문자열과 추가된 날짜가 표시됩니다.

기존 키 쌍 가져오기

이미 웹 앱에서 사용 중인 기존 키 쌍이 있으면 FCM으로 이 키 쌍을 가져와서 FCM API를 통해 기존 웹 앱 인스턴스에 연결할 수 있습니다. 키를 가져오려면 Firebase 프로젝트에 액세스할 수 있는 소유자 수준의 권한이 있어야 합니다. 기존 공개 및 비공개 키를 base64 URL 보안 인코딩 양식으로 가져옵니다.

Firebase 콘솔 설정 창의 클라우드 메시징 탭을 열고 웹 구성 섹션으로 스크롤합니다.
웹 푸시 인증서 탭에서 링크 텍스트인 '기존 키 쌍 가져오기'를 찾아서 선택합니다.
키 쌍 가져오기 대화상자에서 해당 필드에 공개 및 비공개 키를 입력하고 가져오기를 클릭합니다. Console에 공개 키 문자열과 추가된 날짜가 표시됩니다.

앱에서 웹 사용자 인증 정보 구성

getToken(): Promise 메서드를 사용하면 FCM에서 다른 푸시 서비스로 메시지 요청을 보낼 때 VAPID 키 사용자 인증 정보를 사용할 수 있습니다. FCM에서 웹 사용자 인증 정보 구성의 안내에 따라 생성하거나 가져온 키를 사용하여, 메시징 객체를 가져온 후 이 키를 코드에 추가합니다.

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

const messaging = getMessaging();
// Add the public key generated from the console here.
getToken(messaging, {vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

등록 토큰 액세스

앱 인스턴스의 현재 등록 토큰을 가져와야 한다면 먼저 Notification.requestPermission()을 사용해 사용자에게 알림 권한을 요청합니다. 다음과 같이 호출했을 때 권한이 부여되면 토큰을 반환하고 거부되면 프로미스를 거부합니다.

function requestPermission() {
  console.log('Requesting permission...');
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('Notification permission granted.');

 

FCM에는 firebase-messaging-sw.js 파일이 필요합니다. firebase-messaging-sw.js 파일이 아직 없다면 토큰을 가져오기 전에 이 이름으로 빈 파일을 만들어 도메인의 루트에 저장합니다. 나중에 클라이언트 설정 프로세스에서 의미 있는 내용을 파일에 추가할 수 있습니다.

다음과 같이 현재 토큰을 가져올 수 있습니다.

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: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } 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);
  // ...
});
 

토큰이 확보되었으면 앱 서버로 전송하고 원하는 방법으로 저장하세요.

메시지 수신

앱이 백그라운드에 있을 때 푸시 알림 메시지를 수신하는 것은 서비스 워커( firebase-messaging-sw.js)입니다.

서비스 워커(Service Worker)란?

서비스 워커는 브라우저에서 백그라운드에서 실행되는 스크립트로, 웹 애플리케이션의 성능과 사용자 경험을 향상시키기 위해 사용됩니다. 주요 목적은 오프라인 경험 제공, 캐싱 관리, 그리고 푸시 알림 처리와 같은 기능을 수행하는 것입니다.

onMessage 이벤트

앱이 포그라운드(foreground) 상태에 있을 때 Firebase Cloud Messaging(FCM)을 수신하려면 클라이언트 앱에서 Firebase Messaging SDK를 설정하고 메시지 리스너를 구현해야 합니다.
onMessage 이벤트를 사용하여 메시지를 처리합니다.