推送消息 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);
}