[FCM] Firebase Cloud Messaging Vanilla JS + FastAPI에 적용하기

FCM 설정

• 공식 예제에서는 Node JS 기준으로 설명되어 있음
  https://firebase.google.com/docs/cloud-messaging/js/client?hl=ko&_gl=1*16582yh*_up*MQ..*_ga*MTk1Nzk3ODc5Mi4xNzEzMjI3MTcy*_ga_CW55HF8NVT*MTcxMzIyNzE3Mi4xLjAuMTcxMzIyNzE3Mi4wLjAuMA..#web-modular-api
• Vanilla JS 환경에서 하는 법 정리

자바스크립트 Firebase 클라우드 메시징 클라이언트 앱 설정

 

1. Firebase CDN 추가

여러 방법을 시도해봤는데 가장 정상적으로 동작한 방법은 아래와 같다.

<!-- index.html -->
<script type="module">
        import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.11.0/firebase-app.js'
        import { getMessaging, getToken, onMessage } from 'https://www.gstatic.com/firebasejs/10.11.0/firebase-messaging.js'
        ...

처음에는 CDN 활용해서

<script src="https://cdnjs.cloudflare.com/ajax/libs/firebase/10.11.0/firebase-app.js" integrity="sha512-JcwDQxh56yOxNHIafGu2ykBz2TUF9vsGSySz72SwfN4XSm/4jls/vPWV5wPWKTekXPtPHejHN7jUBCdJB0Yehw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

이렇게도 해봤는데, 제대로 동작하지 않아서 module 방식으로 필요한 부분을 구현하기로 했다.

 

2. Firebase Config 추가 및 초기화

• 프로젝트 설정에서 config를 얻을 수 있음.

// index.html
// appKey = VAPID Key
const appKey = "YOUR_VAPID_KEY";
const config = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID",
  measurementId: "YOUR_MEASUREMENT_ID",
};

initializeApp(config);
const messaging = getMessaging();

그리고 알림 권한을 받는다. 과거 firebase 버전에서는 messaging을 통해서 권한을 받았던 것 같은데, 근래에는 바뀌었다.

// index.html
Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
        console.log('Notification permission granted.');
        if (isTokenSentToServer()) {
            console.log('Token already sent to server');
        }
    } else {
        console.log('Unable to get permission to notify.');
    }
}).catch(function (err) {
    console.log('Unable to get permission to notify.', err);
});

 

3. 웹 사용자 인증 정보 구성

• 자발적 애플리케이션 서버 ID(VAPID 키) 라는 웹 사용자 인증 정보를 통해 웹 푸시 서비스 보내기 요청 승인
• 키 쌍을 생성하거나 기존 것을 가져올 수 있음

 

• FCM을 쓰기 위해서 Server Key(VAPID key) 라는 게 필요한데, 이걸 위해서 Cloud Messaging API(기존) 이라고 표되어있는 API를 추가해야 한다. 점 세 개 누르고 API 관리자로 프로젝트에 추가하자.
• 그러고 나면 Server Key가 나온다.

 

4. getToken을 통해서 사용자 인증

• getToken 을 이용해서 기기 식별용 토큰을 만들고 받아올 수 있다.
• vapidKey 에 server key를 넣으면 된다.

getToken(messaging, { vapidKey: 'YOUR_VAPID_KEY' })
  .then(function (currentToken) {
      if (currentToken) {
          console.log(currentToken);
          setTokenSentToServer(true, currentToken);
      } else {
          setTokenSentToServer(false);
      }
  }).catch(function (err) {
      console.log('An error occurred while retrieving token. ', err);
      showToken('Error retrieving Instance ID token. ', err);
      setTokenSentToServer(false);
  });

5. firebase-messaging-sw.js 등록

• FCM 사용을 위해서는 firebase-messaging-sw.js 라는 파일이 반드시 존재해야한다. 일단 뭘 시작하려고 하면 hostname/firebase-messaging-sw.js 파일을 찾으므로 루트 아래에서 접근 가능하도록 해줘야한다. 나는 FastAPI를 사용중이라서 서버에서 접근 가능하도록 경로를 추가해줬다.

@app.get("/firebase-messaging-sw.js")
def fcm():
    return FileResponse("firebase-messaging-sw.js")

• service worker 파일에서는 importScripts 를 활용해서 라이브러리를 붙여줄 수 있다.

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

