FCM (Firebase Cloud Messagging)과 서비스 워커 (Service Worker)

FCM 구현 중, 서비스 워커가 동적으로 환경 변수 값을 읽지 못하는 현상이 발생,

도대체 서비스 워커가 정확히 무슨 이유로 필요하고, 어떤 일을 하길래 필요한거지?

이런 근본적인 의문이 들어 조사하게 되었고, 왜 서비스 워커가 동적으로 값을 읽지 못하는지 이해하게 되었다.

Service Worker

서비스 워커(Service Worker)는 브라우저에서 동작하는 백그라운드 스크립트로, 웹 애플리케이션이 사용자와 상호작용하지 않는 상태에서도 특정 작업(푸시 알림, 네트워크 요청 캐싱 등)을 수행할 수 있도록 설계되었습니다.

❓ 왜 서비스 워커가 필요한가?

Firebase Cloud Messaging(FCM)과 같은 푸시 알림을 구현할 때, 서비스 워커는 브라우저가 실행 중이든 백그라운드에 있든 상관없이 알림을 처리하는 역할을 합니다. 브라우저의 제한으로 인해, 일반적인 JavaScript 코드로는 이 기능을 구현할 수 없습니다.

---

💡 서비스 워커의 주요 역할

1. 백그라운드 작업 처리
   • 사용자가 브라우저에서 웹 페이지를 닫았더라도 푸시 알림을 받을 수 있습니다.
   • 예를 들어, FCM 메시지가 도착했을 때 알림을 표시합니다.
2. 네트워크 요청 캐싱
   • 오프라인 상태에서도 웹 애플리케이션이 동작하도록 캐싱된 리소스를 제공합니다.
   • Progressive Web App(PWA)의 핵심 구성 요소입니다.
3. 푸시 알림
   • FCM과 연동하여 백그라운드 상태에서도 메시지를 수신하고 이를 사용자에게 전달합니다.

---

💡 FCM에서 서비스 워커가 필요한 이유

FCM은 클라이언트(브라우저)가 메시지를 받을 준비가 되어 있어야 알림을 보낼 수 있습니다. 서비스 워커는 브라우저가 열려 있지 않더라도 Firebase 서버와 통신하여 푸시 메시지 수신을 가능하게 합니다.

📩 푸시 메시지 처리 과정

1. FCM 서버가 브라우저로 메시지를 전송합니다.
2. 브라우저는 등록된 서비스 워커를 통해 메시지를 수신합니다.
3. 서비스 워커는 메시지 데이터를 처리하고 알림을 표시하거나 다른 작업을 수행합니다.

---

❓ 서비스 워커가 없다면?

• 사용자가 웹 페이지를 닫으면 푸시 메시지를 받을 수 없습니다.
• 알림 기능이 앱처럼 동작하지 않아 사용자 경험이 떨어집니다.

---

⚙️ firebase-messaging-sw.js 파일이 하는 일

서비스 워커는 푸시 메시지를 받을 준비를 하도록 Firebase의 메소드를 초기화합니다. 아래는 그 역할을 설명합니다:

javascript
코드 복사
// firebase-messaging-sw.js

// Firebase 초기화
importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js');

firebase.initializeApp({
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
});

// 메시징 초기화
const messaging = firebase.messaging();

// 백그라운드 메시지 처리
messaging.onBackgroundMessage((payload) => {
  console.log('백그라운드 메시지:', payload);
  self.registration.showNotification(payload.notification.title, {
    body: payload.notification.body,
    icon: payload.notification.icon,
  });
});

위 코드가 없다면 FCM이 푸시 메시지를 전송하더라도 브라우저는 이를 처리할 수 없습니다.

---

📝 서비스 워커와 FCM의 상호작용 요약

1. 사용자가 사이트를 방문: 브라우저에서 서비스 워커(/firebase-messaging-sw.js)를 등록합니다.
2. 서비스 워커 등록 성공: FCM 서버에 브라우저를 연결해 알림을 받을 준비를 합니다.
3. FCM 메시지 도착:
   • 포그라운드 상태에서는 클라이언트 코드(firebase/messaging)가 처리합니다.
   • 백그라운드 상태에서는 서비스 워커가 메시지를 수신하고 처리합니다.

---

📬 실생활 비유

서비스 워커는 우체국 사서함처럼 동작합니다.

• 웹 애플리케이션은 집, 브라우저는 우체국입니다.
• 사용자가 집(브라우저)을 떠나 있어도 우체국(서비스 워커)이 메시지를 보관하고 전달합니다.
• 사용자가 다시 집에 돌아오면 사서함에서 메시지를 확인합니다.

---

❗ 요약

• 서비스 워커는 FCM에서 브라우저가 열려 있지 않아도 푸시 메시지를 받을 수 있도록 도와줌
• 서비스 워커를 사용하지 않으면 웹 페이지가 닫혀 있을 때 알림을 받을 수 없음 ⇒ 푸시 알림을 구현하려면 필수적인 구성 요소!