Как работают пуш-уведомления в браузере, даже если сайт закрыт

Пуш-уведомления в браузерах — это сообщения, которые сайты могут отправлять пользователю через браузер, даже если сайт закрыт. Раньше такое было только в приложениях, но теперь доступно и через браузер.

Мы уже рассказывали о том, как работают мобильные пуш-уведомления. Сегодня подробно разберём веб-пуши: почему они приходят, даже если страница закрыта, и что с этим делать.

Что такое пуши и зачем они нужны

Пуш-уведомления (push) — это короткие сообщения, всплывающие на экране компьютера или мобильного телефона. Их основная цель — привлечь новую аудиторию и оповестить пользователей приложения об интересных новостях, акциях, услугах и записях.

Впервые пуши появились в 90-х. Десктопный продукт под названием PointCast пытался «пушить» новости и биржевые данные прямо на экран пользователей. Идея была хорошей, но с учётом скорости интернета того времени работало не очень. В итоге технология на время уступила место pull-технологиям — когда данные забираются только по запросу, например через RSS.

Но всё изменилось в 2010-х. С ростом скорости интернета пуш-технологии вернулись и стали основным средством уведомлений в мобильных устройствах, браузерах и умных гаджетах. Теперь пользователи получают новости, сообщения и напоминания в режиме реального времени. Без всяких обновлений страницы.

Push и уведомления — это две разные технологии, которые работают вместе. Push отвечает за отправку сообщения на устройство, даже если сайт или приложение закрыты. Уведомления — это то, что пользователь видит на экране. Теоретически можно отправлять push без уведомления (так называемый «тихий push»), но браузеры пока этого не могут. Обычно эти технологии используют вместе, поэтому когда говорят «push-уведомления», то имеют в виду и отправку сообщения, и его показ.

Пуш-уведомление — это не только текст. Оно может включать заголовок, краткое описание, иконку или изображение, кнопки действий, ссылку, по которой можно перейти. Например, в коде приложения это может выглядеть так:

{
  "title": "Вышла новая статья!",
  "body": "Рассказали про хеширование",
  "icon": "https://thecode.media/icon.png",
  "url": "https://thecode.media/messages",
  "actions": [
    {
      "action": "view",
      "title": "Открыть"
    },
    {
      "action": "dismiss",
      "title": "Закрыть"
    }
  ]
}

Вы джуниор во фронтенд-разработке? Станьте мидлом!

Что происходит на самом деле

Если на сайте предусмотрена система пуш-уведомлений, то при первом посещении вы, скорее всего, увидите какой-то такой запрос от браузера: «Разрешить уведомления?» Нажав «Разрешить», пользователь даёт сайту доступ отправлять сообщения даже тогда, когда сайт закрыт.

Если пользователь нажимает «Разрешить», браузер создаёт специальный объект, который называется PushSubscription. Этот объект содержит:

Объект PushSubscription передаётся серверу сайта, где он хранится, чтобы в нужный момент отправить пуш. Сайт сам по себе ничего не отправляет напрямую — всю магию выполняет push-сервер браузера.

Если же пользователь нажимает «Запретить», то процесс подписки сразу прекращается. Браузер фиксирует выбор и блокирует любые дальнейшие запросы на разрешение уведомлений от этого сайта. Это значит, что PushSubscription не создаётся и браузер даже не пытается передать данные об устройстве сайту. И сайт не сможет запросить разрешение снова. По крайней мере, до тех пор, пока пользователь сам не изменит настройки уведомлений в браузере.

Вот так схематично выглядит подписка на уведомления и их отправка:

Сайты не могут отправлять пуши прямо на устройство — всё проходит через Push-серверы браузеров. Это сделано для защиты пользователей: браузеры контролируют, кто и что может присылать, чтобы не спамить.

Как пуши доходят до пользователя

Вся механика пуш-уведомлений в браузерах основана на JavaScript, Push API и Service Worker. Посмотрим, как это работает под капотом.

