FCM [1] Device Token 발급

FCM 엔진을 이용한 알림 처리에 있어 첫 단추는, 알림을 받고자 하는 사용자의 기기 토큰을 발급받는 것이다. 필자는 Spring Framework 기반의 작업 환경에서 처리하였지만, 레퍼런스를 찾아보면서 짐작하기로 '대부분의 프로젝트에서 동일하게 통용될 것' 을 전제로 구성되는 것 같기에. 이 글을 읽는 여러분의 환경에서도 충분히 FCM 엔진을 이용할 수 있으리라 예상한다.

1) Firebase Config

사전 작업으로 생성했던 FCM Console 내 프로젝트를 기억하는가? 해당 프로젝트에서 다음과 같이 접근하도록 하자.

추가한 앱을 클릭하면 톱니바퀴 모양의 설정 아이콘이 보이게 된다. 해당 아이콘을 클릭하여 프로젝트 설정으로 빠르게 이동할 수 있다. 정확히는 프로젝트 설정 내 해당 앱의 속성 정보로 이동된다. 해당 속성 정보의 하단으로 내려가면 다음과 같은 내용이 보일 것이다.

'SDK 설정 및 구성' 선택 값이 초기에는 npm 으로 되어있을 것이다. 우리는 JavaScript 값이 필요하니 '구성' 값을 선택하도록 하자. 그럼 firebaseConfig 값을 얻을 수 있다.

2) FCM 접근 js 생성

JAVA 단에서 알림을 전송하였을 때, FCM 서버에서 사용자의 기기에 접근할 수 있는 JavaScript 파일이 필요하다. 해당 파일의 이름은 반드시 firebase-messaging-sw.js 여야 한다. 그렇지 않으면 FCM 서버에서 접근할 수 없기 때문이다. 필자는 알림 신청 및 수신에 대한 기능 외에는 딱히 필요없었기에, 해당하는 js 만 CDN 형식으로 불러오기로 했다. 해당 파일의 소스코드는 다음과 같다.

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

// Firebase Config 설정
const config = {
    apiKey            : "your apiKey",
    authDomain        : "your authDomain",
    projectId         : "your projectId",
    storageBucket     : "your storageBucket",
    messagingSenderId : "your messagingSenderId",
    appId             : "your appId",
    measurementId     : "your measurementId"

// Firebase 설정 객체를 사용해 앱 초기화
firebase.initializeApp(config);

// Firebase Messaging 인스턴스 가져오기
const messaging = firebase.messaging();

// 백그라운드에서 메세지를 수신할 때의 처리
messaging.onBackgroundMessage((payload) => {
    console.log("message is coming!", payload);
    const notificationTitle = payload.notification.title;
    const notificationOptions = {
        body : payload.notification.body,
        icon : payload.notification.icon
    };
});

1번에서 획득한 firebaseConfig 값을 변수에 넣어주도록 하자.

3) Service Worker 등록

다음으로는 사용자의 기기 토큰을 발급받아야 한다. 그러기 위해서는 우선적으로 Service Worker 라는 친구를 document 내 등록하는 과정이 필요하다. 작업을 진행하는 과정에서 다소 시간이 걸릴 수 있으니 함수를 선언함에 있어 async 연산자를 붙여주면, 흐름에 따라 처리되는 JavaScript 특성 상 조금 더 나은 퍼포먼스를 발휘할 수 있다.

<script src="https://www.gstatic.com/firebasejs/10.14.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.14.1/firebase-messaging-compat.js"></script>

