Pushpad

Understanding web push notifications

This is a general introduction to web push notifications. If you want to jump right in, you can read the Getting started guide.

The term Web Push Notifications (or simply Web Push, Web Notifications) refers to a set of new technologies that allow websites to send push notifications. The notifications can be delivered by a website even when the user is not surfing that website (i.e. the website is closed). This is possible thanks to a combination of new standards, such as the W3C Push API, Service Workers, Web Notifications and the IETF WebPush Protocol.

The following sequence describes the subscription process and the delivery of web push notifications:

Sequence diagram that describes Web Push
  1. A user visits a website that wants to send push notifications. The website installs (yes, installs...) a Javascript script: that script, called service worker, is permanently saved by the browser and will be used later to display push notifications.
  2. The website displays an authorization prompt to the user using Javascript (i.e. calls PushManager.subscribe()). If the user accepts to receive push notifications, then...
  3. The browser contacts its own push service (e.g. Mozilla autopush) to create a new "mailbox". A "mailbox" is a secret URL called endpoint. Anyone who knows that URL can send push notifications to that browser.
  4. The browser gives the endpoint to the web page through a Javascript callback and the enpoint is sent to the application server for the storage. The application server can be your own server if you build from scratch or the Pushpad server if you use Pushpad.
  5. When you need to send a notification, the server contacts the browser push service (e.g. Mozilla autopush) with an HTTP POST request. The request URL is the endpoint of the recipient.
  6. The browser is constantly connected to its own push service and fetches the new notifications.
  7. The service worker is activated by the push message and is responsible for displaying the web notifications to the user.

For stronger security a new protocol called VAPID has been introduced: when the website calls PushManager.subscribe(), it also provides a public key (the corresponding private key is kept on the server). The new endpoint can be used only if you can sign the push requests with the private key.