“Web Push Notifications” is a general term to refer to the push notifications sent by websites and web apps. However, if you are looking for an official document that defines the “Web Push Notifications” standard, you won’t find it. This is because this technology is made up of different technologies, each one serving to a specific purpose. Let’s find out what these technologies are and where the official standards are located (documentation).
The Push API is the standard that defines how to send a push message to a browser.
The push messages are sent from the application server (i.e. website backend) through a push service (provided by the browser company). The browsers are constantly connected to their push service and in this way the notifications can be delivered immediately even when a website is closed (e.g. the user is offline).
The Push API describes how the website should ask for permission before sending notifications.
A push subscription contains a secret endpoint (a URL with a random, unique token) that will be used to deliver the notifications to that specific browser. It also includes a cryptographic key that will be necessary to encrypt the content of the notifications (all push messages MUST be encrypted and can only be decrypted by the browser).
One of the most important methods defined by the Push API is
PushManager.subscribe(), which allows to subscribe the users to notifications.
Standard (official documentation): https://www.w3.org/TR/push-api/
In order to receive and display the notifications, a website must register a Service Worker.
The Push API can simply deliver a push message to a website in background, but it doesn’t display anything. So the website must read the push message and do something with it (i.e. show a notification to the user). Since the website is not necessarily open when you receive a push message, you need to handle it in background.
One of the methods that you will definitely use is
ServiceWorkerContainer.register(), in order so register (i.e. install) the service worker script on the user browser.
Standard (official documentation): https://www.w3.org/TR/service-workers/
Web Notifications are the actual notifications (UI) displayed to the user.
Basically the standard that defines how to display a notification that looks like a native notification (outside the browser window).
A notification has a title, a message, an icon, an image, some action buttons and much more. It has also some events that you should handle (e.g.
Note that a website can display some web notifications even without the Push API: however that would work only if the website is open. If you use the Push API in conjunction with web notifications you can deliver and display the notifications at any time.
In particular you will probably want to use the
ServiceWorkerRegistration.showNotification() method in order to display a notification to the user (i.e. when a push message is received by the service worker).
Standard (official documentation): https://notifications.spec.whatwg.org
The WEBPUSH Protocol (RFC 8030) defined by the IETF is the protocol used by the application server to deliver a push message to the push service. Basically it defines in detail how the communication between a website backend and a push service should take place.
The Push API is more focused on the client side (the interactions between the frontend and the browser), while it explicitly mentions the WEBPUSH Protocol for the communications between the backend and the push service.
Standard (official documentation): https://datatracker.ietf.org/doc/html/rfc8030
VAPID (Voluntary Application Server Identification) is a protocol to add an additional layer of security to the notification subscriptions.
Basically, when a push subscription is created, the website can pass a VAPID public key that will be associated to the subscription. Then the subscription can be used to deliver the notifications only by someone that knows the VAPID private key. All push messages sent through the WEBPUSH Protocol will include a VAPID header / signature.
Standard (official documentation): https://datatracker.ietf.org/doc/html/rfc8292
Other useful resources
The Mozilla Developer Network (MDN) has very good documentation about the Push API and all related standards.