푸시 작동 방식

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

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

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

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

1단계: 클라이언트 측

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

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

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

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

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

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

사용자를 구독하고 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).

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

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

다음에 수행할 작업

• 웹 푸시 알림 개요
• 푸시 작동 방식
• 사용자 구독하기
• 권한 UX
• 웹 푸시 라이브러리를 사용하여 메시지 보내기
• 웹 푸시 프로토콜
• 푸시 이벤트 처리
• 알림 표시
• 알림 동작
• 일반 알림 패턴
• 푸시 알림 FAQ
• 일반적인 문제 및 버그 신고하기

Codelab

• 푸시 알림 클라이언트 빌드
• 푸시 알림 서버 빌드