我试图在单击按钮时向移动用户发送推送通知。我可以在台式机上收到此类通知,但是当我在移动设备上使用chrome仿真器时,出现“未捕获(承诺)DOMException:注册失败-推送服务错误”。我正在谈论的按钮会触发服务人员的注册和推送订阅,并向节点/ hapi服务器发出发布请求,从而触发网络推送库发送通知通知。
以下是触发发布请求的函数:
$scope.sendNotification = async function run() {
console.log('Registering service worker');
const registration = await navigator.serviceWorker.
register('/sw.js', { scope: '/' });
console.log('Registered service worker');
registration.pushManager.getSubscription()
.then(function(subscription) {
if (subscription) {
return subscription.unsubscribe();
}
})
.catch(function(error) {
console.log('Error unsubscribing', error);
})
.then(function() {
console.log('User is unsubscribed');
isSubscribed = false;
});
console.log('Registering push');
let subs = await registration.pushManager.subscribe({
userVisibleOnly: true,
//The `urlBase64ToUint8Array()` function is the same as in
// https://www.npmjs.com/package/web-push#using-vapid-key-for-applicationserverkey
applicationServerKey: urlBase64ToUint8Array(publicVapidKey)
//gcm_sender_id: "681339210596"
});
let subJSObject = JSON.parse(JSON.stringify(subs));
let p256dh = subJSObject.keys.p256dh;
let auth = subJSObject.keys.auth;
console.log(subs.endpoint);
console.log('Registered push');
console.log('Sending push');
let subscription = {
endpoint: subs.endpoint,
keys: {
p256dh: p256dh,
auth: auth
}
};
await fetch('/pushNotification', {
method: 'POST',
body: JSON.stringify({subscription: subscription}),
headers: {
'content-type': 'application/json'
}
});
console.log('Sent push');
}
//Excerpt of the server...
const publicVapidKey = 'BJqx_xc-m75vN7aO_mUE2vfaKCh1j5YBQfWT0f2CO0ZDJOdsqayjaHjagbCbmj9jggGEGyTtcim7VrpbTckTnsU';
const privateVapidKey = 'HyYeJXmgnrL_3t8RGH32HfGcRpsWyBFM0YzdoO_zSZ8';
webPush.setVapidDetails('mailto:cj.ugwuanyi@gmail.com', publicVapidKey, privateVapidKey);
server.route({
method: 'POST',
path: '/pushNotification',
handler: async (request, h) => {
const subscription = request.payload.subscription;
const payload = JSON.stringify({title: 'Update!', body: 'This is a fresh update from the server!'});
return webPush.sendNotification(subscription, payload).then(function(response) {
console.log('Response: ', response);
return response;
})
.catch(function(error) {
console.log('Error: ', error)
return error;
})
}
})
//现在是应用清单。
{
"name": "PwaApp",
"short_name": "PwaApp",
"start_url": "index.html",
"display": "standalone",
"theme_color": "#000",
"background_color": "#000",
"description": "A sample PWA powered app!",
"icons": [
{
"src": "images/icon.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "images/review.png",
"sizes": "128x128",
"type": "image/png"
}
],
"prefer_related_applications": false,
"orientation": "portrait",
"gcm_sender_id": "681339210596",
"gcm_user_visible_only": true
}
如果问题太长,请原谅我。这是我的第一个问题。