使用 React 和 Pushpad 进行 Web 推送通知-js教程-PHP中文网

使用 React 和 Pushpad 进行 Web 推送通知

碧海醫心

发布： 2025-01-23 18:54:28

原创

865人浏览过

使用 react 和 pushpad 进行 web 推送通知

本教程演示如何在React网站上轻松实现用户订阅网页推送通知功能。我们将创建一个React组件，方便用户订阅/取消订阅推送通知。我们将使用Pushpad SDK来创建和管理推送订阅。

一、配置Pushpad JavaScript SDK

首先，在网站根目录添加名为service-worker.js的文件，并在其中添加以下代码：

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

登录后复制

然后，在您的网站中添加以下代码：

<code class="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控制面板的项目设置中找到）。

注意： pushpad('init') 会尝试注册service-worker.js。如果您已通过自定义代码注册了service worker，则可以使用pushpad('init', project_id, { serviceworkerpath: null });跳过此步骤。

二、JavaScript SDK 函数

知我AI

一款多端AI知识助理，通过一键生成播客/视频/文档/网页文章摘要、思维导图，提高个人知识获取效率；自动存储知识，通过与知识库聊天，提高知识利用效率。

查看详情

Pushpad SDK 提供以下函数：

pushpad('subscribe')：订阅推送通知，显示浏览器权限提示。
pushpad('status')：获取当前推送订阅状态。
pushpad('unsubscribe')：取消推送通知订阅。
pushpad('uid')：用户身份验证。
pushpad('tags')：添加标签用于精准推送。

三、React组件：推送通知订阅按钮

以下React代码创建一个订阅/取消订阅按钮：

<code class="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('浏览器阻止了推送通知。');
      }
    });
  };

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

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

  return subscribed ? <span>已订阅</span> : <button onClick={subscribe}>订阅</button>;
};

export default PushSubscriptionButton;</code>

登录后复制

代码简洁明了。组件首先检测用户是否已订阅。未订阅则显示“订阅”按钮；已订阅则显示“已订阅”文本。点击“订阅”按钮，浏览器会提示用户授权推送通知。再次点击可取消订阅。

四、发送通知

订阅用户后，您可以通过Pushpad控制面板手动发送通知，或使用Pushpad API（Pushpad提供Node.js和其他语言的官方库）从服务器端发送通知。例如，博客可以发布新文章时发送通知；电商可以推送产品促销信息。

以上就是使用 React 和 Pushpad 进行 Web 推送通知的详细内容，更多请关注php中文网其它相关文章！