[Firebase] FCM 푸시 메세지 - Notification

#[Firebase] FCM 푸시 메세지 - Notification

프로젝트 도중 Firebase FCM을 적용하다가

내가 올린 포스팅으로는 설명이 좀 부족하다는 죄책감이... ㅎ

이번 글에서는

기존 포스팅에 올린 것을 좀 더 상세히 설명할 것이다.

부디 잘 참고해서

적용하기 바람 ㅎㅎ

1. firebase-messaging-sw.js

firebase-messaging-sw.js는 service worker 파일이다.

크롬에서 F12 -> Application -> Service Workers에

firebase-messaging-sw.js이 있다면 정상작동하는 것이다.

FCM을 통해 푸시메세지를 보냈을 때

사용자가 브라우저를 꺼놓거나 다른 페이지 화면을 보고 있을 경우

이 service worker에 등록되어있는 파일이 작동하는 것이다.

2. Background

다음은 저번 포스팅때 올린 코드의 일부분이다.

const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function(payload){
 
    const title = "Hello World";
    const options = {
            body: payload.data.status
    };
 
    return self.registration.showNotification(title,options);
});
 

FCM으로 데이터가 들어오면 Notification을 보여주는 코드이다.

BackgroundMessageHandler라는 용어를 볼 때,

백그라운드 상태일 때 동작한다는 것을 알 수 있다.

3. foreground

그렇다면 백그라운드의 반대인 포그라운드 상태일 때는???

그 동작을 onMessage에서 관리한다.

다음은 포그라운드 상태일 때 메세지 동작 코드이다.

messaging.onMessage(function(payload){
        console.log('onMessage: ', payload);
        var title = "고라니 서비스";
        var options = {
                body: payload.notification.body
        };
        
        var notification = new Notification(title, options);
});

이 코드를 원하는 html 페이지에 삽입한다면

해당 페이지로 직접 <div>를 설정하여 실시간으로 메세지를 보여주던가

alert창 또는 나처럼 Notification을 새로 생성해도 된다.

브라우저 마다 Notification 지원기능이 다르기 때문에 다음 표를 참고하기 바란다.

4. options

Notification에는 다양한 옵션을 지정해 줄 수 있다.

https://developer.mozilla.org/en-US/docs/Web/API/notification/Notification

이 링크에 들어가면 굉장히 많은 옵션을 Notification에 줄 수 있다는 것을 알 수 있다.

난 그중에서 icon 옵션을 써봤는데

코드는 option에 icon만 추가해주면 된다.

messaging.setBackgroundMessageHandler(function(payload){
 
    const title = "고라니 서비스";
    const options = {
            body: payload.notification.body,
            icon: payload.notification.icon
    };     
    
    return self.registration.showNotification(title,options);
});

icon 주소를 잘 보냈다면

다음처럼 푸시메세지에 이미지가 들어갈 것이다.

동그랗게 고라니 그림이 들어간 것을 볼 수 있다.

참고로

나는 웹 앱을 만들어서 AWS를 이용해 서버를 올렸다.

그래서 스마트폰으로 푸시메세지를 테스트 할 수 있었다.

모바일 환경과 데스크톱 환경은 생각보다 다른 점이 많아서

정말 며칠동안 FCM 하나가지고 삽질을 했다 ㅠㅠ

단순히 기능이 된다고 끝이 아니라

기능 구현하는 코드를 이해해야

해당 기능을 자신의 프로젝트에 맞게 구현할 수 있다는 것을 명심해야 한다.

To be continued.........

Made by 꿩