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

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

FCM SDK는 HTTPS를 통해 제공되는 페이지에서만 지원됩니다. 이는 HTTPS 사이트에서만 사용 가능한 서비스 워커를 사용하기 때문입니다. 제공업체가 필요하면 자체 도메인에서 무료로 HTTPS 호스팅할 수 있는 Firebase 호스팅이 권장됩니다.

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

자바스크립트 프로젝트에 Firebase 추가

아직 추가하지 않았다면 자바스크립트 프로젝트에 Firebase를 추가합니다.

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

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

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

새 키 쌍 생성

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

기존 키 쌍 가져오기

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

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

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

메시징 객체 검색

// Retrieve Firebase Messaging object.
const messaging = firebase.messaging();

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

FCM에서 다른 푸시 서비스로 메시지 요청을 보낼 때 usePublicVapidKey 메서드를 통해 VAPID 키 사용자 인증 정보를 사용할 수 있습니다. FCM에서 웹 사용자 인증 정보 구성의 안내에 따라 생성하거나 가져온 키를 사용하여 메시지 객체를 검색한 후 코드에 추가할 수 있습니다.

// Add the public key generated from the console here.
messaging.usePublicVapidKey("BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu");

등록 토큰 액세스

이 섹션에서는 앱 인스턴스의 등록 토큰을 검색하고 토큰 갱신 이벤트를 모니터링하는 방법을 설명합니다. 토큰을 처음 사용한 후에 토큰이 회전될 수 있으므로 토큰 갱신을 모니터링하면서 항상 최신 상태로 업데이트된 등록 토큰을 검색해야 합니다.

다음과 같은 경우에 등록 토큰이 변경될 수 있습니다.

  • 웹 앱이 등록 토큰을 삭제하는 경우
  • 사용자가 브라우저 데이터를 소거하는 경우. 이 경우 getToken을 호출하여 새 토큰을 검색하세요.

현재 등록 토큰 검색

현재 토큰을 검색하려면 getToken을 호출합니다. 알림 권한이 부여되지 않은 경우 이 메서드는 사용자에게 알림 권한을 요청합니다. 그렇지 않은 경우 토큰을 반환하거나 오류가 있으면 프라미스를 거부합니다.

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

다음과 같이 현재 토큰을 검색할 수 있습니다.

// Get Instance ID token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken().then((currentToken) => {
  if (currentToken) {
    sendTokenToServer(currentToken);
    updateUIForPushEnabled(currentToken);
  } else {
    // Show permission request.
    console.log('No Instance ID token available. Request permission to generate one.');
    // Show permission UI.
    updateUIForPushPermissionRequired();
    setTokenSentToServer(false);
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  showToken('Error retrieving Instance ID token. ', err);
  setTokenSentToServer(false);
});

토큰 갱신 모니터링

토큰이 새로 생성될 때마다 onTokenRefresh 콜백이 실행되므로 이 콜백의 컨텍스트에서 getToken을 호출하면 사용 가능한 현재 등록 토큰에 항상 액세스하게 됩니다.

// Callback fired if Instance ID token is updated.
messaging.onTokenRefresh(() => {
  messaging.getToken().then((refreshedToken) => {
    console.log('Token refreshed.');
    // Indicate that the new Instance ID token has not yet been sent to the
    // app server.
    setTokenSentToServer(false);
    // Send Instance ID token to app server.
    sendTokenToServer(refreshedToken);
    // ...
  }).catch((err) => {
    console.log('Unable to retrieve refreshed token ', err);
    showToken('Unable to retrieve refreshed token ', err);
  });
});

토큰이 확보되었으면 앱 서버로 전송하고 원하는 방법으로 저장하세요. Instance ID server API를 사용하여 구독 관련 정보를 가져올 수 있습니다.

다음 단계

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