• 이후로는 다른 건 별로 없다. 메인 js 파일에서 설정해줬던대로 해주면 된다.

// firebase-messaging-sw.js
firebase.initializeApp({
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID",
  measurementId: "YOUR_MEASUREMENT_ID",
});

const messaging = firebase.messaging();

https://medium.com/@cizu64/sending-notification-message-with-firebase-with-javascript-5d5c4bb02206

Firebase Push Notification Message with JavaScript

 

6. 메세지 수신 설정

• 메세지 수신 설정에는 onMessage 와 onBackgroundMessage 두 가지가 있다.
• onMessage: Foreground, focus가 해당 서비스에 가있는 경우(창이 떠있을 때) 받은 메세지 처리
  • 메인 js에서 처리해야한다.
• onBackgroundMessage: Background, 해당 서비스를 벗어나있는 경우에 받은 메세지 처리
  • service worker에서 처리해야한다.

! 정의해야하는 파일 외에서 정의하면 오류 발생하니 주의

// index.js
onMessage(messaging, (payLoad) => {
    console.log("Message Received");
    console.log(payLoad);
    var notificationTitle = payLoad.notification.title;
    var notificationOptions = {
        body: payLoad.notification.body,
        icon: payLoad.notification.icon,
    };
    var notification = new Notification(notificationTitle, notificationOptions);
});

// firebase-messaging-sw.js
messaging.onBackgroundMessage(function (payload) {
  console.log(
    "[firebase-messaging-sw.js] Received background message ",
    payload
  );

  const notificationTitle = payLoad.notification.title;
  const notificationOptions = {
    body: payLoad.notification.body,
    icon: payLoad.notification.icon,
  };

  return self.registration.showNotification(
    notificationTitle,
    notificationOptions
  );
});

 

7. Firebase console에서 테스트 메세지 보내기

• 첫번째 캠페인 만들기 - firebase 알림 메세지 선택
  
  

• 대략적인 내용 작성 후 테스트 메세지 전송 클릭
• 위에서 작성한 내용에서 getToken 을 통해서 받은 token을 FCM 등록 토큰 추가 란에 복붙

• 테스트 클릭

• 메세지 도착 확인!!
• 창을 다른 탭으로 돌려두고 background에서도 잘 도착하는지 확인하기

 

0. 마주친 오류 목록

FirebaseError: Messaging: A problem occurred while unsubscribing the user from FCM: Requested entity was not found.

• chrome에서만 발생하나?
• 상당히 고질적인 문제로 파악됨.

title: "firebase.messaging.getToken() edgecase when push notification is set back to default (ask) · Issue #2364 · firebase/firebase-js-sdk"
image: "https://opengraph.githubassets.com/03116c0e7b563d83b2956dd4dd240aafe3681c25a9141c528f6dbf89d1dbfd6c/firebase/firebase-js-sdk/issues/2364"
description: "[REQUIRED] Describe your environment Operating System version: macOS Mojave Version 10.14.6 Browser version: Google Chrome Version 78.0.3904.97 Firebase SDK version: 7.0.0 Firebase Product: Firebas…"
url: "https://github.com/firebase/firebase-js-sdk/issues/2364"

• 알림 권한 설정을 초기화하면 해결되긴 함

messaging.setbackgroundmessagehandler is not a function

• setBackgroundMessageHandler 는 onBackgroundMessage 로 변경됨

firebase messaging domexception failed to execute 'atob' on 'window' the string to be decoded is not correctly encoded

• VAPID 제대로 넣은 게 맞는지 확인

messaging request permission is not a function

• firebase messaging 의 requestPermission 은 Notification.requestPermission 으로 대체됨

uncaught syntaxerror: unexpected token 'export' (at firebase-app.js:2520:1)

• script를 module로 적용해야만 위 에러가 발생하지 않음.
• module이 아니라 일반적으로 적용하고 싶으면 firebase-app-combat.js 사용 가능
  • 근데 저는 잘 안됐습니다...

firebase-messaging-sw.js:1 uncaught domexception: failed to execute 'importscripts' on 'workerglobalscope'

• firebase serviceworker는 따로 등록하는 코드를 넣지 않는다.

the script resource is behind a redirect, which is disallowed.

• hostname/firebase-messaging-sw.js 경로로 파일에 접근 가능한지 확인