푸시 작동 방식

Matt Gaunt

API를 살펴보기 전에 푸시를 처음부터 끝까지 개략적으로 살펴보겠습니다. 그런 다음 나중에 개별 주제나 API를 단계별로 살펴보면 어떻게, 왜 중요한지 알 수 있습니다.

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

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

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

1단계: 클라이언트 측

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

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

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

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

Browser Support

• 42
• 17
• 44
• 16

Source

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

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 호출을 수신하고 메시지를 큐에 추가합니다. 이 메시지는 사용자의 기기가 온라인 상태가 되고 푸시 서비스가 메시지를 전송할 수 있을 때까지 대기열에 남아 있습니다. 푸시 서비스에 제공할 수 있는 안내는 푸시 메시지가 큐에 추가되는 방식을 정의합니다.

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

• 푸시 메시지의 TTL(수명)입니다. 메시지가 삭제되고 전송되지 않기 전에 대기열에 보관되는 기간을 정의합니다.

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

• 푸시 메시지에 '주제' 이름을 지정하면 대기 중인 메시지가 이 새 메시지로 대체됩니다.

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

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

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

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

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

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

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

다음에 수행할 작업

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

코드 실습

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