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

Push API를 지원하는 브라우저에서 실행되는 웹 앱에서 FCM JavaScript API를 사용하여 알림 메시지를 수신할 수 있습니다. 여기에는 이 지원 매트릭스에 나열된 브라우저 버전과 Push API를 통한 Chrome 확장 프로그램이 포함됩니다.

FCM SDK는 HTTPS를 통해 제공되는 페이지에서만 지원됩니다. 이는 HTTPS 사이트에서만 사용 가능한 서비스 워커를 사용하기 때문입니다. 제공업체가 필요한 경우 자체 도메인에서 HTTPS 호스팅에 무료 등급을 제공하는 Firebase 호스팅을 사용하는 것이 좋습니다.

FCM JavaScript API를 시작하려면 웹 앱에 Firebase를 추가하고 등록 토큰에 액세스하는 로직을 추가해야 합니다.

FCM SDK 추가 및 초기화

  1. 아직 진행하지 않았다면 Firebase JS SDK를 설치하고 Firebase를 초기화합니다.

  2. Firebase Cloud Messaging JS SDK를 추가하고 Firebase Cloud Messaging을 초기화합니다.

Web 

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

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = getMessaging(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = firebase.messaging();

웹용 FCM을 현재 사용 중이고 SDK 6.7.0 이상으로 업그레이드하려면 Google Cloud 콘솔에서 프로젝트에 대해 FCM Registration API를 사용 설정해야 합니다. API를 사용 설정할 때는 Firebase에 사용하는 것과 동일한 Google 계정을 사용하여 Cloud Console에 로그인하고, 올바른 프로젝트를 선택해야 합니다. FCM SDK를 추가하는 새 프로젝트에는 기본적으로 이 API가 사용 설정됩니다.

FCM에서 웹 사용자 인증 정보 구성

FCM 웹 인터페이스는 '자발적 애플리케이션 서버 ID' 또는 'VAPID' 키라고 하는 웹 사용자 인증 정보를 사용하여 지원되는 웹 푸시 서비스에 대한 보내기 요청을 승인합니다. 앱에서 푸시 알림을 구독하려면 키 쌍을 Firebase 프로젝트에 연결해야 합니다. Firebase Console을 통해 새 키 쌍을 생성하거나 기존 키 쌍을 가져올 수 있습니다.

새 키 쌍 생성

  1. Firebase 콘솔 설정 창의 클라우드 메시징 탭을 열고 웹 구성 섹션으로 스크롤합니다.
  2. 웹 푸시 인증서 탭에서 키 쌍 생성을 클릭합니다. Console에 키 쌍이 생성되었다는 알림이 표시되고 공개 키 문자열과 추가된 날짜가 표시됩니다.

기존 키 쌍 가져오기

이미 웹 앱에서 사용 중인 기존 키 쌍이 있으면 FCM으로 이 키 쌍을 가져와서 FCM API를 통해 기존 웹 앱 인스턴스에 연결할 수 있습니다. 키를 가져오려면 Firebase 프로젝트에 액세스할 수 있는 소유자 수준의 권한이 있어야 합니다. 기존 공개 및 비공개 키를 base64 URL 보안 인코딩 양식으로 가져옵니다.

  1. Firebase 콘솔 설정 창의 클라우드 메시징 탭을 열고 웹 구성 섹션으로 스크롤합니다.
  2. 웹 푸시 인증서 탭에서 링크 텍스트인 '기존 키 쌍 가져오기'를 찾아서 선택합니다.
  3. 키 쌍 가져오기 대화상자에서 해당 필드에 공개 및 비공개 키를 입력하고 가져오기를 클릭합니다. Console에 공개 키 문자열과 추가된 날짜가 표시됩니다.

키를 앱에 추가하는 방법은 앱에서 웹 사용자 인증 정보 구성을 참조하세요. 키 형식과 키 생성 방법에 대한 자세한 내용은 애플리케이션 서버 키를 참조하세요.

앱에서 웹 사용자 인증 정보 구성

getToken(): Promise<string> 메서드를 사용하면 FCM에서 다른 푸시 서비스로 메시지 요청을 보낼 때 VAPID 키 사용자 인증 정보를 사용할 수 있습니다. FCM에서 웹 사용자 인증 정보 구성의 안내에 따라 생성하거나 가져온 키를 사용하여, 메시징 객체를 가져온 후 이 키를 코드에 추가합니다.

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

const messaging = getMessaging();
// Add the public key generated from the console here.
getToken(messaging, {vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

등록 토큰 액세스

앱 인스턴스의 현재 등록 토큰을 가져와야 한다면 먼저 Notification.requestPermission()을 사용해 사용자에게 알림 권한을 요청합니다. 다음과 같이 호출했을 때 권한이 부여되면 토큰을 반환하고 거부되면 프로미스를 거부합니다. 

function requestPermission() {
  console.log('Requesting permission...');
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('Notification permission granted.');

FCM에는 firebase-messaging-sw.js 파일이 필요합니다. firebase-messaging-sw.js 파일이 아직 없다면 토큰을 가져오기 전에 이 이름으로 빈 파일을 만들어 도메인의 루트에 저장합니다. 나중에 클라이언트 설정 프로세스에서 의미 있는 내용을 파일에 추가할 수 있습니다.

다음과 같이 현재 토큰을 가져올 수 있습니다.

Web

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

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
const messaging = getMessaging();
getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } 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);
  // ...
});
messaging_get_token.js

Web

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken({ vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } 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);
  // ...
});
index.js

토큰이 확보되었으면 앱 서버로 전송하고 원하는 방법으로 저장하세요.

다음 단계

설정 단계를 완료한 후 다음과 같은 방법으로 웹용 FCM(JavaScript)을 본격적으로 사용해 보세요.