백그라운드 앱에 테스트 메시지 보내기

FCM을 시작하기 위해 앱이 기기에서 백그라운드 상태일 때 특정 사용자에게 알림 메시지를 보내는 가장 단순한 사용 사례부터 살펴보겠습니다. 이 페이지에서는 설정에서 검증까지 이 작업을 수행하는 모든 단계를 제시하므로, FCM용 자바스크립트 클라이언트 앱 설정을 마친 경우 일부 단계는 이미 완료된 상태일 수 있습니다.

SDK 설정

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

알림 수신 권한 요청

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

Notification.requestPermission().then((permission) => {
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // TODO(developer): Retrieve an Instance ID token for use with FCM.
    // ...
  } else {
    console.log('Unable to get permission to notify.');
  }
});

등록 토큰 액세스

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

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

  • 웹 앱이 등록 토큰을 삭제하는 경우
  • 사용자가 브라우저 데이터를 소거하는 경우. 이 경우 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((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를 사용하여 구독 관련 정보를 가져올 수 있습니다.

테스트 알림 메시지 보내기

  1. 타겟 기기에 앱을 설치하고 실행합니다.

  2. 앱을 기기에서 백그라운드 상태로 만듭니다.

  3. 알림 작성기를 열고 새 알림을 선택합니다.

  4. 메시지 본문을 입력합니다.

  5. 테스트 메시지 보내기를 선택합니다.

  6. FCM 등록 토큰에 추가 필드에 이 가이드의 앞 섹션에서 확인한 등록 토큰을 입력합니다.

  7. 테스트를 클릭합니다.

테스트를 클릭하면 타겟팅된 클라이언트 기기(백그라운드 상태의 앱 포함)의 브라우저에 알림이 수신됩니다.

알림 페이로드에 웹 푸시 속성 추가

HTTP v1 API를 사용하면 추가 알림 옵션을 Web Notification API의 유효한 속성이 포함된 JSON 객체로 지정할 수 있습니다. 이 객체에 titlebody 필드가 있으면 해당 google.firebase.fcm.v1.Notification.titlegoogle.firebase.fcm.v1.Notification.body 필드를 재정의합니다.

HTTP POST 요청

POST https://fcm.googleapis.com/v1/projects/myproject-b5ae1/messages:send HTTP/1.1

Content-Type: application/json
Authorization: Bearer ya29.ElqKBGN2Ri_Uz...PbJ_uNasm

{
  "message": {
    "token" : <token of destination app>,
    "notification": {
      "title": "FCM Message",
      "body": "This is a message from FCM"
    },
    "webpush": {
      "headers": {
        "Urgency": "high"
      },
      "notification": {
        "body": "This is a message from FCM to web",
        "requireInteraction": "true",
        "badge": "/badge-icon.png"
      }
    }
  }
}

이 요청을 사용하면 타겟팅하는 웹 클라이언트(Android에서 실행되는 지원 브라우저 포함)에서 사용자가 상호작용할 때까지 활성 상태로 유지되는 우선순위가 높은 알림 메시지를 수신합니다. 메시지에 다음 필드가 포함됩니다.

  • title: FCM 메시지
  • body: FCM에서 웹으로 보내는 메시지
  • requireInteraction: true
  • badge: /badge-icon.png

웹 재정의가 적용되지 않는 Android 및 iOS 네이티브 앱에서는 다음 필드가 포함된 보통 우선순위 알림 메시지를 수신합니다.

  • title: FCM 메시지
  • body: FCM에서 보내는 메시지

현재 RequireInteraction은 일부 브라우저에서만 지원됩니다. 개발자가 Web Notification API 사양을 통해 지원되는 플랫폼과 브라우저를 확인해야 합니다.

cURL

curl -X POST -H "Authorization: Bearer ya29.ElqKBGN2Ri_Uz...PbJ_uNasm" -H "Content-Type: application/json" -d '{
  "message": {
    "notification": {
      "title": "FCM Message",
      "body": "This is a message from FCM"
    },
    "webpush": {
      "headers": {
        "Urgency": "high"
      },
      "notification": {
        "body": "This is a message from FCM to web",
        "requireInteraction": "true",
        "badge": "/badge-icon.png"
      }
    }
  },
  "token": "bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1..."
  }
}' "https://fcm.googleapis.com/v1/projects/myproject-b5ae1/messages:send"

HTTP 응답

{
    "name": "projects/myproject-b5ae1/messages/0:1500415314455276%31bd1c9631bd1c98"
}

FCM 메시지에 대한 자세한 내용은 앱 서버 보내기 요청 작성을 참조하세요.

다음 단계

포그라운드 앱에 메시지 전송

백그라운드 앱에 알림 메시지를 보내는 데 성공했으면 자바스크립트 클라이언트에서 메시지 수신을 참조하여 포그라운드 앱에 전송하는 방법을 알아보세요.

알림 메시지 이외의 고급 기능

앱에 단순한 알림 메시지 이외에 더 많은 고급 기능을 추가하려면 다음을 참조하세요.