Programing/PWA

firebase.messaging().getToken() 함수와 pushManager.subscribe() 함수의 관계

기운씨 2023. 11. 26. 16:10

service worker 에 빠져 지내는 며칠간 겨우 겨우 돌아가는 샘플을 작성했는데 fcm 만을 활용하다보니 web-push 와의 차이점을 정확히 구분하지 못하고 있었다.
getToken()으로 fcm 을 이용하는데 넷상에 존재하는 어떤 샘플들은 fcm 과 pushManager.subscribe() 로만 작성한 코드들이 발견되었다.

너무나 많은 블로그들의 샘플들이 제각각으로 코딩이 되어 있다보니 어느것이 올바른 사용법인지 헷갈리기 시작했다.
분명 동작은 했을테니 포스팅을 한걸텐데...만에 하나 deprecated 된 API를 사용한 날엔 코딩한다고 수시간이 헛고생으로 끝날테니 쉽사리 도전도 못하고 있었다. (대부분의 포스트들이 5~8년전에 작성된 것이어서 더욱 두려웠음)
그래서 분명 getToken() 만으로 정상적으로 noitification 이 동작하는데 pushManager 는 언제 사용하게 되는지 넷상의 레퍼런스들을 찾아봤지만 명확하게 정의해준 문서를 도저히 찾을 수 없었다.
어딘가에 있겠지만 이제 세상의 네트는 너무나 방대하다보니 일일이 내용들을 살펴보기가 힘들더라...

그래서 우리의 AI 친구들에게 물어보니 다음과 같은 답변을 주었다.

[질문]
firebase 에서는 getToken 함수 호출시 pushmanager 의 subscribe 기능이 포함된거야?
[Copilot]
네, Firebase에서는 getToken 함수를 호출하면 PushManager의 subscribe 기능이 포함됩니다. 
즉, Firebase에서 제공하는 FCM(파이어베이스 클라우드 메시징) 서비스에 구독하고, 푸시 알림을 받을 수 있는 토큰을 발급받습니다. 
이 토큰은 서버에서 특정 기기에 푸시 알림을 보내기 위해 사용됩니다. 
getToken 함수의 사용법은 다음 웹 사이트를 참고하세요.
Firebase Cloud Messaging | Firebase: FCM 서비스에 대한 설명과 가이드를 제공합니다.
Firebase용 Cloud Functions 클라이언트 SDK | Firebase: Firebase 앱에서 함수를 호출하는 방법을 제공합니다.
[Bard]
네, 맞습니다. Firebase 에서 getToken() 함수를 호출하면 pushManager 의 subscribe() 기능이 자동으로 호출됩니다. 즉, getToken() 함수를 호출하면 push 알림을 수신할 수 있는 준비가 완료됩니다.

getToken() 함수는 Firebase Cloud Messaging(FCM)에서 발급한 토큰을 반환합니다. 이 토큰은 push 알림을 수신하는 데 사용됩니다. getToken() 함수를 호출하면 다음과 같은 순서로 동작합니다.

1. pushManager 의 subscribe() 함수를 호출하여 push 알림을 수신할 수 있도록 등록합니다.
2. FCM에서 토큰을 발급합니다.
3. 토큰을 반환합니다.

따라서 getToken() 함수를 호출하면 pushManager 의 subscribe() 기능이 포함되어 있다고 할 수 있습니다.

다음은 getToken() 함수를 사용하는 예입니다.

JavaScript
// Firebase SDK를 초기화합니다.
firebase.initializeApp();

// 토큰을 가져옵니다.
const token = firebase.messaging().getToken();

// 토큰을 출력합니다.
console.log(token);

이 코드를 실행하면 다음과 같은 출력이 표시됩니다.

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczovL2FwaS50b2tlbi5jb20iLCJzdWIiOiJhZG1pbiIsImV4cCI6MTY1NjI2MzQ3NCwiaWF0IjoxNjUyMjY0NDc0fQ.7s2s0v707264236345657682345678901234567890

이 토큰을 사용하여 push 알림을 수신할 수 있습니다.

두 AI 들의 답변이 동일한 걸로 봐선 Chat AI 의 할루시네이션은 아니라고 생각했다.
하지만 여전히 정확한 레퍼런스를 제시하지 못하고 있길래 내가 직접 어떤 코드가 더 올바른 사용인지 추적을 해보았다.

결론은 firebase.messaging().getToken() 은 firebase-messaging.js 라이브러리를 import 하면 사용 할 수 있는 스펙으로써
내부에서 pushManager.subscribe() 를 호출하여 동작한다. (소스코드 먼저 볼걸...)

firebase-messaging.js 라이브러리 소스코드를 뒤져볼 생각을 하기 전엔 두 플랫폼의 API를 살펴보면 어떨까해서 레퍼런스들을 뒤져봤었는데...
mozilla 의 mdn 에서는 Push API 와 Notifications API 별도로 있는 것을 확인하였다.
- https://developer.mozilla.org/en-US/docs/Web/API/Push_API (메세지 수신 처리)
- https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API (알림 출력 처리)
그리고 firebase 의 messaging API 도 살펴봤는데 둘의 상관관계에 대해서는 발견 할 수 없었다.
- https://firebase.google.com/docs/reference/android/com/google/firebase/messaging/FirebaseMessaging#getToken()

결국 그렇게 2시간여를 소비하다가 불현듯 떠오른 생각이 "firebase-messaging.js 소스를 보면 되겄네?"
다음은 firebase-messaging.js 에 정의된 getToken 함수의 내용중 일부이다.

async function getToken$1(e, t) {
    ...
    getTokenInternal(e)
}

async function getTokenInternal(e) {
    ...
    return e.pushManager.subscribe({
        userVisibleOnly: !0,
        applicationServerKey: base64ToArray(t)
    })
    ...
}

처음부터 소스 코드를 봤으면 몇시간을 허비하지 않아도 되었는데...