本教程演示如何在React网站上轻松实现用户订阅网页推送通知功能。我们将创建一个React组件，方便用户订阅/取消订阅推送通知。 我们将使用Pushpad SDK来创建和管理推送订阅。
一、配置Pushpad JavaScript SDK
首先，在网站根目录添加名为service-worker.js的文件，并在其中添加以下代码：
importScripts('https://pushpad.xyz/service-worker.js');
然后，在您的网站中添加以下代码：
(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);
请将project_id替换为您的Pushpad项目ID（可在Pushpad控制面板的项目设置中找到）。
注意： pushpad('init') 会尝试注册service-worker.js。如果您已通过自定义代码注册了service worker，则可以使用pushpad('init', project_id, { serviceworkerpath: null });跳过此步骤。
二、JavaScript SDK 函数
Pushpad SDK 提供以下函数：
-
pushpad('subscribe')：订阅推送通知，显示浏览器权限提示。 -
pushpad('status')：获取当前推送订阅状态。 -
pushpad('unsubscribe')：取消推送通知订阅。 -
pushpad('uid')：用户身份验证。 -
pushpad('tags')：添加标签用于精准推送。
三、React组件：推送通知订阅按钮
以下React代码创建一个订阅/取消订阅按钮：
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;
代码简洁明了。组件首先检测用户是否已订阅。未订阅则显示“订阅”按钮；已订阅则显示“已订阅”文本。点击“订阅”按钮，浏览器会提示用户授权推送通知。 再次点击可取消订阅。
四、发送通知
订阅用户后，您可以通过Pushpad控制面板手动发送通知，或使用Pushpad API（Pushpad提供Node.js和其他语言的官方库）从服务器端发送通知。 例如，博客可以发布新文章时发送通知；电商可以推送产品促销信息。
