웹 푸시 알림을 보내는 방법-

Written by on in Articles

웹 브라우저 및 웹 브라우저로 푸시 알림을 보낼 수 있습니다. 대부분의 논리는 브라우저에서 수행되지만 알림을 생성하려면 여전히 서버 쪽 구성 요소가 필요합니다. 웹 푸시 백엔드를 구현하는 방법은 다음과 같습니다.

요약

이 자습서에서는 기본 사항을 알고 있다고 가정합니다. 웹 인프라를 사용하여 몇 개의 공용 끝점을 노출해야 합니다. 이러한 장치 등록 및 등록 취소를 브라우저의 자바 스크립트에 의해 호출됩니다.

이 문서에서는 브라우저 측 코드 또는 작동 방식에 대해 다루지 않습니다. 인바운드 푸시 이벤트에 응답하고 사용자에게 알림을 표시하는 서비스 워커를 설정해야 합니다.

높은 수준에서 웹 푸시 흐름은 다음과 같습니다:

  1. 푸시 구독이 브라우저에 저장됩니다. 브라우저가 자바스크립트에 고유한 엔드포인트를 보냅니다.
  2. 자바스크립트가 구독 데이터를 서버로 전송하고 해당 구독이 적용되는 사용자를 식별합니다.
  3. 백엔드에서 푸시 알림을 보내야 하는 경우 페이로드를 만들고 구독 데이터의 일부로 보고된 엔드포인트로 보냅니다.
  4. 사용자의 브라우저는 공급자의 알림 전달 플랫폼을 통해 페이로드를 수신합니다. 자바스크립트 서비스 작업자는 결과 이벤트를 처리하고 브라우저 알림을 사용하여 사용자에게 알립니다.

1~3 단계의 서버 측 측면을 구현하는 방법은 다음과 같습니다.이 패키지에는 다음 패키지가 포함되어 있습니다. 이렇게하면 각 브라우저 알림 플랫폼과의 상호 작용이 무시되므로 끝점 유형을 수동으로 구별 할 필요가 없습니다.

컴포저를 사용하여 프로젝트에 패키지 추가:

composer require minishlink / web-push

최신 버전을 사용하려면gmp, mbstring, curl, 그리고openssl확장. 이전 버전을 사용해야 하는 경우 호환성을 유지하기 위해 패키지를 이전 버전으로 잠급니다.

라이브러리는 알림을 개별적으로 또는 일괄 적으로 보낼 수있는 메서드가 포함 된 커널WebPush클래스를 노출합니다. 구독은Subscription분류 인스턴스로 표시됩니다.

맛없는 키 제공

맛없는 키를 사용하면 표준 준수 웹 푸시 생태계에 대한 신뢰가 향상됩니다. 서버는 브라우저로 인증 할 수 있도록 맛없는 키 쌍이 필요합니다. 공개 키는 엔드포인트를 통해 노출되어야 합니다.

web-push랩을 사용하여 맛없는 키 링을 생성 할 수 있습니다:

use MinishlinkWebPushVAPID; $ keyset = VAPID::createVapidKeys(); // public key - this needs to be accessible via an API endpointthrew out $ keyset; // private key - never expose this!threw out $ keyset; File_put_contents("vapid.json", json_encode($ keyset));

시스템에 대한 키를 생성하고 영구적인 위치에 저장합니다. 클라이언트측 자바스크립트가 공개 키를 검색할 수 있도록 엔드포인트를 추가합니다. 브라우저 푸시 구독을 구성하는 데 사용됩니다. 사용자의 장치는 들어오는 푸시 이벤트가 해당 개인 키를 사용하여 서명 된 경우 수락합니다.

푸시 구독 등록

순서의 다음 단계는 고객으로부터 푸시 구독 요청을 받는 것입니다. 브라우저가 새 푸시 구독을 확인한 후 자바스크립트는 구독 끝점과 연결된 인증 키의 주소를 서버로 보내야 합니다. 나중에 사용자에 연결된 푸시 등록된 장치를 검색할 수 있도록 이러한 세부 정보를 사용자 아이디와 함께 저장합니다.

구현은 데이터 저장소 계층과 자바스크립트에서 보낸 값에 따라 달라지기 때문에 이 단계에 대한 코드 샘플은 생략합니다. 이 객체는 일반적으로 다음과 같이 표시됩니다. 구독을 만들고,기존 구독을 교체하고,사용자가 구독을 취소할 때 삭제를 요청하려면 간단한 데이터베이스 기반 엔드포인트 집합이 필요합니다.

구독 준비

고객이 성공적으로 등록되면web-push라이브러리를 사용하여 알림 전송을 시작할 수 있습니다. 먼저 분류할WebPush인스턴스를 만듭니다:

use MinishlinkWebPushWebPush; $ webPush = new WebPush(]);

알림을 보낼 때마다WebPush인스턴스 하나를 다시 사용할 수 있습니다. 라이브러리는 이전에 생성한 맛없는 키 링으로 구성해야 합니다. 키는 기본 64 로 인코딩되어야 하지만 라이브러리를 사용하여 키를 만드는 경우 이 키가 처리됩니다.

