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

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

Процесс происходит так: thecode.media

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

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

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