React と Pushpad を使用した Web プッシュ通知

このチュートリアルでは、Pushpad SDK を使用して Web プッシュ通知を React アプリケーションにシームレスに統合する方法を説明します。 シンプルな React コンポーネント、つまりユーザーがプッシュ通知を購読または購読解除できるボタンを作成します。

プッシュパッド JavaScript SDK のセットアップ

まず、Web サイトのルート ディレクトリに service-worker.js ファイルを追加します。 このファイルに次のコードを追加します:

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

次に、次のコード スニペットを Web サイトに含めます:

<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 を登録しようとします。すでに Service Worker を登録している場合は、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>

このコンポーネントは、購読ステータスをチェックし、適切なボタン (「購読」または「購読解除」) を表示し、購読/購読解除アクションを処理します。 また、通知がブロックされた場合には、ユーザーフレンドリーなアラートも提供されます。

通知の送信

購読者を獲得したら、プッシュパッド ダッシュボード (手動送信) を使用するか、プログラムでプッシュパッド API (Node.js または他の言語ライブラリを使用) を介して通知を送信できます。 これにより、ユーザーが Web サイトにアクティブにアクセスしていないときでも通知を送信できます。 例には、新しいブログ投稿のお知らせや電子商取引のプロモーションなどが含まれます。

以上がReact と Pushpad を使用した Web プッシュ通知の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。