시작에 앞서,,, 웹-chrome/ios-safari 와 안드로이드 웹앱 코드 구현이 다릅니다,,,

1️⃣ firebase 설치

npm install firebase

2️⃣ firebase 기본 설정 파일 생성

// src/config.ts 에 추가

// Firebase 설정 아래로...
import { initializeApp } from 'firebase/app'
import { getAnalytics } from 'firebase/analytics'
import { getMessaging } from 'firebase/messaging'

// Firebase 기본 설정
const firebaseConfig = {
  apiKey: 'AIzaSyBWiJizxqL9FJ-HFaPDjjAtDe7dH5i9-Eg',
  authDomain: 'orderme-9ec2c.firebaseapp.com',
  projectId: 'orderme-9ec2c',
  storageBucket: 'orderme-9ec2c.firebasestorage.app',
  messagingSenderId: '39700042171',
  appId: '1:39700042171:web:16834f683b44047131b49e',
  measurementId: 'G-1FDNSFS8ZJ',
}

// Firebase 초기화
export const app = initializeApp(firebaseConfig)
export const analytics = getAnalytics(app)
export const messaging = getMessaging(app)

3️⃣ Service Worker 파일 생성

// public/firebase-messaging-sw/js

importScripts('<https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js>');
importScripts('<https://www.gstatic.com/firebasejs/9.22.0/firebase-messaging-compat.js>');

firebase.initializeApp({
  apiKey: "AIzaSyBWiJizxqL9FJ-HFaPDjjAtDe7dH5i9-Eg",
  authDomain: "orderme-9ec2c.firebaseapp.com",
  projectId: "orderme-9ec2c",
  storageBucket: "orderme-9ec2c.firebasestorage.app",
  messagingSenderId: "39700042171",
  appId: "1:39700042171:web:16834f683b44047131b49e",
  measurementId: "G-1FDNSFS8ZJ"
});

const messaging = firebase.messaging();

// 백그라운드 메시지 처리
messaging.onBackgroundMessage((payload) => {
  console.log('백그라운드 메시지 수신:', payload);
  
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/icons/mstile-150x150.png', // 앱 아이콘으로 변경하세요
  };

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

4️⃣ 알림 권한 요청 및 토큰 관리 유틸리티 생성

// src/utils/firebaseUtils.ts 파일 생성

import { getToken, onMessage } from "firebase/messaging";
import { messaging } from "../firebase/firebaseConfig";

// FCM 토큰 가져오기
export const requestNotificationPermission = async (): Promise<string | null> => {
  try {
    // 브라우저에 알림 권한 요청
    const permission = await Notification.requestPermission();
    
    if (permission === "granted") {
      // FCM 토큰 발급 (vapidKey는 웹 푸시 인증서 공개키입니다)
      const token = await getToken(messaging, {
        vapidKey: "YOUR_VAPID_KEY" // 백엔드에서 제공한 VAPID 키 입력 필요
      });
      
      console.log("FCM 토큰:", token);
      return token;
    } else {
      console.log("알림 권한이 거부되었습니다.");
      return null;
    }
  } catch (error) {
    console.error("FCM 토큰 발급 중 오류:", error);
    return null;
  }
};

// 포그라운드 메시지 수신 핸들러 등록
export const registerForegroundMessageHandler = (callback: (payload: any) => void) => {
  return onMessage(messaging, (payload) => {
    console.log("포그라운드 메시지 수신:", payload);
    callback(payload);
  });
};

✅ VAPID KEY 생성하기

FCM은 토큰을 통해 푸시 알림을 전송해요.

이때 토큰을 받아올 수 있도록 해주는 게 VAPID KEY입니다.

VAPID KEY 발급 과정은 아래와 같습니다.

VAPID KEY 는 환경변수(.env 에 저장)로 관리할 것!

5️⃣ FCM 토큰을 서버에 등록하는 서비스 만들기