Next.js에서 PWA 기반 FCM 푸시 알림 보내기

• 키오스크 반응형 웹 페이지를 PWA로 적용하여 앱에서도 푸시 알림을 보낼 수 있도록 FCM을 사용했다. 하지만 IOS에서는 Safari에서 웹 사이트에 접속하고 홈 화면에 추가한 후 푸시 허용을 해야 알림이 가는 한계가 있다.

• 파이어베이스 SDK를 초기화하고, 푸시 알림 허용을 위해 Notification.requestPermission()을 사용하며, 토큰 발급은 vapid key를 통해 웹 푸시 서비스에 대한 보내기 요청을 승인 받는다.

• 웹 푸시 인증서를 발급받아 토큰을 생성하고, 이를 통해 푸시 알림을 받을 수 있도록 설정하는 코드를 작성한다. 이 과정에서 발생하는 오류를 처리하고, 토큰을 생성할 수 없는 경우에 대한 처리도 구현한다.

• 서비스워커를 등록하여 백그라운드에서 푸시를 받고 처리할 수 있도록 한다. 이를 위해 파이어베이스 키를 공개하며, 이는 데이터베이스 보안 규칙이나 앱 체크 등을 활용하여 서버를 보호한다. 푸시 발송은 Firebase Admin SDK를 활용하여 구현한다.