推送消息 web push notification
更新 : 2019-06-29
如果要监听 notification action 可以使用 notificationclick
常用的方式是,点击后打开 windows
https://developers.google.com/web/updates/2015/03/push-notifications-on-the-open-web
self.addEventListener('notificationclick', function(event) { console.log('On notification click: ', event.notification.tag); // Android doesn't close the notification when you click on it // See: http://crbug.com/463146 event.notification.close(); // This looks to see if the current is already open and // focuses if it is event.waitUntil( clients.matchAll({ type: "window" }) .then(function(clientList) { for (var i = 0; i < clientList.length; i++) { var client = clientList[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openWindow) { return clients.openWindow('/'); } }) ); });
如果没有打开就开,如果有 focus 就好了。
参考 :
https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/ ( step by step 教程 )
https://github.com/gauntface/web-push-book/blob/master/src/demos/node-server/frontend/app.js#L33 ( 教程里的源码 )
https://web-push-codelab.glitch.me/ ( 制造 public/private key 的机器 )
https://github.com/web-push-libs/web-push-csharp ( asp.net send to push service )
首先这个功能只有 chrome firefox 实现了.
IOS safari 是没有的 https://blog.izooto.com/ios-push-notifications-safari/
step by step 的依据这个做就可以了
https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/
push notification 的原理和过程大致是这样
会使用到 html5 service work 和 push API
首先开启 service work 然后要求 push 的 permission
之后会得到一个授权资料, 把资料存入 database 里, 当想推送的时候把信息和授权资料 send to 一个第三方机构 (push service)
不同游览器会是不同的机构. 之后机构就会把我们的信息给发出去了.
例子 :
export class AppComponent implements OnInit { constructor( ) { } private async registerWebWorkerAsync() { return navigator.serviceWorker.register('/assets/sw.js', { scope: '/assets/' }); } private async askPermissionAsync() { // callback 和 promise 都实现, 视乎有些游览器只有 callback 接口. return new Promise((resolve, reject) => { let permissionResult = Notification.requestPermission((result) => { resolve(result); }); if (permissionResult) { permissionResult.then(resolve, reject); } }) .then((permissionResult) => { if (permissionResult !== 'granted') { throw new Error('We weren\'t granted permission.'); } }); } private urlBase64ToUint8Array(base64String: string) { let padding = '='.repeat((4 - base64String.length % 4) % 4); let base64 = (base64String + padding) .replace(/\-/g, '+') .replace(/_/g, '/'); let rawData = window.atob(base64); let outputArray = new Uint8Array(rawData.length); for (let i = 0; i < rawData.length; ++i) { outputArray[i] = rawData.charCodeAt(i); } return outputArray; } async click() { let registration = await this.registerWebWorkerAsync(); await this.askPermissionAsync(); let subscribeOptions = { userVisibleOnly: true, applicationServerKey: this.urlBase64ToUint8Array( // public key 'BIdckxOfE3LPlcn9xLfoOP5i0j9Ryrs4R0b2ieKZHELjoeGh_KFhw7fUm7IwRMPWnEl_u1MDgfINYU99AtN4oks' ) }; let pushSubscription = await registration.pushManager.subscribe(subscribeOptions); console.log(JSON.stringify(pushSubscription)); //send the json to database } async ngOnInit() { } }
sw.js
self.addEventListener('install', function (event) { console.log("install"); }); self.addEventListener('activate', function (event) { console.log("activate"); }); self.addEventListener('push', function (event) { if (event.data) { console.log('This push event has data: ', event.data.text()); } else { console.log('This push event has no data.'); } const promiseChain = self.registration.showNotification('Hello, World.'); event.waitUntil(promiseChain); });
asp.net
// 刚的 json 资料里就有 pushEndpoint, p256dh, auth
var pushEndpoint = @"https://fcm.googleapis.com/fcm/send/f0Y2dNnu4OA:APA91bFE8hoMTobAkWy4OctQKsB31_cVDZTigsYK2R-KY4_YWd8siTey2adgmf_sUGOQCeOPzFe_hUWivQDY5xTJSwHqcWWypXjQ0WL6r-mG08kbj7btmjV-SJV7mN_9wYpLmeyEncre"; var p256dh = @"BPQmeaIyPVBmMq2Mh-wawz-wnSGgQkFeZf_BJQLs78He7PNm6Rt9q5w3RwTjcxR7qJNIrzawduK5ccUvS-9RYV0="; var auth = @"VHQbmWlrNju4kryCgcLqIg=="; var subject = @"mailto:hengkeat87@gmail.com"; var publicKey = @"BIdckxOfE3LPlcn9xLfoOP5i0j9Ryrs4R0b2ieKZHELjoeGh_KFhw7fUm7IwRMPWnEl_u1MDgfINYU99AtN4oks"; var privateKey = @"po1j4pj2opij43ij6daagp4i"; var subscription = new PushSubscription(pushEndpoint, p256dh, auth); var vapidDetails = new VapidDetails(subject, publicKey, privateKey); //var gcmAPIKey = @"[your key here]"; var webPushClient = new WebPushClient(); try { await webPushClient.SendNotificationAsync(subscription, "payload", vapidDetails); //webPushClient.SendNotification(subscription, "payload", vapidDetails); //webPushClient.SendNotification(subscription, "payload", gcmAPIKey); } catch (WebPushException exception) { Console.WriteLine("Http STATUS code" + exception.StatusCode); }