[FCM] Firebase Cloud Messaging 으로 웹에서 푸시알림 구현하기 (React 클라이언트)

FCM이 뭔지는 일단 나중에...

 

자세한 것은 👉  Firebase Cloud Messaging Documentation을 따라하면 됩니다.

 

참고.

단순히 서버 실행 없이 http, js 파일로 실행했더니 아래처럼 뜨더라고요... 아래 오류는 알림 권한 요청을 차단했다는 메시지인데, file:// 도메인으로 시작하면 크롬 알림 설정이 아무리해도 허용이 안됩니다.

FirebaseError: Messaging: The notification permission was not granted and blocked instead. (messaging/permission-blocked).

그래서 리액트 클라이언트로 변경해서 테스트해보기로...

 

 

동작 원리

React 클라이언트가 메시지 수신을 대기하고 있다가 FCM 에서 메시지를 보내면 푸시 알림을 띄웁니다. 이때 브라우저의 Service Worker 가 백그라운드 상태에서 돌아가며 사이트를 꺼도 푸시알림을 띄울 수 있게 해줍니다. 그러니 React 클라이언트는 Service Worker 에 대한 설정도 같이 해줘야 합니다.

 

구현

firebase 설치

firebase sdk 를 사용하기 위해 firebase 라이브러리를 추가해줍니다.

yarn install firebase

 

 

public/firebase-messaging-sw.js

아래 코드를 작성하면 fcm 라이브러리가 자동으로 service worker 를 설정해줍니다. 반드시 정적파일 루트 경로 아래에 firebase-messaging-sw.js 라는 이름의 파일로 저장해주어야 합니다. 또 정적파일이라 그런지...importScripts 로 해줘야 합니다! 푸시알림이 제대로 먹히지 않는다면 프로젝트 importScripts 문의 프로젝트 버전을 최신으로 수정해주세요. config 값은 프로젝트 설정 > 일반 탭 맨 하단 [내 앱] 에서 확인 가능합니다.

//프로젝트 버전 확인
importScripts("https://www.gstatic.com/firebasejs/9.5.0/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/9.5.0/firebase-messaging.js");

const config = {
  //프로젝트 설정 > 일반 > 하단의 내 앱 부분 복사
};

// Initialize Firebase
firebase.initializeApp(config);

const messaging = firebase.messaging();

//백그라운드 서비스워커 설정
messaging.onBackgroundMessage(messaging, (payload) => {
  console.log(
    "[firebase-messaging-sw.js] Received background message ",
    payload
  );
  
  // Customize notification here
  const notificationTitle = "Background Message Title";
  const notificationOptions = {
    body: payload,
    icon: "/firebase-logo.png",
  };
  
  self.registration.showNotification(notificationTitle, notificationOptions);
});

 

src/util/fcm.js

토큰을 얻고 포그라운드 메시지 수신을 설정하는 코드입니다. 이 토큰은 클라이언트를 식별하는 값입니다. 토큰을 얻기 위해서는 vapid가 필요한데, 이 값은 프로젝트설정 > 클라우드메시징 > 웹 구성의 웹푸시인증서 발급 에서 발급받을 수 있습니다. 이후 리액트 앱을 실행하면 콘솔창에 토큰값이 출력됩니다. 참고로 서비스워커와는 별도로 이쪽에서도 initializeApp 을 해줘야 합니다.(거기서만 하면 되는 줄 알고 안해줬더니 uncaught firebaseerror: firebase: no firebase app '[default]' has been created - call firebase app.initializeapp() 이런 오류가...)

import { initializeApp } from "firebase/app";
import { getMessaging, getToken, onMessage } from "firebase/messaging";

const config = {
  //프로젝트 설정 > 일반 > 하단의 내앱에서 확인
};

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

//토큰값 얻기
getToken(messaging, {
  vapidKey:
    "프로젝트설정 > 클라우드메시징 > 웹 구성의 웹푸시인증서 발급",
})
  .then((currentToken) => {
    if (currentToken) {
      // Send the token to your server and update the UI if necessary
      // ...
      console.log(currentToken);
    } else {
      // Show permission request UI
      console.log(
        "No registration token available. Request permission to generate one."
      );
      // ...
    }
  })
  .catch((err) => {
    console.log("An error occurred while retrieving token. ", err);
    // ...
  });

//포그라운드 메시지 수신
onMessage(messaging, (payload) => {
  console.log("Message received. ", payload);
  // ...
});

 

src/App.js

fcm 스크립트를 app.js 에 포함시켜줍니다.

import "./util/fcm";

...

 

메시지 테스트하기

firebase 에서 테스트할 수도 있고 api 테스트 툴로 테스트할 수도 있습니다.

 

firebase 에서 테스트

참여 > Cloud Messaging > Send your first message 를 선택한 후 테스트 메시지 전송을 누릅니다.

 

리액트 앱 콘솔창에 출력된 토큰값을 아래에 추가하고 테스트 버튼을 누르면 됩니다.

포그라운드 상태에서는 콘솔창에 메시지가 출력되고, 백그라운드 상태(사이트를 종료하거나 다른 탭으로 전환)에서는 아래처럼 푸시 알림이 옵니다.

 

api 툴로 테스트

POST 요청으로 https://fcm.googleapis.com/fcm/send  엔드포인트에 요청을 보냅니다. header 에는 Authorization 에 bearer 인증 토큰값을 같이 보내줘야 하는데, 이것은 프로젝트 설정 > 클라우드 메시징 > 프로젝트 사용자 인증 정보의 서버키 토큰을 복사하시면 됩니다. bearer와 그 뒤 띄어쓰기 꼭 앞에 붙여주셔야 합니다. key= 도 괜찮습니다.

 

send 하면 아래와 같은 결과가 오고, 푸시알림이 뜹니다.

 

api 툴이 없다면 vscode 에서 restclient 플러그인을 설치하고 test.http 파일을 생성해 아래처럼 테스트해줍니다.

curl --location --request POST 'https://fcm.googleapis.com/fcm/send' \
--header 'Authorization: bearer server-key' \
--header 'Content-Type: application/json' \
--data-raw '{
    "notification": {
        "title": "TEST",
        "body": "알림테스트"
        
    },
    "to": "token"
}'

 

 

혹시 오류가 난다면 리액트 서버를 아예 껐다가 다시 실행해보세요. 정적 파일 수정은 서버 종료하고 다시 실행해야 업데이트 됩니다.