React와 Pushpad를 사용한 웹 푸시 알림

이 튜토리얼에서는 Pushpad SDK를 사용하여 웹 푸시 알림을 React 애플리케이션에 원활하게 통합하는 방법을 보여줍니다. 사용자가 푸시 알림을 구독하거나 구독 취소할 수 있는 버튼인 간단한 React 구성 요소를 만들어 보겠습니다.

Pushpad JavaScript SDK 설정

웹 사이트의 루트 디렉터리에 service-worker.js 파일을 추가하는 것부터 시작하세요. 이 파일에 다음 코드를 추가하세요:

<code class="language-javascript">importScripts('https://pushpad.xyz/service-worker.js');</code>

다음으로 웹사이트에 다음 코드 조각을 포함하세요.

<code class="language-javascript">(function(p,u,s,h,x){p.pushpad=p.pushpad||function(){(p.pushpad.q=p.pushpad.q||[]).push(arguments)};h=u.getElementsByTagName('head')[0];x=u.createElement('script');x.async=1;x.src=s;h.appendChild(x);})(window,document,'https://pushpad.xyz/pushpad.js');

pushpad('init', PROJECT_ID);</code>

푸시패드 대시보드에서 PROJECT_ID를 실제 프로젝트 ID로 바꿔야 합니다.

참고: 푸시패드의 init 기능은 service-worker.js 등록을 시도합니다. 이미 서비스 워커를 등록했다면 다음을 사용하여 이를 우회할 수 있습니다: pushpad('init', PROJECT_ID, { serviceWorkerPath: null });.

푸시패드 SDK 기능

Pushpad SDK는 다음과 같은 몇 가지 유용한 기능을 제공합니다.

• pushpad('subscribe'): 사용자를 구독하고 브라우저의 권한 프롬프트를 표시합니다.
• pushpad('status'): 현재 구독 상태를 검색합니다.
• pushpad('unsubscribe'): 사용자의 구독을 취소합니다.
• pushpad('uid'): 사용자를 인증합니다.
• pushpad('tags'): 타겟팅 데이터를 추가합니다.

React 구성요소: 구독/구독 취소 버튼

구독/구독 취소 버튼을 생성하기 위한 React 코드는 다음과 같습니다.

<code class="language-javascript">import React, { useState, useEffect } from 'react';

const PushSubscriptionButton = () => {
  const [subscribed, setSubscribed] = useState(null);

  useEffect(() => {
    pushpad('status', (isSubscribed) => {
      setSubscribed(isSubscribed);
    });
  }, []);

  const subscribe = () => {
    pushpad('subscribe', (isSubscribed) => {
      setSubscribed(isSubscribed);
      if (!isSubscribed) {
        alert('Notifications are blocked by browser settings.');
      }
    });
  };

  const unsubscribe = () => {
    pushpad('unsubscribe', () => {
      setSubscribed(false);
    });
  };

  if (subscribed === null) {
    return null;
  }

  return (
    subscribed ? (
      <button onClick={unsubscribe}>Unsubscribe</button>
    ) : (
      <button onClick={subscribe}>Subscribe</button>
    )
  );
};

export default PushSubscriptionButton;</code>

이 구성요소는 구독 상태를 확인하고 적절한 버튼("구독" 또는 "구독 취소")을 표시하며 구독/구독 취소 작업을 처리합니다. 또한 알림이 차단된 경우 사용자에게 친숙한 알림을 제공합니다.

알림 보내기

구독자가 있으면 Pushpad 대시보드(수동 전송)를 사용하거나 Pushpad API(Node.js 또는 기타 언어 라이브러리 사용)를 통해 프로그래밍 방식으로 알림을 보낼 수 있습니다. 이를 통해 사용자가 귀하의 웹사이트에 활발히 접속하지 않을 때에도 알림을 보낼 수 있습니다. 예로는 새 블로그 게시물 공지 또는 전자상거래 프로모션 등이 있습니다.

위 내용은 React와 Pushpad를 사용한 웹 푸시 알림의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!