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

푸시 알림 개요

푸시 알림의 정의, 푸시 알림을 사용하는 이유, 작동 방식에 관한 개요입니다.

Kayce Basques

Matt Gaunt

푸시 알림이란 무엇인가요?

푸시 메시지를 사용하면 사용자가 웹사이트를 사용하지 않을 때도 사용자에게 정보를 알릴 수 있습니다. 사용자가 활성 상태가 아닌 경우에도 사용자에게 정보를 '푸시'할 수 있으므로 이를 push 메시지라고 합니다. 푸시 기술과 풀 기술을 비교하면 이 개념을 더 자세히 알아볼 수 있습니다.

알림은 사용자에게 작은 정보 청크를 표시합니다. 웹사이트에서는 알림을 사용하여 중요하고 시급한 이벤트 또는 사용자가 취해야 하는 조치를 사용자에게 알릴 수 있습니다. 알림의 디자인은 플랫폼에 따라 다릅니다.

푸시 메시지와 알림은 별개의 기술이지만 상호 보완적입니다. 푸시는 사용자가 웹사이트를 활발하게 사용하지 않을 때도 서버에서 사용자에게 메시지를 전송하는 기술입니다. 알림은 푸시된 정보를 사용자 기기에 표시하는 기술입니다. 푸시 메시지 없이도 알림을 사용할 수 있습니다. 언젠가 사용자에게 표시되는 알림 없이 푸시 메시지를 사용할 수도 있지만 (자동 푸시) 현재 브라우저에서는 이를 허용하지 않습니다. 실제로 이 둘은 일반적으로 함께 사용됩니다. 기술 지식이 없는 사용자는 푸시 메시지와 알림의 차이점을 모를 수 있습니다. 이 컬렉션에서 푸시 알림이란 메시지를 푸시한 후 알림을 알림으로 표시하는 것을 의미합니다. 푸시 메시지란 그 자체로 푸시 기술을 말하는 것입니다. 여기서 알림은 그 자체로 알림 기술을 의미합니다.

푸시 알림을 사용하는 이유

사용자는 푸시 알림을 통해 시의적절하고 관련성 있는 정확한 정보를 받을 수 있습니다.
웹사이트 소유자에게 푸시 알림은 사용자 참여를 높이는 방법 중 하나입니다.

푸시 알림은 어떻게 작동하나요?

개략적으로 푸시 알림을 구현하는 주요 단계는 다음과 같습니다.

사용자에게 푸시 알림을 보낼 수 있는 권한을 요청하는 클라이언트 로직을 추가한 후 데이터베이스에 저장할 수 있도록 클라이언트 식별자 정보를 서버로 전송합니다.
클라이언트 기기로 메시지를 푸시하는 서버 로직을 추가합니다.
기기로 푸시된 메시지를 수신하고 알림으로 표시하는 클라이언트 로직을 추가합니다.

이 페이지의 나머지 부분에서는 이러한 단계를 자세히 설명합니다.

푸시 알림을 보낼 권한 얻기

먼저 웹사이트에서 푸시 알림을 보내려면 사용자의 권한을 받아야 합니다. 이는 Do you want to receive push notifications? 프롬프트 옆에 있는 Yes(예) 버튼을 클릭하는 것과 같은 사용자 동작으로 트리거되어야 합니다. 확인 후 Notification.requestPermission()를 호출합니다. 사용자 기기의 운영체제나 브라우저는 사용자가 푸시 알림을 수신하기를 원하는지 공식적으로 확인하기 위해 일종의 UI를 표시할 수 있습니다. 이 UI는 플랫폼에 따라 다릅니다.

클라이언트의 푸시 알림 구독

권한을 부여받은 후에는 웹사이트에서 사용자가 푸시 알림을 구독하는 프로세스를 시작해야 합니다. Push API를 사용하여 JavaScript를 통해 이 작업을 수행합니다. 구독 프로세스 중에 공개 인증 키를 제공해야 하며 이에 관해서는 나중에 자세히 알아봅니다. 구독 프로세스를 시작하면 브라우저가 푸시 서비스라고 하는 웹 서비스에 네트워크 요청을 보냅니다. 이 내용은 나중에 자세히 알아봅니다.

