Google은 AI 기술을 사용하여 콘텐츠를 사용자의 기본 언어로 번역합니다. AI 번역에는 오류가 있을 수 있습니다.

푸시 알림 개요

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

Kayce Basques

Matt Gaunt

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

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

알림은 사용자에게 작은 정보 청크를 제공합니다. 웹사이트는 알림을 사용하여 사용자에게 중요한 시간 제한 이벤트 또는 사용자가 취해야 하는 조치를 알릴 수 있습니다. 알림의 모양과 느낌은 플랫폼마다 다릅니다.

푸시 메시지와 알림은 별개이지만 상호 보완적인 기술입니다. 푸시는 사용자가 웹사이트를 적극적으로 사용하지 않을 때도 서버에서 사용자에게 메시지를 전송하는 기술입니다. 알림은 푸시된 정보를 사용자 기기에 표시하는 기술입니다. 푸시 메시지 없이 알림을 사용할 수 있습니다. 언젠가는 사용자에게 표시되는 알림 (자동 푸시) 없이 푸시 메시지를 사용할 수 있게 될 수도 있지만 현재 브라우저에서는 허용하지 않습니다. 실제로 푸시 메시지와 알림은 함께 사용되는 경우가 많습니다. 기술에 익숙하지 않은 사용자는 푸시 메시지와 알림의 차이점을 이해하지 못할 수 있습니다. 이 컬렉션에서 푸시 알림 이라고 하면 메시지를 푸시한 후 알림으로 표시하는 조합을 의미합니다. 푸시 메시지 라고 하면 푸시 기술 자체를 의미합니다. 알림 이라고 하면 알림 기술 자체를 의미합니다.

푸시 알림을 사용하는 이유는 무엇인가요?

사용자에게 푸시 알림은 시의적절하고 관련성 높으며 정확한 정보를 수신하는 방법입니다.
웹사이트 소유자에게 푸시 알림은 사용자 참여도를 높이는 방법입니다.

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

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

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

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

푸시 알림 전송 권한 받기

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

클라이언트를 푸시 알림에 구독

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

구독이 성공했다고 가정하면 브라우저에서 PushSubscription 객체를 반환합니다. 이 데이터는 장기적으로 저장해야 합니다. 일반적으로 이 작업은 사용자가 제어하는 서버로 정보를 전송한 다음 서버에서 데이터베이스에 저장하는 방식으로 실행됩니다.

1 푸시 메시지를 보낼 권한을 획득합니다. 2. PushSubscription을 가져옵니다. 3. PushSubscription을 서버로 전송합니다.

푸시 메시지 전송

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

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

일반적으로 사용자가 제어하는 서버를 통해 웹 푸시 프로토콜 요청을 합니다. 물론 서버에서 원시 웹 서비스 요청을 직접 구성할 필요는 없습니다. 웹 푸시 라이브러리와 같이 이 작업을 처리할 수 있는 라이브러리가 있습니다. 하지만 기본 메커니즘은 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 이벤트를 서비스 워커에 전달합니다. 서비스 워커는 웹사이트가 열려 있지 않거나 브라우저가 닫혀 있을 때도 백그라운드에서 실행할 수 있는 기본적으로 JavaScript 코드입니다. 서비스 워커의 push 이벤트 핸들러에서 ServiceWorkerRegistration.showNotification()을 호출하여 정보를 알림으로 표시합니다.

1. 메시지가 기기에 도착합니다. 2. 브라우저가 서비스 워커를 깨웁니다. 3. 푸시 이벤트가 디스패치됩니다.

푸시 알림 개요

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

푸시 알림을 사용하는 이유는 무엇인가요?