Overview
To implement Web Push Notifications on your Homepage, appropriate functionality must be provided both on the user client side and on the server.
The user client must first subscribe to the notifications and then receive and display them. On the client side, JavaScript is used for this. The standard Web Push API is implemented in almost all popular desktop and mobile browsers.
Subscriptions must be saved and managed on the server side and the desired messages sent. In this tutorial, the server side is implemented with PHP, since this is the most used platform and therefore this could be the easiest way to integrate into an existing system.
Packets found on the Internet all have multiple dependencies on other packets (signing, encryption, asynchronous sending of HTTP requests) and therefore also a very high overhead of unused ballast. For this reason, I decided to create a package based on the available sources that has no further external dependencies.
Web push notifications allow messages to be sent directly to users, even if they are not currently visiting the sender's homepage. Offers, news or other relevant information can be sent at any time and users can be redirected to a desired URL. From the user's point of view, push notifications have the advantage that the entire subscription process is anonymous (the provider does not need names or contact details such as an email address or other information) and the service can be terminated at any time.
In order for a provider to be allowed to send push notifications to a user, the user must first explicitly take any action on the sender's website to confirm that he wants to receive these messages. In addition, a unsubscribe option is automatically integrated in each delivered push message (how and where this unsubscribe option is offered depends on the users operating system and/or browser).
The push notifications are not displayed within the website area of a browser, but either in a separate popup window or via a service provided by the operating system (this varies depending on the device, operating system and browser and some browsers allow marginally settings - see also in the appendix). A notification usually consists of a title, a short text (optionally with an icon and/or a picture) and usually contains a direct link to the website it relates to. The notification system is an extremely powerful medium for interacting with users. However, the provider should always take care not to publish too much on this medium, otherwise users will deactivate all notifications.
An external push service is connected between the browser at client side and the message provider's server. The push service is responsible for delivering messages from the server to the respective users. When requesting information about the subscription from the Web Push API, the public part of a key is passed. With the help of the private part of this key, the server in turn has to encrypt the messages before sending them.
Code for two tasks must be integrated on your homepage. The first is to give the visitor the opportunity to subscribe to the web push notifications. In addition, the homepage must install a service ('Service Worker'), with which the client is registered on the server and received messages are processed. The service worker is downloaded in the background to the client platform so that it can be executed outside of the context of the homepage.
If the user subscribes to the service, the service worker is registered (1). The service-worker in turn requests all required information through the Web Push API (2) and sends this via an HTTP request (3) to the server. The server stores this information in his database (4) so that messages can be sent later.
Notifications can now be sent from the server to all registered clients with a HTTP request (2). In order to correctly identify yourself, a signature must be transmitted in the request header. This signature is generated from the public key used for registration together with the private part (1). The actual message and possibly further information are transmitted as user data - also encrypted. If the formatting, encryption and valid signature are correct, the push service sends the notification to the client (3).
A key pair containing a public and a private key is required for the whole process. These two keys are called VAPID keys (VAPID: Voluntary Application Server Identification for Web Push; RFC 8292 - https://tools.ietf.org/html/rfc8292) and have to be generated once for a website. There are various tools available for creating a VAPID key pair. Alternatively, online a key pair can be generated e.g. at https://tools.reactpwa.com/vapid. The private key should never be visible to the end user (e.g. in a JS script), but should only be used on the server for encryption when sending Notifications. VAPID protection ensures that messages can only be sent to clients from the authorized server.
Very detailed information about VAPID can be found in the following blog post: https://blog.mozilla.org/services/2016/04/04/using-vapid-with-webpush/