정기 결제가 성공했다고 가정하면 브라우저는 PushSubscription 객체를 반환합니다. 이 데이터를 장기간 저장해야 합니다. 일반적으로 이는 사용자가 제어하는 서버로 정보를 전송한 다음 서버가 이 정보를 데이터베이스에 저장하도록 하는 방식으로 이루어집니다.

푸시 메시지를 보낼 권한을 얻습니다. PushSubscription을 가져옵니다. 서버에 PushSubscription을 보냅니다.

푸시 메시지 보내기

서버는 실제로 푸시 메시지를 클라이언트에게 직접 보내지 않습니다. 이를 수행하는 푸시 서비스입니다. 푸시 서비스는 사용자의 브라우저 공급업체에서 제어하는 웹 서비스입니다. 클라이언트에 푸시 알림을 보내려면 푸시 서비스에 웹 서비스를 요청해야 합니다. 푸시 서비스에 보내는 웹 서비스 요청을 웹 푸시 프로토콜 요청이라고 합니다. 웹 푸시 프로토콜 요청에는 다음이 포함되어야 합니다.

메시지에 포함할 데이터입니다.
메시지를 보낼 클라이언트입니다.
푸시 서비스가 메시지를 전달하는 방법에 대한 지침입니다. 예를 들어 푸시 서비스가 10분 후에 메시지 전송 시도를 중지하도록 지정할 수 있습니다.

일반적으로 웹 푸시 프로토콜은 여러분이 제어하는 서버를 통해 요청합니다. 물론 서버가 원시 웹 서비스 요청 자체를 구성할 필요는 없습니다. 이 작업을 자동으로 처리할 수 있는 라이브러리가 있습니다(예: web-push-libs). 하지만 기본 메커니즘은 HTTP를 통한 웹 서비스 요청입니다.

서버에서 푸시 서비스에 웹 푸시 프로토콜 요청을 보내고 푸시 서비스는 사용자의 기기로 메시지를 보냅니다.

푸시 서비스는 요청을 수신하여 인증하고 푸시 메시지를 적절한 클라이언트로 라우팅합니다. 클라이언트의 브라우저가 오프라인 상태이면 푸시 서비스는 브라우저가 온라인 상태가 될 때까지 푸시 메시지를 큐에 추가합니다.

각 브라우저는 원하는 푸시 서비스를 사용합니다. 웹사이트 개발자는 이를 제어할 수 없습니다 웹 푸시 프로토콜 요청이 표준화되었으므로 문제가 되지 않습니다. 즉, 브라우저 공급업체가 사용하는 푸시 서비스를 신경 쓸 필요가 없습니다. 웹 푸시 프로토콜 요청이 사양을 준수하는지 확인하기만 하면 됩니다. 무엇보다도 사양에는 요청에 특정 헤더가 포함되어야 하며 데이터는 바이트 스트림으로 전송되어야 한다고 명시되어 있습니다.

하지만 웹 푸시 프로토콜 요청을 올바른 푸시 서비스로 전송하고 있는지 확인해야 합니다. 정기 결제 프로세스 중에 브라우저가 반환한 PushSubscription 데이터가 이 정보를 제공합니다. PushSubscription 객체는 다음과 같습니다.

{
  "endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
  "expirationTime": null,
  "keys": {
    "p256dh": "BGyyVt9FFV…",
    "auth": "R9sidzkcdf…"
  }
}

endpoint의 도메인은 기본적으로 푸시 서비스입니다. endpoint의 경로는 푸시 서비스가 메시지를 푸시할 클라이언트를 정확하게 결정하는 데 도움이 되는 클라이언트 식별자 정보입니다.

