使用 React 和 Pushpad 進行 Web 推播通知

本教學示範如何使用 Pushpad SDK 將 Web 推播通知無縫整合到您的 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 替換為 Pushpad 儀表板中的實際項目 ID。

注意： Pushpad 的 init 功能嘗試註冊 service-worker.js。如果您已經註冊了 Service Worker，則可以使用下列方法繞過此操作：pushpad('init', PROJECT_ID, { serviceWorkerPath: null });.

Pushpad 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 進行 Web 推播通知的詳細內容。更多資訊請關注PHP中文網其他相關文章！