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

푸시 작동 방식

Matt Gaunt

API를 시작하기 전에 푸시를 개략적으로 처음부터 끝까지 살펴보겠습니다. 그런 다음 나중에 개별 주제나 API를 살펴보면서 그 이유와 방법에 대해 알 수 있습니다. 매우 중요합니다.

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

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

각 단계의 내용을 좀 더 자세히 살펴보겠습니다.

1단계: 클라이언트 측

첫 번째 단계는 '구독하기'입니다. 메시지를 푸시할 수 있습니다.

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

PushSubscription에는 사용자에게 푸시 메시지를 보내는 데 필요한 모든 정보가 포함되어 있습니다. '종류' 이것을 사용자 기기의 ID로 생각하세요.

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

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

사용자를 구독하기 전에 나중에 다룰 "애플리케이션 서버 키".

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

사용자를 구독하고 PushSubscription를 보유하게 되면 백엔드 / 서버에 대한 PushSubscription 세부정보 이 파일을 서버에 저장하고 데이터베이스에 구독하여 사용자에게 푸시 메시지를 보내는 데 사용할 수 있습니다.

PushSubscription를 백엔드로 보내야 합니다.

2단계: 푸시 메시지 보내기

사용자에게 푸시 메시지를 보내려면 있습니다. 이 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 호출을 수신하고 메시지가 표시됩니다. 이 메시지는 사용자 기기가 온라인 상태가 되고 푸시할 때까지 대기열에 남아 있습니다. 메시지를 전달할 수 있습니다 푸시 서비스에 제공할 수 있는 지침은 푸시 메시지가 큐에 추가됩니다.

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

푸시 메시지의 TTL(수명)입니다. 다음 시간 전에 메시지가 큐에 저장되어야 하는 시간을 정의합니다. 메시지가 삭제되어 게재되지 않습니다.
메시지의 긴급도를 정의합니다. 이것은 푸시 서비스가 사용자의 배터리 수명을 늘릴 수 있습니다.
푸시 메시지에 '주제' 지정 대기 중인 모든 메시지가 이 새 메시지로 대체됩니다.

서버는 푸시 메시지를 보내고자 할 때 푸시 서비스에 웹 푸시 프로토콜을 요청합니다.

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

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

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

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

서비스 워커는 '특별' 자바스크립트 파일 브라우저가 자바스크립트를 있습니다. 브라우저가 닫혀 있을 때도 이 JavaScript를 실행할 수 있습니다. 또한 서비스 워커에는 푸시와 같이 웹페이지에서 사용할 수 없는 API (즉, 서비스 워커 스크립트).

이는 서비스 워커의 'push' 실행할 수 있는 새로운 이벤트가 있는지 확인해야 합니다 나 분석을 호출하고, 오프라인으로 페이지를 캐시하고, 알림을 표시할 수 있습니다.

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

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