푸시 알림의 정의, 푸시 알림을 사용해야 하는 이유, 작동 방식을 간략하게 설명합니다.
푸시 알림이란 무엇인가요?
푸시 메시지를 통해 독자층의 관심을 끌 수 있는 사용자가 웹사이트를 이용하지 않을 때도 사용자에게 도달할 수 있습니다 이를 푸시라고 합니다 메시지를 '푸시'할 수 있으므로 사용자에게 정보를 제공하는 비활성 상태입니다. 푸시 비교 기술 및 Pull 이를 이해하려면 더 자세히 살펴보겠습니다.
알림은 사용자에게 작은 크기의 정보를 제공합니다. 웹사이트에서 중요하고 시간에 민감한 이벤트 또는 작업에 관해 사용자에게 알리기 위한 알림 시간이 걸릴 수 있습니다. 알림의 디자인은 플랫폼에 따라 다릅니다.
<ph type="x-smartling-placeholder">![macOS 및 Android의 알림 예](https://web.developers.google.cn/static/articles/push-notifications-overview/image/examples-notifications-940d01bcab836.png?authuser=19&hl=ko)
푸시 메시지와 알림은 별개이지만 상호 보완적인 기술입니다. 푸시는 메시지가 전송 중이더라도 서버에서 사용자에게 웹사이트에서 적극적으로 사용하고 있지 않습니다 알림은 사용자 기기에 푸시된 정보를 표시합니다. kubectl 명령어 알림을 받을 수 있습니다. 언젠가는 한 번에 사용자에게 표시되는 알림 없이 푸시 메시지 (자동 푸시)가 가능하지만 브라우저는 현재 허용하지 않습니다 실제로는 일반적으로 함께 사용됩니다. 비기술적 사용자는 아마도 푸시와 푸시의 차이를 이해하지 못할 것입니다. 메시지 및 알림. 이 컬렉션에서 푸시 알림은 푸시 알림과 알림으로 표시합니다. 푸시 메시지는 우리는 그 자체로 푸시 테크를 언급합니다. 알림을 선택하면 알림 기술 자체에 대해 언급합니다.
푸시 알림을 사용해야 하는 이유
- 푸시 알림은 사용자에게 시의적절하고 관련성 있는 정확한 정보를 제공합니다.
- 푸시 알림은 웹사이트 소유자의 입장에서 참여를 유도할 수 있습니다.
푸시 알림은 어떻게 작동하나요?
개략적으로 푸시 알림을 구현하는 주요 단계는 다음과 같습니다.
- 사용자에게 푸시 알림 전송 권한을 요청하는 클라이언트 로직 추가 데이터베이스의 저장을 위해 클라이언트 식별자 정보를 서버로 전송합니다.
- 클라이언트 기기로 메시지를 푸시하는 서버 로직 추가
- 기기로 푸시된 메시지를 수신하는 클라이언트 로직 추가 알림으로 표시합니다.
이 페이지의 나머지 부분에서는 이러한 단계를 자세히 설명합니다.
푸시 알림을 보낼 권한 얻기
먼저 웹사이트에서 푸시 알림을 보낼 수 있도록 사용자의 권한을 얻어야 합니다.
이 동작은 Yes(예) 버튼 클릭과 같은 사용자 동작으로 트리거되어야 합니다.
Do you want to receive push notifications?
프롬프트 옆 확인이 완료되면
Notification.requestPermission()
를 호출합니다. 운영체제 또는
사용자 기기의 브라우저는 일종의 UI를 표시하여 공식적으로
사용자가 푸시 알림을 수신하기를 원합니다. 이 UI는 플랫폼에 따라 다릅니다.
클라이언트의 푸시 알림 구독
허가를 받은 후 웹사이트에서 사용자의 푸시 알림 구독 이는 JavaScript를 통해 이루어지며 Push API를 사용하여 추적 공개 인증 키를 제공해야 합니다. 이 내용은 나중에 자세히 알아보겠습니다 후(After) 구독 프로세스를 시작하면 브라우저에서 푸시 서비스로 알려진 웹 서비스에 적용하는 것입니다. 이에 대해서는 나중에 자세히 알아볼 것입니다.
구독이 성공했다고 가정하면 브라우저는
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()
를 호출하여 정보를 표시하는 핸들러
알림으로 전송합니다.
다음에 수행할 작업
- 웹 푸시 알림 개요
- 푸시 작동 방식
- 사용자 구독
- 권한 UX
- 웹 푸시 라이브러리를 사용하여 메시지 보내기
- 웹 푸시 프로토콜
- 푸시 이벤트 처리
- 알림 표시
- 알림 동작
- 일반 알림 패턴
- 푸시 알림 FAQ
- 일반적인 문제 및 버그 신고