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

푸시 알림 개요

푸시 알림의 정의, 푸시 알림을 사용해야 하는 이유, 작동 방식을 간략하게 설명합니다.

Kayce Basques

Matt Gaunt

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

푸시 메시지를 통해 독자층의 관심을 끌 수 있는 사용자가 웹사이트를 이용하지 않을 때도 사용자에게 도달할 수 있습니다 이를 푸시라고 합니다 메시지를 '푸시'할 수 있으므로 사용자에게 정보를 제공하는 비활성 상태입니다. 푸시 비교 기술 및 Pull 이를 이해하려면 더 자세히 살펴보겠습니다.

알림은 사용자에게 작은 크기의 정보를 제공합니다. 웹사이트에서 중요하고 시간에 민감한 이벤트 또는 작업에 관해 사용자에게 알리기 위한 알림 시간이 걸릴 수 있습니다. 알림의 디자인은 플랫폼에 따라 다릅니다.

푸시 메시지와 알림은 별개이지만 상호 보완적인 기술입니다. 푸시는 메시지가 전송 중이더라도 서버에서 사용자에게 웹사이트에서 적극적으로 사용하고 있지 않습니다 알림은 사용자 기기에 푸시된 정보를 표시합니다. kubectl 명령어 알림을 받을 수 있습니다. 언젠가는 한 번에 사용자에게 표시되는 알림 없이 푸시 메시지 (자동 푸시)가 가능하지만 브라우저는 현재 허용하지 않습니다 실제로는 일반적으로 함께 사용됩니다. 비기술적 사용자는 아마도 푸시와 푸시의 차이를 이해하지 못할 것입니다. 메시지 및 알림. 이 컬렉션에서 푸시 알림은 푸시 알림과 알림으로 표시합니다. 푸시 메시지는 우리는 그 자체로 푸시 테크를 언급합니다. 알림을 선택하면 알림 기술 자체에 대해 언급합니다.

푸시 알림을 사용해야 하는 이유

푸시 알림은 사용자에게 시의적절하고 관련성 있는 정확한 정보를 제공합니다.
푸시 알림은 웹사이트 소유자의 입장에서 참여를 유도할 수 있습니다.

를 통해 개인정보처리방침을 정의할 수 있습니다.

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

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

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

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

푸시 알림을 보낼 권한 얻기

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

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

허가를 받은 후 웹사이트에서 사용자의 푸시 알림 구독 이는 JavaScript를 통해 이루어지며 Push API를 사용하여 추적 공개 인증 키를 제공해야 합니다. 이 내용은 나중에 자세히 알아보겠습니다 후(After) 구독 프로세스를 시작하면 브라우저에서 푸시 서비스로 알려진 웹 서비스에 적용하는 것입니다. 이에 대해서는 나중에 자세히 알아볼 것입니다.

구독이 성공했다고 가정하면 브라우저는 PushSubscription 드림 객체를 지정합니다. 이 데이터는 장기간 저장해야 합니다. 일반적으로 이것은 사용자가 제어하는 서버에 정보를 보내고, 서버가 그것을 데이터베이스에 저장하도록 하는 것입니다.

푸시 메시지를 보낼 권한을 얻습니다. PushSubscription 가져오기 보내기
서버에 대한 PushSubscription

푸시 메시지 보내기

서버는 실제로 푸시 메시지를 클라이언트에 직접 보내지 않습니다. 가 push 서비스가 이를 수행합니다. 푸시 서비스는 확인해야 합니다. 클라이언트에게 푸시 알림을 보내려면 푸시 서비스에 웹 서비스 요청을 할 수 있습니다 웹 서비스는 이를 웹 푸시 프로토콜 요청이라고 합니다. 이 웹 푸시 프로토콜 요청에는 다음이 포함되어야 합니다.

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

일반적으로 직접 제어하는 서버를 통해 웹 푸시 프로토콜 요청을 합니다. 물론 서버는 원시 웹 서비스 요청을 구성할 필요가 없습니다. 있습니다. 이 작업을 처리할 수 있는 다음과 같은 라이브러리가 있습니다. web-push-libs를 사용하세요. 하지만 기본 메커니즘은 HTTP를 통한 웹 서비스 요청을 전송합니다

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

푸시 서비스는 요청을 수신 및 인증하고 푸시를 라우팅합니다. 메시지를 적절한 클라이언트에 전달합니다. 클라이언트의 브라우저가 오프라인 상태인 경우 서비스는 브라우저가 온라인 상태가 될 때까지 푸시 메시지를 대기열에 넣습니다.

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

하지만 웹 푸시 프로토콜을 전송하는지 확인해야 합니다. 올바른 푸시 서비스에 푸시해야 합니다 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 이벤트를 서비스에 전달합니다. worker 서비스 워커는 기본적으로 백그라운드에서 실행될 수 있는 JavaScript 코드는 가 열려 있지 않거나 브라우저가 닫혀 있습니다. 서비스 워커의 push 이벤트에서 ServiceWorkerRegistration.showNotification()를 호출하여 정보를 표시하는 핸들러 알림으로 전송합니다.

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