푸시 작동 방식

API를 살펴보기 전에 푸시를 처음부터 끝까지 대략적으로 살펴보겠습니다. 그런 다음 나중에 개별 주제 또는 API를 살펴볼 때 그 중요성과 이유를 파악할 수 있습니다.

푸시를 구현하는 세 가지 주요 단계는 다음과 같습니다.

  1. 푸시를 구독하도록 사용자를 등록하는 클라이언트 측 로직 (푸시 메시지를 수신하도록 사용자를 등록하는 웹 앱의 JavaScript 및 UI)을 추가합니다.
  2. 백엔드 / 애플리케이션에서 사용자의 기기로 푸시 메시지를 트리거하는 API 호출입니다.
  3. 푸시가 기기에 도착할 때 '푸시 이벤트'를 수신하는 서비스 워커 JavaScript 파일입니다. 이 JavaScript에서 알림을 표시할 수 있습니다.

각 단계에 포함된 내용을 좀 더 자세히 살펴보겠습니다.

1단계: 클라이언트 측

첫 번째 단계는 푸시 메시지를 '구독'하는 사용자를 만드는 것입니다.

사용자를 구독하려면 두 가지가 필요합니다. 먼저 사용자에게 푸시 메시지를 보내는 권한을 받습니다. 두 번째로 브라우저에서 PushSubscription를 가져옵니다.

PushSubscription에는 해당 사용자에게 푸시 메시지를 전송하는 데 필요한 모든 정보가 포함되어 있습니다. 이 ID는 해당 사용자의 기기 ID라고 생각할 수 있습니다.

이 모든 작업은 JavaScript에서 Push API를 사용하여 실행됩니다.

브라우저 지원

  • Chrome: 42.
  • Edge: 17.
  • Firefox: 44.
  • Safari: 16

소스

사용자를 구독하기 전에 '애플리케이션 서버 키' 집합을 생성해야 합니다. 이 내용은 나중에 다룹니다.

애플리케이션 서버 키(VAPID 키라고도 함)는 서버마다 고유합니다. 이를 통해 푸시 서비스는 사용자를 구독한 애플리케이션 서버를 파악하고 해당 사용자에게 푸시 메시지를 트리거하는 서버가 동일한 서버인지 확인할 수 있습니다.

사용자를 구독하고 PushSubscription를 가져온 후에는 PushSubscription 세부정보를 백엔드 / 서버로 전송해야 합니다. 서버에서 이 정기 결제를 데이터베이스에 저장하고 이를 사용하여 해당 사용자에게 푸시 메시지를 전송합니다.

PushSubscription을 백엔드로 전송해야 합니다.

2단계: 푸시 메시지 전송

사용자에게 푸시 메시지를 보내려면 푸시 서비스에 API를 호출해야 합니다. 이 API 호출에는 전송할 데이터, 메시지를 전송할 대상, 메시지 전송 방법에 관한 모든 기준이 포함됩니다. 일반적으로 이 API 호출은 서버에서 실행됩니다.

다음과 같은 질문을 할 수 있습니다.

  • 푸시 서비스는 무엇이고 누가 제공하나요?
  • API는 어떤 모양인가요? JSON, XML, 그 외 다른 형식인가요?
  • API는 무엇을 할 수 있나요?

푸시 서비스는 무엇이고 누가 제공하나요?

푸시 서비스는 네트워크 요청을 수신하고 유효성을 검사한 후 적절한 브라우저에 푸시 메시지를 전송합니다. 브라우저가 오프라인 상태인 경우 브라우저가 온라인 상태가 될 때까지 메시지가 대기열에 추가됩니다.

각 브라우저는 원하는 푸시 서비스를 사용할 수 있으며 이는 개발자가 제어할 수 없습니다. 모든 푸시 서비스는 동일한 API 호출을 예상하므로 이는 문제가 되지 않습니다. 즉, 푸시 서비스가 누구인지 신경 쓸 필요가 없습니다. API 호출이 유효한지 확인하기만 하면 됩니다.

푸시 메시지를 트리거하는 적절한 URL (즉, 푸시 서비스의 URL)을 가져오려면 PushSubscription에서 endpoint 값을 확인하면 됩니다.

다음은 PushSubscription에서 가져오는 값의 예입니다.

{
  "endpoint": "https://random-push-service.com/some-kind-of-unique-id-1234/v2/",
  "keys": {
    "p256dh": "BNcRdreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7A8u-Ts1XbjhazAkj7I99e8QcYP7DkM=",
    "auth": "tBHItJI5svbpez7KI4CCXg=="
  }
}

