- 安装库 'composer require minishlink/web-push'
- 您应该生成VAPID密钥。
- 然后在php脚本中替换“VAPID PUBLIC KEY”和“VAPID PRIVATE KEY”。替换：
- 'BFrp-TvkuqCeNsytRt...'
- '9BvI1aN1CR4w4iceMS...'
- 然后在js脚本中替换“VAPID PUBLIC KEY”。替换：'BFrp-TvkuqCeNsytRt...'
- 然后将文件（'service-worker.js'，'index.html'，'send.php'）上传到网站
- 在浏览器中打开'index.html'并允许推送通知。之后您将在控制台中看到'endpoint'、'p256dh'和'auth'。
- 将这些参数（'endpoint'、'p256dh'、'auth'）设置为php脚本（'send.php'）。替换：
- 'https://fcm.googleapis.com/fcm/send/djRg_IDPtSs:APA91bFwYCC73F4X3cXELK...'
- 'SPB_NNfRw...'
- 'BP-WMuJdP7buopSb_HrNX...'
- 在浏览器中打开'send.php'。推送将被发送。
这段代码在Chrome和Mozilla中运行正常。
generate.php - 用于生成VAPID密钥：
<?php
error_reporting(E_ALL);
ini_set("display_errors", 1);
header('Content-Type: text/html; charset=utf-8');
require __DIR__ . '/vendor/autoload.php';
use Minishlink\WebPush\VAPID;
print_r(VAPID::createVapidKeys());
service-worker.js
'use strict';
self.addEventListener('push', function (event) {
let pushMessageJSON = event.data.json();
self.registration.showNotification(pushMessageJSON.title, {
body: pushMessageJSON.body,
icon: pushMessageJSON.icon,
vibrate: pushMessageJSON.data.vibrate,
data: {
additionalData: pushMessageJSON.data.additionalData,
url: pushMessageJSON.data.url,
},
});
console.info("**** Recv'd a push message::", event);
});
self.addEventListener('notificationclick', function(event) {
let url = event.notification.data.url;
event.notification.close();
if (!url) return;
event.waitUntil(
clients.matchAll({type: 'window'}).then( windowClients => {
for (var i = 0; i < windowClients.length; i++) {
var client = windowClients[i];
if (client.url === url && 'focus' in client) {
return client.focus();
}
}
if (clients.openWindow) {
return clients.openWindow(url);
}
})
);
});
self.addEventListener('message', function (event) {
console.log("sw Handling message event:", event);
});
self.addEventListener('pushsubscriptionchange', function (event) {
console.log("sw Push Subscription Change", event);
event.waitUntil(
self.clients.matchAll()
.then(clientList => {
let sent = false;
console.debug("Service worker found clients",
JSON.stringify(clients));
clientList.forEach(client => {
console.debug("Service worker sending to client...", client);
sent = true;
client.postMessage({'type': 'update'});
});
if (sent == false) {
throw new Error("No valid client to send to.");
}
})
.catch(err => {
console.error("Service worker couldn't send message: ", err);
})
);
});
self.addEventListener('registration', function (event) {
console.log("sw Registration: ", event);
});
self.addEventListener('install', function (event) {
console.log("sw Install: ", JSON.stringify(event));
event.waitUntil(self.skipWaiting());
console.log("sw Installed: ", JSON.stringify(event));
});
self.addEventListener('activate', function (event) {
console.log("sw Activate : ", JSON.stringify(event));
event.waitUntil(self.clients.claim());
console.log("sw Activated: ", JSON.stringify(event));
navigator.serviceWorker
});
index.html用于请求推送通知
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1"/>
</head>
<body>
<script>
if (!Notification) {
console.log('*Browser does not support Web Notification');
}
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('service-worker.js?v=1', {scope: './'})
.then(function (registration) {
console.log("Service Worker Registered");
})
.catch(function (err) {
console.log("Service Worker Failed to Register", err);
})
}
navigator.serviceWorker.ready.then((reg) => {
const subscribeOptions = {
userVisibleOnly: true,
applicationServerKey: 'BFrp-TvkuqCeNsytRt...'
};
reg.pushManager.subscribe(subscribeOptions).then((subscription) => {
console.log('endpoint is: ' + subscription.endpoint);
console.log('p256dh is: ' + subscription.toJSON().keys.p256dh);
console.log('auth is: ' + subscription.toJSON().keys.auth);
document.write('<p>endpoint is: ' + subscription.endpoint + '</p>');
document.write('<p>p256dh is: ' + subscription.toJSON().keys.p256dh + '</p>');
document.write('<p>auth is: ' + subscription.toJSON().keys.auth + '</p>');
});
});
</script>
</body>
</html>
send.php 用于发送推送通知
<?php
error_reporting(E_ALL);
ini_set("display_errors", 1);
header('Content-Type: text/html; charset=utf-8');
require __DIR__ . '/vendor/autoload.php';
use Minishlink\WebPush\WebPush;
use Minishlink\WebPush\Subscription;
$push = [
'subscription' => Subscription::create([
'endpoint' => 'https://fcm.googleapis.com/fcm/send/djRg_IDPtSs:APA91bFwYCC73F4X3cXELK...',
'keys' => [
'auth' => 'SPB_NNfRw...',
'p256dh' => 'BP-WMuJdP7buopSb_HrNX...'
]
]),
'payload' => json_encode([
'title' => "Hello",
'body' => "How are you?",
'icon' => "https://cdn-icons-png.flaticon.com/512/3884/3884851.png",
'data' => [
'vibrate' => [100, 200],
'additionalData' => [],
'url' => "https://google.com",
],
]),
];
$auth = [
'VAPID' => [
'subject' => 'support@gmail.com',
'publicKey' => 'BFrp-TvkuqCeNsytRt...',
'privateKey' => '9BvI1aN1CR4w4iceMS...',
],
];
$webPush = new WebPush($auth);
try {
$webPush->queueNotification(
$push['subscription'],
$push['payload']
);
$report = $webPush->flush()->current();
$is_success = $report->isSuccess();
$response = $report->getResponseContent();
} catch (\Throwable $th) {
$is_success = false;
$response = $th->getMessage();
}
if ($is_success) {
echo "Push was sent";
} else {
echo "Push was not sent. Error message: " . $response;
}
