[FCM XMPP] D. 자바스크립트 Firebase 클라우드 메시징 클라이언트 앱 설정

URL : https://firebase.google.com/docs/cloud-messaging/js/client?hl=ko

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

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

파이어베이스 콘솔에서 웹푸시용 프로젝트 생성

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

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

• 새 키 쌍 생성
• 기본 키 쌍 가져오기

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

manifest.json 파일에 아래의 고정 gcm_sender_id 추가

gcm_sender_id 하드 코딩 값은 FCM 에서 이 앱에 메시지를 보내도록 승인함을 나타냄

{
  "gcm_sender_id": "103953800507"
}

'브라우저 발신자 ID'는 Firebase 프로젝트 설정에 표시되는 프로젝트별 발신자 ID와 다릅니다. manifest.json의 브라우저 발신자 ID는 FCM 자바스크립트 클라이언트에 공통되는 고정된 값입니다.

4. 메시징 객체 검색

index.html

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

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

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

messaging.usePublicVapidKey('BBYnIeG7...J_-B37Vqk');

6. 알림 수신 권한 요청

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

7. 등록 토큰 엑세스

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

등록 토큰이 변경되는 경우

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

7.1 현재 등록 토큰 검색

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

메시징 서비스에 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);
});

7.2 토큰 갱신 모니터링

토큰이 새로 생성될 때마다 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를 사용하여 구독 관련 정보를 가져올 수 있습니다.