我正在为我的网站用户实施chrome推送通知。我能够成功做到的。
我有两个问题？
1）每当我阻止来自浏览器设置的通知时，如何获取先前的订阅ID。我必须从后端服务器中删除订阅ID
2）每当我重新加载网站pushManager.subscribe方法时，每次向服务器发送订阅ID时都会运行，由于该API每次都使用相同的订阅ID命中
push.js
'use strict';
if ('serviceWorker' in navigator) {
console.log('Service Worker is supported');
navigator.serviceWorker.register('service_worker.js').then(function() {
return navigator.serviceWorker.ready;
}).then(function(reg) {
console.log('Service Worker is ready :^)', reg);
reg.pushManager.subscribe({userVisibleOnly: true}).then(function(sub) {
console.log('endpoint:',JSON.stringify(sub.endpoint));
console.log(sub.endpoint.substring('https://android.googleapis.com/gcm/send/'.length));
});
}).catch(function(error) {
console.log('Service Worker error :^(', error);
});
}
service-worker.js
'use strict';
var myurl;
console.log('Started', self);
self.addEventListener('install', function(event) {
self.skipWaiting();
console.log('Installed', event);
});
self.addEventListener('activate', function(event) {
console.log('Activated', event);
});
self.addEventListener('push', function(event) {
console.log('Push message', event);
event.waitUntil(
fetch('/notify.json').then(function(response) {
return response.json().then(function(data) {
console.log(JSON.stringify(data));
var title = data.title;
var body = data.body;
myurl=data.myurl;
return self.registration.showNotification(title, {
body: body,
icon: 'profile.png',
tag: 'notificationTag'
});
});
}).catch(function(err) {
console.error('Unable to retrieve data', err);
var title = 'An error occurred';
var body = 'We were unable to get the information for this push message';
return self.registration.showNotification(title, {
body: body,
icon: 'profile.png',
tag: 'notificationTag'
});
})
);
});
// var title = 'Vcona';
// event.waitUntil(
// self.registration.showNotification(title, {
// 'body': 'School Management',
// 'icon': 'profile.png'
// }));
self.addEventListener('notificationclick', function(event) {
console.log('Notification click: tag', event.notification.tag);
// Android doesn't close the notification when you click it
// See http://crbug.com/463146
event.notification.close();
var url = 'https://demo.innotical.com';
// Check if there's already a tab open with this URL.
// If yes: focus on the tab.
// If no: open a tab with the URL.
event.waitUntil(
clients.matchAll({
type: 'window'
})
.then(function(windowClients) {
console.log('WindowClients', windowClients);
for (var i = 0; i < windowClients.length; i++) {
var client = windowClients[i];
console.log('WindowClient', client);
if (client.url === url && 'focus' in client) {
return client.focus();
}
}
if (clients.openWindow) {
return clients.openWindow(myurl);
}
})
);
});
最佳答案
我可以提供的最佳建议：
在indexDB中跟踪您的订阅（尤其是您发送到服务器的订阅）。为什么选择IndexDB？
您可以在窗口和服务工作者中更新indexDB。这很重要，因为您首先会在窗口中获得一个PushSubscription，但是serviceworker将调度pushsubscriptionchange事件，您应该监听这些事件，并尝试获取新的PushSubscription（如果可以）。
页面加载后，请检查indexDB中是否有旧订阅（如果存在），将其与getSubscription()（即您当前的订阅）进行比较。此检查应包括服务器端需要的所有值，例如，当浏览器从不支持有效负载变为支持有效负载时，它们从没有密钥变为突然具有密钥-因此，您应检查服务器是否具有这些密钥。
请勿使用任何用于GCM的API，这将无法在其他浏览器（Firefox，Opera，三星浏览器及以后的其他浏览器）上使用，也不需要。