푸시 작동 방식

API를 살펴보기 전에 푸시를 처음부터 끝까지 대략적으로 살펴보겠습니다. 그런 다음 나중에 개별 주제 또는 API를 단계별로 살펴보면 푸시가 중요한 이유와 방법을 파악할 수 있습니다.

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

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

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

1단계: 클라이언트 측

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

사용자를 구독시키려면 두 가지가 필요합니다. 첫째, 사용자에게 푸시 메시지를 전송할 수 있는 권한 을 얻습니다. 둘째, 브라우저에서 PushSubscription을 가져옵니다.

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

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

• 푸시 메시지의 TTL(Time-to-live) 메시지가 삭제되고 전송되지 않기 전에 대기열에 추가되어야 하는 기간을 정의합니다.

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

• 푸시 메시지에 '주제' 이름을 지정하여 대기 중인 메시지를 이 새 메시지로 바꿉니다.

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

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

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

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

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

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

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

다음에 수행할 작업

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

Codelab

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