이 페이지는 Cloud Translation API를 통해 번역되었습니다.

푸시 작동 방식

Matt Gaunt

API를 사용하기 전에 푸시를 개략적으로 살펴보겠습니다. 이후 개별 주제나 API를 살펴보면서 이것이 왜, 왜 중요한지 알게 될 것입니다.

푸시 구현을 위한 세 가지 주요 단계는 다음과 같습니다.

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

각 단계에 포함되는 사항을 좀 더 자세히 살펴보겠습니다.

1단계: 클라이언트 측

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

사용자를 구독하려면 다음 두 가지가 필요합니다. 먼저 사용자에게 푸시 메시지를 보낼 권한을 얻습니다. 둘째, 브라우저에서 PushSubscription를 가져옵니다.

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

이 작업은 Push API를 사용하여 JavaScript에서 모두 이루어집니다.

브라우저 지원

소스

사용자를 구독하려면 나중에 다룰 '애플리케이션 서버 키' 집합을 생성해야 합니다.

애플리케이션 서버 키(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'로 표시됩니다. push로 작업을 시작하면 이러한 패턴을 확인할 수 있습니다.

구독에 포함된 키는 나중에 다룹니다.

API는 어떤 형식인가요?

모든 웹 푸시 서비스는 동일한 API 호출을 기대한다고 말씀드렸습니다. 이 API는 웹 푸시 프로토콜입니다. 푸시 서비스에 대해 API를 호출하는 방법을 정의하는 IETF 표준입니다.

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

API로 무엇을 할 수 있나요?

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

푸시 메시지로 전송하는 데이터는 암호화되어야 합니다. 이렇게 하는 이유는 푸시 서비스가 푸시 메시지와 함께 전송된 데이터를 볼 수 없기 때문입니다. 이는 사용할 푸시 서비스를 브라우저가 결정하므로 안전하지 않거나 안전하지 않은 푸시 서비스를 사용하여 브라우저의 문을 열 수 있다는 점을 감안하면 이는 중요합니다.

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

안내에는 다음과 같은 세부정보가 포함됩니다.

푸시 메시지의 TTL(수명)입니다. 이는 메시지가 삭제되어 전달되지 않기 전에 대기열에 추가되어야 하는 시간을 정의합니다.
메시지의 긴급도를 정의합니다. 이는 푸시 서비스가 우선순위가 높은 메시지만 전달하여 사용자의 배터리 수명을 보존하는 경우에 유용합니다.
푸시 메시지에 '주제' 이름을 지정하면 보류 중인 메시지가 이 새 메시지로 대체됩니다.

서버가 푸시 메시지를 보내기를 원하는 경우 푸시 서비스에 웹 푸시 프로토콜 요청을 보냅니다.

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

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

기기가 온라인 상태가 되고 푸시 서비스가 메시지를 전송합니다.
메시지가 만료됩니다. 이렇게 되면 push 서비스가 메시지를 큐에서 삭제하므로 전달되지 않습니다.

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

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

모든 백그라운드 작업을 수행할 수 있는 것은 서비스 워커의 'push' 이벤트 내에 있습니다. 분석을 호출하고, 오프라인으로 페이지를 캐시하고, 알림을 표시할 수 있습니다.

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

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