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

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

메시지 전송의 설명에 따라 HTTP 및 XMPP 앱 서버 프로토콜을 사용하여 자바스크립트 클라이언트에 메시지를 전송합니다. Firebase 콘솔에서 메시지를 보내는 기능은 지원되지 않습니다.

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

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

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

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

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

새 키 쌍 생성

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

기존 키 쌍 가져오기

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

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

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

메시지 수신을 위해 브라우저 구성

FCM에서 이 앱에 메시지를 보내도록 승인한다는 의미로 gcm_sender_id 하드 코딩 값을 지정하는 웹 앱 매니페스트를 추가해야 합니다. 앱에 이미 manifest.json 구성 파일이 있는 경우 값을 변경하지 말고 아래와 동일하게 브라우저 발신자 ID를 추가하세요.

{
  "gcm_sender_id": "103953800507"
}

메시징 객체 검색

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

알림 수신 권한 요청

messaging.requestPermission() 메소드는 앱이 브라우저의 알림을 수신할 수 있는 권한을 부여하도록 사용자에게 요청하는 동의 대화상자를 표시합니다. 권한이 거부되면 FCM 등록 토큰 요청으로 인해 오류가 발생합니다.

messaging.requestPermission().then(function() {
  console.log('Notification permission granted.');
  // TODO(developer): Retrieve an Instance ID token for use with FCM.
  // ...
}).catch(function(err) {
  console.log('Unable to get permission to notify.', err);
});

등록 토큰 액세스

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

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

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

현재 등록 토큰 검색

현재 토큰을 검색하려면 getToken을 호출합니다. 권한이 부여되지 않았다면 이 메소드는 null을 반환합니다. 그렇지 않은 경우 토큰을 반환하거나 오류가 있으면 프라미스를 거부합니다.

메시징 서비스에 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(function(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(function(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(function() {
  messaging.getToken().then(function(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(function(err) {
    console.log('Unable to retrieve refreshed token ', err);
    showToken('Unable to retrieve refreshed token ', err);
  });
});

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

다음 단계

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

다음에 대한 의견 보내기...

도움이 필요하시나요? 지원 페이지를 방문하세요.