[英]Web-Push notification script working on Firefox but not on Chrome
我正在構建一個Web推送通知系統,我正在使用此示例中使用的概念:
https://github.com/Minishlink/web-push-php-example
我的JS文件中有以下代碼。 它檢查API支持,檢查是否未禁用通知,注冊服務工作者,請求顯示通知的權限,如果允許則訂閱用戶並將詳細信息發送到服務器。 如果用戶已訂閱,則更新DB中的端點值。
當我在Firefox 61上運行它時,它工作正常,但當我在Chrome 67上運行它時,我收到此錯誤:
Uncaught (in promise) TypeError: Cannot read property 'getKey' of null
at pushSubscribe (notification.js:48)
at navigator.serviceWorker.ready.then.then.subscription (notification.js:30)
我的理解是,當服務工作者注冊並且用戶被訂閱時,Chrome不會檢測到訂閱 ,因此它會給出錯誤。 任何想法如何解決這一問題?
謝謝。
document.addEventListener('DOMContentLoaded', () => {
// Feature detection
if (!('serviceWorker' in navigator)) {
alert('Service Worker API isn’t supported.');
} else if (!('PushManager' in window)) {
alert('Push API isn’t supported.');
} else if (!('Notification' in window)) {
alert('Notifications API isn’t supported.');
} else if (!('showNotification' in ServiceWorkerRegistration.prototype)) {
alert('Notifications aren’t supported.');
// Check permission
} else if (Notification.permission == 'denied') {
alert('Notifications are disabled.');
} else {
// Register service worker
navigator.serviceWorker.register('/service-worker.js').then(() => {
navigator.serviceWorker.ready.then(serviceWorkerRegistration => serviceWorkerRegistration.pushManager.getSubscription()).then(subscription => {
if (!subscription) {
// Subscribe user
navigator.serviceWorker.ready.then(serviceWorkerRegistration => serviceWorkerRegistration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array('BNwjaNBKGM13IAef-gJr7C95W3yLJe2F5X0zLnwacN3zCnZK15Vqf3ijeHl9k7K0yBFX3ZwxAmldPoVDpi6iETA'),
})).then(subscription => {
return pushSubscribe(subscription);
});
}
// Update endpoint
return pushSubscribe(subscription);
});
});
function urlBase64ToUint8Array(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 pushSubscribe(subscription) {
const key = subscription.getKey('p256dh');
const token = subscription.getKey('auth');
const contentEncoding = (PushManager.supportedContentEncodings || ['aesgcm'])[0];
return fetch('/scripts/notification-subscribe.php', {
method: 'POST',
body: JSON.stringify({
endpoint: subscription.endpoint,
publicKey: key ? btoa(String.fromCharCode.apply(null, new Uint8Array(key))) : null,
authToken: token ? btoa(String.fromCharCode.apply(null, new Uint8Array(token))) : null,
contentEncoding,
user: userId, // generated beforehand
}),
}).then(() => subscription);
}
}
});
if(subscription){
const key = subscription.getKey('p256dh');
const token = subscription.getKey('auth');
const contentEncoding = (PushManager.supportedContentEncodings || ['aesgcm'])[0];
return fetch('/scripts/notification-subscribe.php', {
method: 'POST',
body: JSON.stringify({
endpoint: subscription.endpoint,
publicKey: key ? btoa(String.fromCharCode.apply(null, new Uint8Array(key))) : null,
authToken: token ? btoa(String.fromCharCode.apply(null, new Uint8Array(token))) : null,
contentEncoding,
user: 1,
}),
}).then(() => subscription);
}
}
Just modify this function hope pushSubscription with if block it works
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.