欢迎来到PHP实时通知系统讲座：Web Push API大冒险
大家好！欢迎来到今天的讲座，主题是如何在PHP项目中集成实时通知系统——特别是Web Push API。如果你对“实时通知”这个词感到陌生，那么想象一下这样一幅场景：你在刷朋友圈，突然手机嗡嗡一响，弹出一条消息：“你的订单已发货！”没错，这就是我们今天要实现的目标。
为了让大家听得轻松愉快，我会用一些幽默的方式讲解技术细节，并且尽量避免让你们陷入复杂的理论泥潭。准备好了吗？那我们就出发吧！
第一站：Web Push API是什么？
Web Push API 是一种允许网站向用户发送通知的技术，即使用户没有打开网页也可以收到通知。它的原理可以简单理解为：
- 浏览器和服务器之间建立一个安全的通信通道。
- 服务器通过这个通道将通知推送给浏览器。
- 浏览器显示通知给用户。
听起来是不是很神奇？不过别急，接下来我们会一步步拆解它。
第二站：准备工作
在开始编码之前，我们需要做一些基础工作：
1. 安装必要的工具
- PHP 环境（当然啦，这是必须的）
- 一个支持 HTTPS 的服务器（因为 Web Push API 要求使用 HTTPS）
- 一个服务端库来处理推送逻辑（推荐
web-push库）
2. 注册 VAPID 密钥
VAPID（Voluntary Application Server Identification）是 Web Push API 中用于身份验证的一种机制。你需要生成一对公钥和私钥。
以下是生成密钥的代码片段：
<?php
require 'vendor/autoload.php';
use MinishlinkWebPushVapid;
// 生成 VAPID 密钥
$vapid = Vapid::create();
echo "Public Key: " . $vapid->getPublicKey() . "n";
echo "Private Key: " . $vapid->getPrivateKey() . "n";
?>运行这段代码后，你会得到两个字符串：公钥和私钥。请妥善保存它们！
第三站：前端部分
接下来，我们进入前端的世界。在这里，我们需要编写 JavaScript 来请求用户的权限，并订阅推送服务。
1. 请求权限
if ('serviceWorker' in navigator && 'PushManager' in window) {
console.log('Service Worker 和 Push API 可用！');
// 注册 Service Worker
navigator.serviceWorker.register('/sw.js').then(function(registration) {
console.log('Service Worker 已注册');
// 请求推送权限
Notification.requestPermission().then(function(permission) {
if (permission === 'granted') {
console.log('用户已授权推送通知');
// 订阅推送服务
registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array('YOUR_PUBLIC_KEY')
}).then(function(subscription) {
console.log('订阅成功:', subscription);
// 将订阅信息发送到服务器
fetch('/save-subscription', {
method: 'POST',
body: JSON.stringify(subscription),
headers: {
'content-type': 'application/json'
}
});
});
} else {
console.log('用户拒绝了推送通知');
}
});
});
} else {
console.log('当前浏览器不支持推送通知');
}注意：urlBase64ToUint8Array 是一个辅助函数，用来将 Base64 编码的公钥转换为 Uint8Array 格式。
第四站：后端部分
现在轮到 PHP 出场了！我们将使用 web-push 库来发送通知。
1. 安装 web-push 库
通过 Composer 安装：
composer require minishlink/web-push2. 发送通知
以下是一个简单的示例代码：
<?php
require 'vendor/autoload.php';
use MinishlinkWebPushWebPush;
use MinishlinkWebPushSubscription;
// 获取订阅信息（从数据库或其他存储中读取）
$subscription = Subscription::create([
'endpoint' => 'https://fcm.googleapis.com/fcm/send/...',
'keys' => [
'p256dh' => '...',
'auth' => '...',
],
]);
// 创建 WebPush 实例
$webPush = new WebPush([
'VAPID' => [
'subject' => 'mailto:your-email@example.com',
'publicKey' => 'YOUR_PUBLIC_KEY',
'privateKey' => 'YOUR_PRIVATE_KEY',
],
]);
// 发送通知
$webPush->sendOneNotification(
$subscription,
json_encode(['title' => '你好！这是一条推送通知']),
null, // 可选的 TTL 值
true // 是否需要返回结果
);
// 清理并获取反馈
$responses = $webPush->flush();
foreach ($responses as $response) {
if ($response->isSuccess()) {
echo '通知已成功发送！';
} else {
echo '发送失败: ' . $response->reason;
}
}
?>第五站：常见问题与解决方案
在实际开发中，你可能会遇到一些问题。以下是一些常见的坑点及其解决方法：
| 问题 | 解决方案 |
|---|---|
| 用户未授权推送 | 确保调用了 Notification.requestPermission() 方法，并检查浏览器是否支持推送功能。 |
| 推送失败 | 检查订阅信息是否正确，以及 VAPID 密钥是否匹配。 |
| HTTPS 问题 | 确保你的站点启用了 HTTPS，否则无法使用 Web Push API。 |
第六站：总结
恭喜你！经过一番努力，我们终于完成了 PHP 项目中的实时通知系统集成。虽然过程有些复杂，但只要按照步骤一步步来，相信你也能轻松搞定。
最后，引用一句国外技术文档中的话：“The beauty of Web Push lies in its simplicity and power.”（Web Push 的魅力在于其简单性和强大功能。）
希望今天的讲座对你有所帮助！如果有任何疑问，请随时提问。下次见啦！