바피드subject는 서버 및 해당 연락처를 식별하는 데 사용됩니다. 웹 사이트 주소 또는mailto:이메일 주소 링크를 제공할 수 있습니다.

그럼 당신은 당신이에 보내려고 푸시 구독을 잡아해야합니다. 데이터 액세스 시스템을 사용하여 보낼 사용자와 연결된 푸시 엔드포인트를 찾습니다. 각 구독을 하나의Subscription로 변환 예:

use MinishlinkWebPushSubscription; // Get user's push data ...// SELECT * FROM push_subscriptions WHERE user_id = 123456 $ subscription = Subscription::create(]);

PushSubscription의auth속성은 브라우저 서비스에서 사용하는 두 가지 다른 버전의 사양을 처리하기 위해 두 번 반복됩니다. 이 속성은 구독에 설정된 경우 제공해야 하는 또 다른 공개 키입니다.

web-push라이브러리는 크롬과 파이어 폭스 푸시 엔드 포인트와 호환됩니다. 또한 현재 표준을 충족하는 다른 웹 푸시 구현에서도 작동합니다.

알림 보내기

이제WebPush동부 표준시Subscription인스턴스를 결합하여 알림을 보냅니다.:

$ result = $ webPush -> sendOneNotification( $ subscription, json_encode());

아펠sendOneNotification()은 단일 알림에 대해 즉시 배달을 제공합니다. 이 경우 페이로드는 두 가지 속성을 가진 인코딩 된 배열입니다. 자바스크립트 클라이언트가 그대로 수신하고 필요에 따라 해석할 수 있습니다.

알림을 보내면 작업의 성공 여부를 확인할 수 있는 결과 클래스가 반환됩니다:

if ($ result -> isSuccess()) { // all good}else { // something went wrong error_log($ result -> getReason()); // provides raw HTTP response data error_log($ result -> getResponse()); }

오류가 발생할 경우 배달을 다시 시도하거나 취소하는 단계를 수행할 수 있습니다.

알림 구독도 만료될 수 있습니다. 결과 클래스에서isSubscriptionExpired()를 호출하여 이것이 실패의 원인인지 확인합니다. 이 시나리오에서는 죽은 끝점에 다른 것을 보내지 않도록 하여 데이터베이스에서 구독을 제거할 수 있습니다.

일괄 처리 알림

알림을 그룹화하여 단일 메서드 호출로 전달할 수 있습니다:

$ webPush -> queueNotification($ subscription, );$ webPush -> queueNotification($ subscription, ); foreach ($ webPush -> flush() as $i => $ result) { threw out ("Notification $i was " . ($ result -> isSuccess() ? "feels" : "not sent"));}

이 기능은 짧은 시간에 많은 수의 알림을 보낼 것임을 알고 있을 때 유용합니다. 모든 페이로드를 대기열에 넣고web-push이 최적으로 전달하도록하십시오.

메서드에 정수를 전달하는flush()하나로 전송되는 알림 수를 제한할 수 있습니다:

$ webPush -> flush(100); // send 100 messages

기본값은1000입니다.

알림 옵션

sendOneNotification()등queueNotification()배열의 세 번째 인수로 다음 옵션을 적용합니다:

  • TTL – 브라우저 알림 플랫폼이 알림을 사용자의 장치에 즉시 전달할 수 없는 경우 알림을 유지하는 기간을 제어합니다. 사용자의 장치가 오프라인 상태인 경우 플랫폼은 기본적으로 다음 4 주 동안 장치를 제공하려고 합니다. 다음 주에 관련성이 없는 알림을 보내는 경우 사용자에게 오래된 콘텐츠가 표시되지 않도록 그에 따라 기간을 조정합니다.
  • urgency – 6204>,low,very-low값을 그대로 사용합니다. 일부 플랫폼은 알림 전달 빈도를 조정하는 데 사용할 수 있습니다. 배터리 절약 모드로 들어가는 장치는 긴급하지 않은 알림 배달을 일시 중지 할 수 있습니다.
  • batchSize – 이는 위에서 설명한flush()의 인수와 동일한 효과를 갖습니다.

WebPush제조업체의 두 번째 인수를 사용하여 기본 옵션 값을 구성할 수 있습니다:

$ webPush = new WebPush(], );

요약

web-push라이브러리를 사용하면 웹 푸시 알림을 쉽게 보낼 수 있습니다. 일괄 처리,오류 처리 및 모든 웹 푸시 기능을 지원하는 다양한 브라우저 플랫폼 위에 추상화 계층을 얻을 수 있습니다.

웹 푸시 메커니즘은 사용자가 직접 제공하는 원격 서버 쪽 구성 요소에 의존하기 때문에 특이한 브라우저 시스템입니다. 이것은 불투명하고 기술적 인 것처럼 보일 수 있습니다. 프런트 엔드 구현은 일반적으로 가장 시간이 많이 걸리는 측면입니다.

답글 남기기

이메일 주소는 공개되지 않습니다.