백그라운드 앱으로 첫 번째 메시지 보내기

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

SDK 설정

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

알림 수신 권한 요청

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를 사용하여 구독 관련 정보를 가져올 수 있습니다.

알림 메시지 전송

요청 본문에서 message 객체의 token 키를 타겟팅할 특정 앱 인스턴스의 등록 토큰으로 설정합니다. 등록 토큰에 대한 자세한 내용은 플랫폼별 클라이언트 설정 정보를 참조하세요.

v1 API에 대한 모든 HTTP 요청은 액세스 토큰으로 승인되어야 합니다. 서비스 계정 사용자 인증 정보에서 액세스 토큰을 가져오는 방법을 알아보려면 보내기 요청 승인을 참조하세요.

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...HnS_uNreA

{
  "message":{
    "token" : "bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...",
    "notification" : {
      "body" : "This is an FCM notification message!",
      "title" : "FCM Message",
      }
   }
}

cURL

curl -X POST -H "Authorization: Bearer ya29.ElqKBGN2Ri_Uz...HnS_uNreA" -H "Content-Type: application/json" -d '{
"message":{
  "notification": {
    "title": "FCM Message",
    "body": "This is an FCM Message",
  },
  "token": "bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1..."
  }
}' https://fcm.googleapis.com/v1/projects/myproject-b5ae1/messages:send

HTTP 응답

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

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

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에서 실행되는 지원 브라우저 포함)에서 사용자가 상호작용할 때까지 활성 상태로 유지되는 우선순위가 높은 알림 메시지를 수신합니다. 메시지에 다음 필드가 포함됩니다.

  • 제목: FCM 메시지
  • 본문: FCM에서 웹으로 보내는 메시지입니다.
  • 상호작용 필요: true
  • 배지: /badge-icon.png

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

  • 제목: FCM 메시지
  • 본문: 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 메시지에 대한 자세한 내용은 앱 서버 보내기 요청 작성을 참조하세요.

다음 단계

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

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

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

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

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

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