FCM 웹 푸시 실전 테스트: 중복 알림 문제와 브라우저 상태별 동작

지난 글 [웹 푸시 알림 삽질기: Firebase FCM 적용 중 알림이 안 뜰 때 해결법]에서는
“푸시 이벤트는 잡히는데 알림이 안 뜨던 문제”를 다뤘다.

 

이번 글은 그 다음 단계,
👉 알림은 뜨는데 중복으로 두세 번씩 표시되던 문제와
👉 브라우저 상태별로 푸시 알림이 어떻게 동작하는지를 테스트한 기록이다.

 

---

1. 중복 알림 문제 😅

처음 Firebase 콘솔에서 테스트 메시지를 보냈을 때,
똑같은 알림이 두 번, 많게는 세 번씩 뜨는 현상이 발생했다.

 

원인

• Firebase에서 notification 메시지를 보내면 → 브라우저가 자동으로 알림을 띄움
• 그런데 내 서비스워커 코드에서도 showNotification을 또 실행
• 결과적으로 알림이 중복 표시된 것

즉, “Firebase도 띄우고, 내가 또 띄우고” → 알림 폭탄 🎇

 

---

2. 해결 방법

서비스워커에서 불필요한 showNotification 코드를 제거했다.
이제는 클릭 이벤트(notificationclick)만 남겨서,
알림을 누르면 원하는 페이지로 이동만 처리하도록 단순화했다.

/* global self, importScripts */
importScripts('https://www.gstatic.com/firebasejs/10.12.2/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.12.2/firebase-messaging-compat.js');

firebase.initializeApp({ /* firebaseConfig */ });
firebase.messaging(); // 초기화만

// 알림 클릭 이동만 처리
self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  const url = event.notification?.data?.click_action || '/';
  event.waitUntil(
    (async () => {
      const clients = await self.clients.matchAll({ type: 'window', includeUncontrolled: true });
      const focused = clients.find((c) => {
        try { const u = new URL(c.url); return url.startsWith('/') ? u.pathname === url : c.url.includes(url); }
        catch { return false; }
      });
      if (focused && 'focus' in focused) return focused.focus();
      if (self.clients.openWindow) return self.clients.openWindow(url);
    })()
  );
});

 

👉 결과: 이제 알림은 한 번만 정확히 뜸 🎉

 

---

3. 브라우저 상태별 테스트

알림 중복 문제를 해결한 뒤,
“브라우저 상태에 따라 푸시가 어떻게 오는지”도 확인했다.

• 포그라운드 (홈페이지 열려있음) → 알림 정상 도착
• 백그라운드 (탭 닫힘, 브라우저는 살아있음) → 알림 정상 도착 (서비스워커가 처리)
• 브라우저 완전 종료 (프로세스 종료) → 알림 즉시 ❌
  • 하지만 FCM 서버가 메시지를 큐에 보관
  • 브라우저를 다시 실행하면 누적 알림이 도착 ✔️

 

---

4. 배운 점 💡

• 웹 푸시는 서비스워커가 핵심 → 탭이 닫혀도 알림이 온다
• FCM의 notification 메시지는 자동으로 알림을 띄워주므로, 중복 showNotification 코드를 넣으면 안 된다
• 브라우저를 완전히 종료하면 알림은 즉시 못 받는다 → 재실행 시 큐에 쌓인 알림이 표시됨

 

---

마무리

1편에서는 “알림이 아예 안 뜰 때”를 다뤘고,
이번 2편에서는 “알림은 뜨지만 중복으로 뜨는 문제 + 브라우저 상태별 테스트”를 정리했다.