FCM Foreground doesn't work

2020. 9. 10. 18:45Trouble Shooting

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

I've been working on integrating FCM in my Vue PWA app. So far I've managed to get the background notification working, but handling notifications when the app's on the foreground doesn't work. Her...

stackoverflow.com

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');