FCM Foreground doesn't work

FCM(이하, Firebase Cloud Message)에서는 크게 2가지의 알림이 있습니다.

• Background Notification(백 그라운드 알림)
• Foreground Notification(포어 그라운드 알림)

 

주로 설정하게 되는 것이 setBackgroundHandler를 통해 Background 알림을 작성하게 됩니다.

백그라운드는 주로 다음과 같은 상황에서 동작합니다.

• 다른 탭을 보고 있을 경우
• 브라우저를 보고 있지 않은 경우
• 서비스워커는 백그라운드에서 동작하지만, 브라우저는 닫혀있는 경우

 

백그라운드 알림은 Windows10에서는 다음과 같이 우측 하단을 통해서 알림이 오게됩니다.

 

하지만 Foreground 즉 포어그라운드의 동작은 서비스워커를 설정한 즉 본인의 사이트를 보고 있는 경우

현재 활성화 상태인 경우를 말하며, 이 상황에서 동작하는 코드는 대체로 다음과 같이 작성을 합니다.

const messaging = firebase.messaging()
messaging.onMessage((payload) => {
  console.log(payload)
})

하지만 이 firebase onMessage에는 치명적인 결함이 존재했는데 버전별로 지원을 했다가 안했다가 하는 기이한 현상이 있습니다.

 

관련 내용으로는

https://stackoverflow.com/questions/61824118/firebase-cloud-messaging-foreground-notification-not-working-in-vue

Firebase Cloud Messaging foreground notification not working in Vue

2020.09.10 기준 현재 Firebase script의 최신버전은 7.18.0 으로 foreground 메시지를 사용하기 위해서는

7.8.0 버전으로 설정하여야 한다는 내용입니다.

 

// firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/7.8.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.8.0/firebase-messaging.js');