Web Push API and Service Worker 2

TL;DR

try the demo here: https://github.com/leon0707/web_api_worker

Background knowledge in the previous article: https://medium.com/@leonfeng/web-push-api-and-service-worker-1-c57c54ad1acf

1. Implement a Web push notification app
2. Demonstrate how to send PushEvent data from a service worker to its client

Push Notifications to the browser involves two parts:

• Push api(invoked when a remote web push server send messages to the service worker running in the browser)
• notification(action of a service worker or web page script showing messages to the user)

In general, five steps are involved to create a local notification push service:

1. local backend server generates a public key(VAPID The application uses it to identify itself to push services like “mozilla autopush” for firefox) and a private key for verification of the push operation.
2. client in the browser registers a service worker and let it subscribe to the push service provided by the backend using the public key. (basically, browser sends the public key to its web push registry eg. google firebase cloud or mozilla autopush, then the registry returns a unique endpoint and its authentication information)
3. client sends the endpoint and its authentication information to the local backend, and backend saves it into the database(backend can use these information to push messages to the client in the future). Not in the picture
4. local backend pushes messages to web push endpoints provided by clients.(mozilla autopush server if you use firefox)
5. the remote web push server receives messages, then sends a push event to the service worker. The service worker which is listening to the PushEvent receives the notification and shows messages.

From google

From google

In this example, we use a JavaScript web push library to generate keys.

npm install -g web-push
web-push generate-vapid-keys
=======================================
Public Key:
BFVNf6k7eOw3VsvQACpHi8I4ndS6FSmtjr0DQS-v1MDeooUaFMjsgJDm*******
Private Key:
GKBvdbuXG09cTOMvWt46m3on8L***********
=======================================

client.js

The service work registration has a reference to the pushManager interface for managing push subscriptions. pushManager can subscribe to a push service and resolve a PushSubscription object containing details of a push subscription. Also, the publish key string need to be converted to an ArrayBuffer object using function below

The client posts the subscription details to the local backend server. The backend will push one notification to the endpoint. Eventually, remote web push server will send the notification to the browser and trigger the PushEvent in service worker.

function processMessage(message) {
 return self.clients.matchAll({
      includeUncontrolled: true // https://developer.mozilla.org/en-US/docs/Web/API/Clients/matchAll
    }).then(clients => {
     // post messages to client
     clients[0].postMessage(message);
     // show notification
     self.registration.showNotification(message.title, {
      body: message.body
    });
    });
}
self.addEventListener('push', e => {
  const data = e.data.json();
  console.log('received message from web push server');
  e.waitUntil(
   processMessage(data)
  );
});

In this example, the message has been displayed as a notification and sent back to the client. The way to find the client works here, because this service worker has only one client.