JavaScript Firebase 클라우드 메시징 클라이언트 앱 설정

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

FCM SDK는 HTTPS를 통해 제공되는 페이지에서만 지원됩니다. 이는 HTTPS 사이트에서만 사용할 수 있는 서비스 작업자를 사용하기 때문입니다. 공급자가 필요한 경우 Firebase 호스팅 이 권장되며 자체 도메인에서 HTTPS 호스팅을 위한 무료 등급을 제공합니다.

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

FCM SDK 추가 및 초기화

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

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

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);

import firebase from "firebase/app";
import "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
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 Console에서 프로젝트에 대해 FCM 등록 API 를 사용 설정해야 합니다. API를 활성화할 때 Firebase에 사용하는 것과 동일한 Google 계정으로 Cloud Console에 로그인했는지 확인하고 올바른 프로젝트를 선택했는지 확인하세요. FCM SDK를 추가하는 새 프로젝트에는 이 API가 기본적으로 활성화되어 있습니다.

FCM으로 웹 자격 증명 구성

FCM 웹 인터페이스는 "Voluntary Application Server Identification" 또는 "VAPID" 키라는 웹 자격 증명을 사용하여 지원되는 웹 푸시 서비스에 대한 전송 요청을 승인합니다. 앱에서 푸시 알림을 구독하려면 한 쌍의 키를 Firebase 프로젝트에 연결해야 합니다. 새 키 쌍을 생성하거나 Firebase 콘솔을 통해 기존 키 쌍을 가져올 수 있습니다.

새 키 쌍 생성

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

기존 키 쌍 가져오기

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

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

앱에 키를 추가하는 방법에 대한 지침은 앱에서 웹 자격 증명 구성 을 참조하십시오. 키 형식 및 키 생성 방법에 대한 자세한 정보는 애플리케이션 서버 키 를 참조하십시오.

앱에서 웹 자격 증명 구성

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 파일이 이미 없는 경우 해당 이름으로 빈 파일을 만들고 토큰을 검색하기 전에 도메인의 루트에 배치합니다. 나중에 클라이언트 설정 프로세스에서 의미 있는 콘텐츠를 파일에 추가할 수 있습니다.

현재 토큰을 검색하려면:

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

// 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 for Web(JavaScript)을 사용하기 위한 몇 가지 옵션은 다음과 같습니다.

• 메시지를 수신 하는 기능을 앱에 추가하십시오.
• 자습서 중 하나를 시도하십시오: 백그라운드 앱에 첫 번째 메시지 보내기 또는 여러 장치에 메시지 보내기 .
• GitHub 에서 전체 샘플을 검토하세요.
• JavaScript 참조 를 검토하십시오.
• API 구현에 대한 비디오 연습 을 보십시오.