In order to send push notifications from a website to a browser, you need to use a push service, as defined by the W3C Push API: let's see a list of push services for the major browsers and how they work.
When an application needs to deliver a push notification to a user, the application server sends the notification to the browser push service, then the browser push service delivers the notification to the user browser.
A push service is like a mailman that receives some messages from the websites (application servers) and delivers them to the end users (browsers).
You can also read the official definition of push service given by the W3C.
Each browser has its own push service and the websites cannot change it.
Basically when a website calls PushManager.subscribe() with JavaScript, a permission prompt is displayed to the user, then the browser returns a push subscription, which includes a secret URL (endpoint) that allows to send notifications to that browser. An endpoint is similar to a mailbox (but it is different for each website, so that it's easy to revoke it).
The browser generates a new push subscription (endpoint) by making a request to its own push service. Then, once the push subscription is given to the website, the website uses it to connect to the browser push service and send notifications. In the meantime the user browser is constantly connected to its push service in order to detect any new message arriving from any website.
Here's an example endpoint:
https://updates.push.services.mozilla.com/wpush/v2/VeryLongRandomToken12345
In this case you can clearly see that the endpoint belongs to Mozilla (Firefox).
If you invoked PushManager.subscribe() with JavaScript while surfing with Chrome, you will probably get an endpoint like this:
https://fcm.googleapis.com/fcm/send/VeryLongRandomToken
This is Google FCM.
Here's the complete list of push services for the major browsers:
- Mozilla autopush for Firefox
- Google Firebase Cloud Messaging (FCM) for Chrome (and some Chromium-based browsers like Brave, Opera, etc.)
- Windows Push Notification Services for Edge
- Apple Push Notification service (APNs) for Safari (at the time of writing Safari still uses a proprietary technology, not the standard)
You can also see the list of domains associated to those push services. That list is especially useful when an application needs to send a notification request to the browser push service: before connecting to the endpoint (domain) you may want to ensure that it is a real, trustworthy domain that belongs to a real browser. Otherwise a malicious endpoint may damage your application with slow or broken connections, wrong status codes, etc.
Finally, to avoid confusion, we need to clarify that the term push service is used for two different things:
- Browser push service. The official definition of push service, given by the W3C, is exactly what we have described above: "The term push service refers to a system that allows application servers to send push messages to a web application. A push service serves the push endpoint or endpoints for the push subscriptions it serves. The user agent connects to the push service used to create push subscriptions". Example: Mozilla autopush.
- Other push services. A service that provides more advanced / high-level features for push notifications is also called a push service. Example: Pushpad. In this case a website that uses Pushpad (or a similar service) sends the notifications to Pushpad, then Pushpad delivers the notifications to the browser push service (e.g. Mozilla autopush for Firefox, FCM for Chrome, APNs for Safari, etc.), and finally the browser push service delivers the notification to the browser / end user (e.g. Firefox, Chrome, Safari, etc.).