VAPID Web Push

VAPID is an abbreviation for "Voluntary Application Server Identification" and is fully described in the VAPID IETF specification.

VAPID is supported by all standard browsers (Firefox, Chrome, Opera, Edge) except Safari.

The most important to understand about VAPID is, how it can be used. And this is much easier as for the Safari browser. All what a customer needs to do is to

  • create a public/private key pair. This can - for example - be done by using a specific NodeJS library.

  • store the key pair in the UI Store the Key Pair

  • initialize the Web SDK with the public key and the URL of the service worker. Service Worker Settings

  • invoke the subscribe method of the Web SDK

The customer is well advised to combine - right from the start - the calling of the subscribe method with a user interaction on the website. More and more browser manufacturers require this.

Changes to the key pair are very problematic as soon as a website is in use, because the change invalidates all previously collected push tokens (in the case of VAPID called "subscriptions").

It is very important that the service worker code must be hosted in the root of the website domain. This is the reason why you see just something like "service-worker.js" in the SDK initialization code. The service-worker.js file contains an importScripts statement that fetches the web-emarsys-service-worker.js from our CDN (assets.emarsys.net):

// This is how our customer imports our service worker code in his own "service worker"
self.importScripts("https://assets.emarsys.net/web-emarsys-sdk/2.2.0/web-emarsys-service-worker.js")

Service Workers

Service workers are an essential part of Web Push notification delivery in browsers that support VAPID. The service worker is a kind of service which is running in the browsers background. It registers itself for reception of push notification and notification click events.

Once a notification event is received, the service worker is assembling the message based on the received data and triggers the display of the notification.

Another responsibility of the service worker is the forwarding to a page if the user clicks on the notification. In such a case the service worker will also report an open event to the respective Web Push backend (device event service).

References