Пуши работают благодаря Service Worker. Это фоновый скрипт, который браузер запускает независимо от активности сайта. Он не имеет доступа к DOM (то есть не может напрямую изменять страницу), но может обрабатывать пуш-уведомления, кэшировать ресурсы для офлайн-режима и перехватывать сетевые запросы, оптимизируя их. Даже если вкладка сайта закрыта, Service Worker остаётся активным и может обрабатывать уведомления, которые приходят через браузер. 

Когда Push-сервер браузера получает уведомление и рассылает его на все устройства, браузер принимает уведомление и передаёт его в Service Worker. 

Чтобы цепочка заработала, сначала разработчик регистрирует Service Worker в коде сайта. Это может выглядеть примерно так:

// Проверяем, поддерживает ли браузер Service Worker
if ('serviceWorker' in navigator) { 
  // Если Service Worker поддерживается, продолжаем
  window.addEventListener('load', function() { 
    // Ждём, пока страница полностью загрузится
   // Регистрируем Service Worker из файла
    navigator.serviceWorker.register('/sw.js')
      .then(function(registration) { 
        // Если регистрация прошла успешно
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
        // Выводим сообщение в консоль с областью действия (scope) зарегистрированного Service Worker
      }, function(err) {
        // Если регистрация завершилась с ошибкой
        console.log('ServiceWorker registration failed: ', err);
        // Выводим сообщение об ошибке в консоль
      });
  });
}

Обучение в Яндекс Практикуме Полный курс по фулстек-разработке с нуля

Наличие и статус Service Worker сайта можно проверить с помощью инструментов разработчика в браузере. Для этого нужно перейти во вкладку «Приложение» и слева выбрать раздел Service workers. Здесь отображаются все зарегистрированные Service Worker, их статус (активирован или в ожидании), а также данные об их работе.

Можно тестировать функциональность Service Worker — вручную перезапустить или остановить Service Worker. Также в разделе Push-рассылка можно отправить тестовые push-сообщения и отладить обработку уведомлений:

Следующий шаг после регистрации Service Worker — создание подписки через Push API. Push API — это встроенный в браузеры инструмент, и именно с его помощью браузер получает разрешение от пользователя. Push API создаёт подписку для устройства пользователя и связывает сайт с Push-сервером. 

Когда сервер сайта хочет отправить уведомление, то использует сохранённую подписку, чтобы отправить данные уведомления в Push-сервер браузера. Браузер вызывает событие push в зарегистрированном Service Worker. Service Worker обрабатывает данные уведомления и с помощью метода showNotification отображает его на экране пользователя.

Почему уведомления приходят даже при закрытом сайте

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

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

Пуши приходят даже при закрытом сайте, но не могут «разбудить» устройство, если оно в режиме сна или выключено. Если компьютер не в сети, то пользователь не получит уведомления, пока не подключится. 

Чего пуши не могут

Сайт не сможет отправлять уведомления без явного согласия пользователя. Если вы один раз нажали «Запретить», браузер заблокирует запросы на пуши. При этом если запретили уведомления для сайта по ошибке и хотите их включить, это можно сделать через настройки сайта в разделе «Конфиденциальность и безопасность»:

Пуши ничего не знают о пользователе и не собирают никакой информации — ни вашего имени, ни почты. Они работают только с техническими данными — с токеном подписки, чтобы просто доставить сообщение. Для пушей пользователь — просто уникальный номер.

Без интернета пуши ничего не доставят. Если ваше устройство офлайн, сообщение останется на сервере браузера и дождётся, пока вы снова выйдете в сеть. Но у каждого уведомления есть срок жизни — если за это время устройство не подключится, сообщение просто удалится.

Фронтенд-разработка — востребованная профессия

На новом курсе «Практикума» о фронтенде вас обучат самым востребованным технологиям: JS и TypeScript, Flexbox и Grid, React, Git, Bash и др. Это то, что нужно работодателям сегодня. Старт — бесплатно.

Попробовать бесплатно