谷歌Chrome推送通知

Question

我正在为我的网站用户实现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);
}
})
);
});

Answer 1

我能给出的最好的建议：

1. 在indexDB中跟踪您的订阅(尤其是您发送到服务器的内容)。为什么选择IndexDB？
   1. 您可以在窗口和serviceworker中更新indexDB。这一点很重要，因为您将首先在窗口中获取PushSubscription，但serviceworker将调度您应该侦听的pushsubscriptionchange事件，并尝试获取新的PushSubscription(如果可以的话)
2. 加载页面时，请检查indexDB中是否有旧订阅，如果存在，请将其与getSubscription()(即当前订阅)进行比较。此检查应包括服务器端所需的任何值，例如，当浏览器从不支持有效负载变为支持它们时，它们从没有密钥变为突然有密钥，因此您应检查服务器是否有这些密钥
3. 请勿使用GCM的任何API，这将不适用于其他浏览器(Firefox、Opera、Samsung浏览器+未来的其他浏览器)，也不需要

Answer 2

1)您无法获得以前的注册id。有以下几种方法：

1. 每次订阅通知时，您都可以将其保存到本地chrome数据库(例如indexdb)中，当您再次订阅时，您只需从该数据库中恢复以前的注册id
2. 当你向GCM发送通知时，它会用规范的ID和另一个关于注册ID正确性的信息来回复你，这样你就可以删除无效的ID

2)您必须首先检查订阅id是否已经存在，然后如果不存在则订阅：

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.getSubscription().then(function(subscription) {
if(!subscription) {
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));
//send new subscription id to server
return;
});
}
});
}).catch(function(error) {
console.log('Service Worker error :^(', error);
});
}