javascript - PHP成功的webpush没有在SW中触发推送事件监听器
问题描述
我想实现对网站的推送通知,但我无法使用 PHP 和web 推送库触发推送事件,即使消息似乎已成功发送。
我试图从控制台(chrome)触发事件,它可以工作。
服务人员:
self.addEventListener('install', async event => {
// works fine
console.log('install event')
});
self.addEventListener("push", function(event) {
// console logs work only when I press push button in the console
console.log( 'push event' );
console.log( event );
var data = event.data.json();
event.waitUntil(self.registration.showNotification(data.title, {
body: data.body,
icon: data.icon,
tag: data.tag
}));
});
PHP端点(push.php):
<?php
require_once __DIR__ . '/vendor/autoload.php';
use Minishlink\WebPush\WebPush;
use Minishlink\WebPush\Subscription;
$auth = [
'VAPID' => [
'subject' => 'mailto:me@website.com', // can be a mailto: or your website address
'publicKey' => 'BL9qxdhqL_CM1ROLo6AUfeBvEyUuD7EHT3lAz8ksBZSYPsdE6q__uU2FoX9lr5FtmWtlHs-HRMHen3Ki8WWSVA4', // (recommended) uncompressed public key P-256 encoded in Base64-URL
'privateKey' => '7ldG3QYcY9KStB07ytTnd0CRCVSxbHfHYLyWEmgBKo0', // (recommended) in fact the secret multiplier of the private key encoded in Base64-URL
],
];
$subscription = Subscription::create([
// I'm using post just for test, in production I will fetch endpoints from database
'endpoint' => $_POST['endpoint'], // I get the value from subscription object
"keys" => [
'p256dh' => 'BL9qxdhqL_CM1ROLo6AUfeBvEyUuD7EHT3lAz8ksBZSYPsdE6q__uU2FoX9lr5FtmWtlHs-HRMHen3Ki8WWSVA4',
'auth' => '7ldG3QYcY9KStB07ytTnd0CRCVSxbHfHYLyWEmgBKo0'
],
'contentEncoding' => 'aesgcm',
]);
$webPush = new WebPush($auth);
$sent = $webPush->sendNotification($subscription, 'Hi');
foreach ($webPush->flush() as $report) {
$endpoint = $report->getRequest()->getUri()->__toString();
if ($report->isSuccess()) {
// I get this in the response
echo "[v] Message sent successfully for subscription {$endpoint}.";
} else {
echo "[x] Message failed to sent for subscription {$endpoint}: {$report->getReason()}";
}
}
我的JavaScript:
async function registerSw () {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js').then(function(registration) {
subscribeToPush();
}).catch(error => console.log(error));
} else {
alert('Service workers not supported');
}
}
async function subscribeToPush () {
navigator.serviceWorker.ready.then(function(registration) {
registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey:
urlB64ToUint8Array('BL9qxdhqL_CM1ROLo6AUfeBvEyUuD7EHT3lAz8ksBZSYPsdE6q__uU2FoX9lr5FtmWtlHs-HRMHen3Ki8WWSVA4')
})
.then(function(subscription) {
// The subscription was successful
ajax(subscription);
})
.catch(function(e) {
console.log( e );
});
});
}
function urlB64ToUint8Array(base64String) {
const padding = '='.repeat((4 - base64String.length % 4) % 4);
const base64 = (base64String + padding)
.replace(/\-/g, '+')
.replace(/_/g, '/');
const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
function ajax (subscription) {
console.log( 'in ajax' );
console.log( subscription );
$.ajax({
url: 'push.php',
type: 'POST',
data: {
'endpoint': subscription.endpoint,
},
success: function( response ) {
// response = JSON.parse( response );
console.log(typeof response);
console.log(response);
// I get message was sent successfuly here
},
error: function (xhr, status, error) {
console.log( xhr.responseText );
}
});
}
服务工作者注册成功,我可以请求用户许可并将订阅对象中的值发送回后端,网络推送一切正常,但事件仍然没有被触发。
任何帮助将不胜感激,谢谢。
解决方案
可能的问题之一是您需要在服务器上允许 PUT 和 DELETE 类型的请求。
推荐阅读
- postgresql - 从连接中获取 PostgreSQL 服务器版本?
- ios - 为 iOS 构建失败,线程 1:iOS 12.4 上的信号 SIGABRT
- excel - 复制表中的列并仅更新此列
- ios - 隐藏折线图数据集。迅捷IOS
- python - 将 MultiIndex 列转换为标准列
- excel - 在所有 y 轴刻度上显示相同数字的图表
- mysql - Mysql 之间的函数在连接中不起作用
- bash - Azure DevOps 在 bash 任务中生成密码
- asp.net - 如何在不使用 customErrors 的情况下摆脱 asp.net mvc 中的黄屏死机
- mysql - 案例陈述不适用于或条件