FCM JavaScript API를 사용하면 Push API 를 지원하는 브라우저에서 실행되는 웹 앱에서 알림 메시지를 받을 수 있습니다. 여기에는 이 지원 매트릭스 에 나열된 브라우저 버전과 Push API를 통한 Chrome 확장 프로그램이 포함됩니다.
FCM SDK는 HTTPS를 통해 제공되는 페이지에서만 지원됩니다. 이는 HTTPS 사이트에서만 사용할 수 있는 서비스 작업자를 사용하기 때문입니다. 공급자가 필요한 경우 Firebase 호스팅 이 권장되며 자체 도메인에서 HTTPS 호스팅을 위한 무료 등급을 제공합니다.
FCM JavaScript API를 시작하려면 웹 앱에 Firebase를 추가하고 등록 토큰에 액세스하기 위한 로직을 추가해야 합니다.
FCM SDK 추가 및 초기화
아직 하지 않았다면 Firebase JS SDK를 설치하고 Firebase를 초기화 합니다.
Firebase Cloud Messaging JS SDK를 추가하고 Firebase Cloud Messaging을 초기화합니다.
Web version 9
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 version 8
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 콘솔을 통해 기존 키 쌍을 가져올 수 있습니다.
새 키 쌍 생성
- Firebase 콘솔 설정 창의 클라우드 메시징 탭을 열고 웹 구성 섹션으로 스크롤합니다.
- 웹 푸시 인증서 탭에서 키 쌍 생성 을 클릭합니다. 콘솔에 키 쌍이 생성되었다는 알림이 표시되고 공개 키 문자열과 추가된 날짜가 표시됩니다.
기존 키 쌍 가져오기
웹 앱에서 이미 사용 중인 기존 키 쌍이 있는 경우 FCM API를 통해 기존 웹 앱 인스턴스에 연결할 수 있도록 FCM으로 가져올 수 있습니다. 키를 가져오려면 Firebase 프로젝트에 대한 소유자 수준 액세스 권한이 있어야 합니다. base64 URL 안전 인코딩 형식으로 기존 공개 및 비공개 키를 가져옵니다.
- Firebase 콘솔 설정 창의 클라우드 메시징 탭을 열고 웹 구성 섹션으로 스크롤합니다.
- 웹 푸시 인증서 탭에서 "기존 키 쌍 가져오기" 링크 텍스트를 찾아 선택합니다.
- 키 쌍 가져오기 대화 상자에서 해당 필드에 공개 및 개인 키를 제공하고 가져오기 를 클릭하십시오. 콘솔에 공개 키 문자열과 추가된 날짜가 표시됩니다.
앱에 키를 추가하는 방법에 대한 지침은 앱에서 웹 자격 증명 구성 을 참조하십시오. 키 형식 및 키 생성 방법에 대한 자세한 정보는 애플리케이션 서버 키 를 참조하십시오.
앱에서 웹 자격 증명 구성
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 version 9
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); // ... });
Web version 8
// 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); // ... });
토큰을 얻은 후 앱 서버로 보내고 원하는 방법을 사용하여 저장하십시오.
다음 단계
설정 단계를 완료한 후 FCM for Web(JavaScript)을 사용하기 위한 몇 가지 옵션은 다음과 같습니다.
- 메시지를 수신 하는 기능을 앱에 추가하십시오.
- 자습서 중 하나를 시도하십시오: 백그라운드 앱에 첫 번째 메시지 보내기 또는 여러 장치에 메시지 보내기 .
- GitHub 에서 전체 샘플을 검토하세요.
- JavaScript 참조 를 검토하십시오.
- API 구현에 대한 비디오 연습 을 보십시오.