使用 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中文网其他相关文章！