반응형 FCM3 FCM 웹 푸시 실전 테스트: 중복 알림 문제와 브라우저 상태별 동작 지난 글 [웹 푸시 알림 삽질기: Firebase FCM 적용 중 알림이 안 뜰 때 해결법]에서는“푸시 이벤트는 잡히는데 알림이 안 뜨던 문제”를 다뤘다. 이번 글은 그 다음 단계,👉 알림은 뜨는데 중복으로 두세 번씩 표시되던 문제와👉 브라우저 상태별로 푸시 알림이 어떻게 동작하는지를 테스트한 기록이다. 1. 중복 알림 문제 😅처음 Firebase 콘솔에서 테스트 메시지를 보냈을 때,똑같은 알림이 두 번, 많게는 세 번씩 뜨는 현상이 발생했다. 원인Firebase에서 notification 메시지를 보내면 → 브라우저가 자동으로 알림을 띄움그런데 내 서비스워커 코드에서도 showNotification을 또 실행결과적으로 알림이 중복 표시된 것즉, “Firebase도 띄우고, 내가 또 띄우고” → 알.. 2025. 8. 26. 웹 푸시 알림 삽질기: Firebase FCM 적용 중 알림이 안 뜰 때 해결법 지난 글 [웹에서 Firebase Cloud Messaging(FCM) 푸시 알림 적용하기]에서는 기본 세팅(프로젝트 설정, VAPID 키, 토큰 발급 등)까지 정리했었다.“여기까지 하면 바로 알림 오겠지~” 하고 신나게 테스트했는데… 👉 로그는 찍히는데 알림이 안 뜨는 사태 발생 😱 이번 글은 그때 했던 삽질 기록 + 해결 팁을 남겨둔다.혹시 저처럼 똑같이 헤매는 분들께 도움이 되길 🙏 1. 문제 상황서비스워커 등록은 잘 됐음 → DevTools에서도 Activated 확인푸시 이벤트도 들어옴 → 콘솔에 [SW] Push Received: 로그 찍힘 근데 알림 UI는 전혀 안 뜸… “이게 뭐야? 푸시 이벤트는 잡히는데 정작 사용자한테는 아무 것도 안 보이네?” 2. 삽질의 여정 🥲(1) Serv.. 2025. 8. 25. 웹에서 Firebase Cloud Messaging(FCM) 푸시 알림 적용하기 웹에서 푸시 알림을 붙여야 하는 일이 생겼습니다.앱에서는 흔히 쓰던 FCM이지만, 웹은 처음이라 문서를 보면서 하나씩 적용해봤습니다.생각보다 놓치기 쉬운 포인트가 있어서 정리해둡니다. 1. 사전 준비HTTPS 환경에서만 동작합니다. (개발은 http://localhost 허용)Firebase 콘솔 → Project settings → Cloud Messaging → Web configuration에서 VAPID Key를 생성하고 Public Key를 복사해둡니다.iOS Safari는 iOS 16.4 이상, 그리고 홈 화면에 추가된 PWA 환경이어야 알림이 옵니다.👉 여기서 첫 번째 깨달음: 서비스워커, HTTPS, VAPID 키 이 세 가지가 없으면 진행이 안 됩니다. 2. Firebase 초기화먼저.. 2025. 8. 20. 이전 1 다음 반응형