이 경우 엔드포인트는 [https://random-push-service.com/some-kind-of-unique-id-1234/v2/]입니다. 푸시 서비스는 'random-push-service.com'이고 각 엔드포인트는 사용자마다 고유하며 'some-kind-of-unique-id-1234'로 표시됩니다. 푸시를 사용하기 시작하면 이 패턴을 확인할 수 있습니다.

구독의 는 나중에 다룹니다.

API는 어떤 모양인가요?

모든 웹 푸시 서비스는 동일한 API 호출을 예상한다고 언급했습니다. 이 API는 웹 푸시 프로토콜입니다. 푸시 서비스에 API를 호출하는 방법을 정의하는 IETF 표준입니다.

API 호출을 사용하려면 특정 헤더를 설정하고 데이터를 바이트 스트림으로 만들어야 합니다. 이 API 호출을 대신 실행할 수 있는 라이브러리와 이를 직접 실행하는 방법을 살펴봅니다.

API는 무엇을 할 수 있나요?

이 API는 데이터 유무와 관계없이 사용자에게 메시지를 전송하는 방법을 제공하고 메시지를 전송하는 방법에 관한 안내를 제공합니다.

푸시 메시지로 전송하는 데이터는 암호화되어야 합니다. 이렇게 하면 누구나 될 수 있는 푸시 서비스가 푸시 메시지와 함께 전송된 데이터를 볼 수 없게 됩니다. 이는 브라우저에서 사용할 푸시 서비스를 결정하기 때문에 중요합니다. 안전하지 않은 푸시 서비스를 사용하는 브라우저가 생길 수 있기 때문입니다.

푸시 메시지를 트리거하면 푸시 서비스가 API 호출을 수신하고 메시지를 대기열에 추가합니다. 이 메시지는 사용자의 기기가 온라인 상태가 되고 푸시 서비스에서 메시지를 전송할 수 있을 때까지 대기열에 남아 있습니다. 푸시 서비스에 제공할 수 있는 안내는 푸시 메시지가 대기열에 추가되는 방식을 정의합니다.

안내에는 다음과 같은 세부정보가 포함되어 있습니다.

  • 푸시 메시지의 최대 경과 시간입니다. 메시지가 삭제되고 전송되지 않기 전에 메시지를 대기열에 보관해야 하는 시간을 정의합니다.

  • 메시지의 긴급성을 정의합니다. 이는 푸시 서비스가 우선순위가 높은 메시지만 전송하여 사용자의 배터리 수명을 보존하는 경우에 유용합니다.

  • 대기 중인 메시지를 이 새 메시지로 대체할 '주제' 이름을 푸시 메시지에 지정합니다.

서버에서 푸시 메시지를 전송하려고 하면 푸시 서비스에 웹 푸시 프로토콜 요청을 보냅니다.

3단계: 사용자 기기에서 푸시 이벤트

푸시 메시지를 전송하면 푸시 서비스는 다음 이벤트 중 하나가 발생할 때까지 서버에 메시지를 보관합니다.

  1. 기기가 온라인 상태가 되고 푸시 서비스가 메시지를 전송합니다.
  2. 메시지가 만료됩니다. 이 경우 푸시 서비스는 메시지를 큐에서 삭제하며 메시지는 전송되지 않습니다.

푸시 서비스가 메시지를 전송하면 브라우저는 메시지를 수신하고 데이터를 복호화한 후 서비스 워커에서 push 이벤트를 전달합니다.

서비스 워커는 '특별한' JavaScript 파일입니다. 브라우저는 페이지가 열려 있지 않아도 이 JavaScript를 실행할 수 있습니다. 브라우저가 닫혀 있을 때도 이 JavaScript를 실행할 수 있습니다. 서비스 워커에는 웹페이지에서 사용할 수 없는 API(예: 푸시)도 있습니다(즉, 서비스 워커 스크립트 외부에서 사용할 수 없는 API).

서비스 워커의 '푸시' 이벤트 내에서 백그라운드 작업을 실행할 수 있습니다. 애널리틱스 호출, 페이지 오프라인 캐시, 알림 표시를 할 수 있습니다.

푸시 서비스에서 사용자의 기기로 푸시 메시지가 전송되면 서비스 워커는 푸시 이벤트를 수신합니다.

푸시 메시지의 전체 흐름입니다.

다음에 수행할 작업

Codelab