[도착 알리미 SUFY] 9. FCM으로 포그라운드 푸시 알림 보내기

 

저번 포스트를 마치면서 '운에 따라 푸시가 전송된다'고 작성했었는데...
3일의 사투 끝에 드디어 그 원인을 알아냈다.

---

Firebase의 구글 API 문서를 읽어보다가... 아래와 같은 내용을 발견했다.

Notification messages are handled differently depending on whether the page is in the foreground (has focus), or in the background, hidden behind other tabs, or completely closed.

 

그렇다... 해당 웹사이트가 현재 Background냐, Foreground냐에 따라 다르게 작동한다는 것이었다......
기본적으로 푸시 알림이 전송되는 건 백그라운드였고, 포그라운드에서는 클라이언트 측에서 따로 로직을 작성해 주어야 했던 것이었다!

그동안 운에 따라 푸시가 전송됐던 이유가... SUFY 웹페이지를 백그라운드에 놓고 있었던 경우에는 푸시가 발송이 됐지만, 포그라운드에 놓고 활성화시키고 있었던 경우에는 푸시가 발송이 되지 않았던 것이다!!

 

자... 그럼 이제 어떻게 해야될 지 알겠지??
백그라운드는 정상적으로 푸시 알림이 전송되므로, 이제 포그라운드에서 메시지를 받으면 푸시 알림을 발송하는 코드를 작성하면 될 것!

 

Firebase 구글 API 문서에 따르면, JavaScript 환경에서 푸시 메시지는 onMessage() 함수로 처리할 수 있다.
그래서 모든 jsp에 firebase에 메시지가 도착하면 그 메시지로 푸시 알림을 전송하는 코드를 첨가해주면 될 것!

나는 웹의 이름과 각종 src를 import하는 헤더 jsp로 imports.jsp라는 파일을 작성해두고 이걸 모든 페이지에 import 해주고 있었는데, 여기에 푸시 알림을 전송하는 코드를 추가해 주었다.
굳이 파일을 하나 더 만들 필요는 없을 것 같아서...ㅋㅋ

< imports.jsp >

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

<script>
    ////////////////////////////////////// 푸시 전송 시작 //////////////////////////////////////
    const firebaseConfig = {
        apiKey: "***************************",
        authDomain: "***************************",
        projectId: "***************************",
        storageBucket: "***************************",
        messagingSenderId: "***************************",
        appId: "***************************",
        measurementId: "***************************"
    };
    firebase.initializeApp(firebaseConfig);

    const messaging = firebase.messaging();
    messaging.onMessage(function () { // 메시지가 도착하면 아래 코드를 실행하여 푸시 알림을 전송한다.
        const title = "목적지 도착 알림"
        const contents = {
            body: "탑승하신 열차가 목적지의 전역을 출발했습니다. 이번 정차역에서 내리시면 됩니다!",
            icon: "/image/SUFY2.png"
        }
        new Notification(title, contents);
    })
    ////////////////////////////////////// 푸시 전송 끝 //////////////////////////////////////
</script>

 

이렇게 해주면... 이제 언제 어떤 때라도, 푸시 알림을 보내면 바로 내 디바이스로 푸시 알림이 전송된다.

 

이제 대략 핵심 기능들은 다 구현한 것 같다!
다음 포스트부터는 편의 기능들을 몇 개 넣고 좀 다듬은 후 EC2로 배포해보려고 한다!