Apps have been able to do this for a long time, but the ability for websites to send notifications is somewhat newer. With the help of WebPush, users can be actively notified even if they are no longer on the corresponding website. The only requirement is that the browser is open.

Requirements

Receiving WebPush: the browser

No special apps are required to receive WebPush messages. WebPush is implemented directly in all new browsers. So-called service workers are responsible for the reception, these are activated when a notification is received, whereupon it is displayed .The service worker is a JavaScript file, which is provided by the web server and registered in the browser. To activate the corresponding service worker for a page, it is sufficient to grant permission for push notifications:

By allowing the notifications, a so-called subscription with the PushService is created via the Web Push API and the VAPID Key Pair (public and private key pair) provided by the web server.

PushService

The PushService is a service on the Internet, which is operated by the respective browser manufacturers for the conclusion of the subscription and the delivery of the messages.

Send WebPush: the web server

When the push notification is activated, an endpoint URL, a PublicKey and a token are generated using the VAPID Key Pairand a PushService operated by the browser manufacturer. The data is stored on the web server and can then be used by the website operator to create the notifications. In order for the service worker (browser) to receive messages from the PushService (Internet service of the browser manufacturer), these must first be encrypted at the web server with the private key of the VAPID pair.

Allow / disallow notifications

Permission to send notifications can be enabled or disabled at any time in the browser.
The web page notification settings are most easily accessed by clicking the lock icon to the left of the URL:

Firefox

Android

Google Chrome

The following URL can be used to display all service workers in Google Chrome:

chrome://serviceworker-internals/?devtools

WebPush provider vs. script

There are many providers on the internet that offer push notification services, but with the appropriate scripts the notification can be implemented without the need for an additional service provider: A demo implementation for Laravel can be examined on the following page: https://github.com/cretueusebiu/laravel-web-push-demo