Как работают push-уведомления в браузере?

Push-уведомления в браузере работают на основе подписки. 2 Когда пользователь заходит на сайт, ему может быть предложено подписаться на уведомления. 2

Процесс происходит так: 1

1. Пользователь нажимает «Разрешить» и браузер создаёт специальный объект — PushSubscription. 1 Он содержит уникальный токен для устройства пользователя и адрес Push-сервера браузера, который будет передавать сообщение от сайта устройству. 1
2. Объект PushSubscription передаётся серверу сайта, где он хранится, чтобы в нужный момент отправить уведомление. 1
3. Сервер сайта сохраняет объект подписки в своей базе данных, чтобы в будущем отправлять уведомления конкретному пользователю. 1
4. Когда сервер хочет отправить уведомление, то использует сохранённую подписку и отправляет данные в Push-сервер браузера. 1
5. Push-сервер браузера получает уведомление и рассылает его на все устройства, связанные с этой подпиской. 1

Push-уведомления работают на уровне браузера и операционной системы, а не зависят от активности сайта. 1 Даже если вкладка закрыта, то Service Worker остаётся активным и принимает сообщения, поскольку работает в фоновом режиме. 1

Notifications API работает в браузере, но показывает уведомления так, как это делает сама операционная система. 1 Например, в Windows они будут всплывать в правом нижнем углу, а на macOS или мобильных устройствах — в центре уведомлений. 1