推送消息 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:[e-mail]";
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);
}