<script type="text/javascript">
    const FN = {
        fcmStart : async function () {

            // firebase app initialize
            firebase.initializeApp(WEB_PUSH.config);

            // firebase messaging 객체, 전역 변수로 할당시켜버리기
            const messaging = firebase.messaging();
            WEB_PUSH.messaging = messaging;

            // Service Worker 등록
            navigator.serviceWorker.register('/firebase-messaging-sw.js')
                .then((registration) => {

                    /**
                     *  해당 영역에서, Service Worker 통신 이후에 대한 처리를 진행한다.
                     *  필자는 브라우저의 알림 허용 여부를 파악할 수 있도록 처리하였다.
                     **/

                })
                .catch((e) => {

                    /**
                     *  해당 영역에서, Service Worker 통신 실패에 대한 처리를 진행한다.
                     *  필자는 console 로그를 찍히게 하여, 디버깅 할 수 있게 처리하였다.
                     **/

                });
        }
    }

    // Document 준비가 되었을 때
    $(document).ready( () => {

        // FCM 통신을 위한 Service Worker 등록
        FN.fcmStart();
    });
<script/>

4) User Device Token 발급

대망의 접속 기기의 토큰을 발급받기 위한 과정이다. 필자의 경우, Service Worker 등록 후 성공하였을 때 토큰을 발급 받을 수 있는 화면을 출력할 수 있도록 처리하였다. Service Worker 등록이 되지 않으면 어차피 토큰을 발급 받을 수 없다. 몇 번이고 테스트를 해보았지만(과거 버전에서는 토큰이 발급되었던 것으로 기억하기에...) 안되는 것은 어쩔 수 없지...

사용자 접속 기기 토큰 발급을 위한 간단한 프로세스는 다음과 같다. 보고 싶은 사람만 보도록 하자. 참고로 토큰을 발급 받기 위해서는 우선적으로, 사용자의 브라우저가 해당 웹 사이트에 대한 알림을 허용해야 한다.

1. Service Worker 등록

> Service Worker 등록되지 않았다면, exception 구문에서 console 에러 로그를 출력

> Service Worker 등록되었다면, 이후 과정을 진행

2.브라우저 알림 파악

> 브라우저의 알림이 설정되지 않았다면, [ A ]

> 브라우저의 알림이 거부되었다면, [ B ]

> 브라우저의 알림이 허용되었다면, [ C ]

[ A ] 브라우저 알림 요청

[ B ] 브라우저 캐시 지우는 방법 안내

[ C ] FCM Web Push Device Token 발급

브라우저의 알림을 요청하는 JavaScript 내역은 다음과 같다.

// 브라우저 알림 요청
Notification.requestPermission().then(function(permission) {
    if (permission === 'granted') {
        
        /**
         *  사용자가 알림에 대하여 '허용' 하였다는 것
         *  브라우저 알림 허용 후 새로고침 처리를 반드시 해야한다.
         *  그렇지 않으면 토큰을 여전히 발급받을 수 없다.
         **/
         location.reload();
    }
    else {
        
        /**
         *  사용자가 알림에 대하여 '허용' 하지 않았다는 것
         *  필자는 여기서 알림 허용을 하지 않았다는 alert 출력했다.
         **/
    }
});

FCM Web Push Device Token 발급하는 과정에 대한 JavaScript 내역은 다음과 같다.

const messaging = firebase.messaging();
messaging.getToken({ vapidKey: WEB_PUSH.publicVapidKey })
    .then((currentToken) => {

        /**
         *  FCM Device token 발급 성공
         *  필자는 발급받은 토큰을 서버로 전달하여, DB 내 적재하도록 처리하였다.
         *  이후 DB 내 적재된 토큰들을 대상으로 FCM Web Push 알림을 발송할 수 있다.
         **/
    })
    .catch((e) => {
        
        /**
         *  FCM Device token 발급 실패
         *  필자는 console 로그를 찍히게 하여, 디버깅 할 수 있게 처리하였다.
         **/
    });

일련의 과정을 모두 거치게 되면, 다음과 같은 콘솔을 확인 할 수 있다. 발급 받은 토큰은 추후 JAVA 단에서 FCM Web Push 알림 발송에 사용되니, 잘 보관하도록 하자.

(개인적으로 필자가 console.log() 함수를 통해 추가로 작성하긴 했지만... 알아서들 작성하도록 하자)