Push API

Posted 2020-10-06 Tekkaman

【Push API】

　　The Push API gives web applications the ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded, on a user agent.

　　For an app to receive push messages, it has to have an active service worker. When the service worker is active, it can subscribe to push notifications, using PushManager.subscribe(). 

　　

　　subscribe 返回一个pushSubscription.其中PushSubscription.endpoint要发送给服务器，服务器以endpoint为地址，给client发push.it is a good idea to keep your endPoint a secret, so others do not hijack it and abuse the push functionality.

navigator.serviceWorker.register(\'serviceworker.js\').then(
  function(serviceWorkerRegistration) {
    var options = {
      userVisibleOnly: true,
      applicationServerKey: applicationServerKey
    };
    serviceWorkerRegistration.pushManager.subscribe(options).then(
      function(pushSubscription) {
        console.log(pushSubscription.endpoint);
        // The push subscription details needed by the application
        // server are now available, and can be sent to it using,
        // for example, an XMLHttpRequest.
      }, function(error) {
        // During development it often helps to log errors to the
        // console. In a production environment it might make sense to
        // also report information about errors back to the
        // application server.
        console.log(error);
      }
    );
  });

View Code

　　The service worker will be started as necessary to handle incoming push messages, which are delivered to theServiceWorkerGlobalScope.onpush event handler. 

　　每一个endpoint都是独一无二的。不要泄露，否则其它服务器可以给你的client发push。

　　当push到来时，全局的onpush属性会被调用。

this.onpush = function(event) {
  console.log(event.data);
  // From here we can write the data to IndexedDB, send it to any open
  // windows, display a notification, etc.
}

View Code

　　 

参考：https://developer.mozilla.org/en-US/docs/Web/API/Push_API