keys는 암호화에 사용됩니다. 이에 관해서는 다음에 설명합니다.

푸시 메시지 암호화

푸시 서비스로 보내는 데이터는 암호화되어야 합니다. 이렇게 하면 푸시 서비스에서 클라이언트로 전송하는 데이터를 볼 수 없습니다. 사용할 푸시 서비스는 브라우저 공급업체가 결정하며 이 푸시 서비스는 이론적으로 안전하지 않거나 안전하지 않을 수 있습니다. 서버는 PushSubscription에 제공된 keys를 사용하여 웹 푸시 프로토콜 요청을 암호화해야 합니다.

웹 푸시 프로토콜 요청 서명

푸시 서비스를 사용하면 다른 사람이 사용자에게 메시지를 보내지 못하도록 방지할 수 있습니다. 기술적으로는 이 작업을 하지 않아도 되지만 Chrome에서 가장 쉽게 구현하는 경우에는 이 방식이 필요합니다. Firefox에서는 선택사항입니다. 향후 다른 브라우저에서도 이 옵션이 필요할 수 있습니다.

이 워크플로에는 애플리케이션에 고유한 비공개 키와 공개 키가 포함됩니다. 인증 프로세스는 대략 다음과 같습니다.

비공개 및 공개 키를 일회성 작업으로 생성합니다. 비공개 키와 공개 키의 조합을 애플리케이션 서버 키라고 합니다. VAPID 키라고도 합니다. VAPID는 이 인증 프로세스를 정의하는 사양입니다.
JavaScript 코드에서 클라이언트 푸시 알림을 구독할 때 공개 키를 제공합니다. 푸시 서비스가 기기의 endpoint를 생성하면 제공된 공개 키를 endpoint와 연결합니다.
웹 푸시 프로토콜 요청을 보낼 때 비공개 키로 일부 JSON 정보에 서명합니다.
푸시 서비스는 웹 푸시 프로토콜 요청을 수신하면 저장된 공개 키를 사용하여 서명된 정보를 인증합니다. 서명이 유효하면 푸시 서비스는 요청이 일치하는 비공개 키가 있는 서버에서 온 것임을 알게 됩니다.

푸시 메시지 전송 맞춤설정

웹 푸시 프로토콜 요청 사양은 푸시 서비스가 클라이언트에 푸시 메시지를 보내는 방식을 맞춤설정할 수 있는 매개변수도 정의합니다. 예를 들어 다음을 맞춤설정할 수 있습니다.

푸시 서비스가 메시지 전송을 시도해야 하는 시간을 정의하는 메시지의 TTL (수명)입니다.
메시지의 긴급성. 푸시 서비스가 우선순위가 높은 메시지만 전달하여 클라이언트의 배터리 수명을 보존하는 경우에 유용합니다.
동일한 주제의 대기 중인 메시지를 최신 메시지로 대체하는 메시지의 주제입니다.

푸시된 메시지를 알림으로 받아서 표시

푸시 서비스에 웹 푸시 프로토콜 요청을 보내면 푸시 서비스는 다음 이벤트 중 하나가 발생할 때까지 요청을 큐에 유지합니다.

클라이언트가 온라인 상태가 되면 푸시 서비스가 푸시 메시지를 전달합니다.
메시지가 만료됩니다.

클라이언트 브라우저는 푸시된 메시지를 수신하면 푸시 메시지 데이터를 복호화하고 push 이벤트를 서비스 워커에 전달합니다. 서비스 워커는 웹사이트가 열려 있지 않거나 브라우저가 닫혀 있을 때도 백그라운드에서 실행될 수 있는 자바스크립트 코드입니다. 서비스 워커의 push 이벤트 핸들러에서 ServiceWorkerRegistration.showNotification()를 호출하여 정보를 알림으로 표시합니다.

메시지가 기기에 도착했습니다. 브라우저가 서비스 워커의 절전 모드를 해제합니다. Push 이벤트가 전달됩니다.