Связаться с намиПодключиться

Push-уведомления в браузере

Статья создана
Обновлена 26 августа 2025 г.

Push-уведомления в браузере — это сообщения, всплывающие в браузере.

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

Push-уведомления также поддерживаются в прогрессивных веб-приложениях — PWA. PWA — веб-приложение, которое работает в браузере, но сохраняет функции мобильного приложения. Например, PWA может работать офлайн, но при этом не потребуется скачивать обновления — они выполняются на стороне сервера.

Чтобы уведомление отправлялось в браузер по защищенному каналу, пользователь должен подписаться на уведомления через сервер уведомлений, который используется его браузером. Затем в канале уведомления CNS надо создать эндпоинт для этого пользователя.

Примечание

В сервисе действуют ограничения. Подробнее см. в разделе Квоты и лимиты Yandex Cloud Notification Service.

Порядок настройки Push-уведомлений:

  1. В сервисе CNS создайте канал Push-уведомления в браузере.

  2. Из браузера пользователя с помощью Service Worker вызовите метод JavaScript subscribe.

    При вызове метода браузер отправляет запрос на свой сервер отправки уведомлений. Например, Google Chrome отправляет запрос на Firebase Cloud Messaging (FCM), Safari — на Apple Push Notification Service (APNs). В ответ вернется объект PushSubscription.

  3. Преобразуйте полученный объект в JSON, вызвав метод toJSON.

  4. Используйте полученный JSON при создании эндпоинта. Через этот эндпоинт пользователю будут отправляться уведомления.

  5. Чтобы отправить уведомление, создайте сообщение в CNS и укажите в качестве получателя идентификатор (ARN) эндпоинта.

Чтобы отправлять уведомления разным пользователям, создайте базу эндпоинтов для всех пользователей.

Порядок отправки push-уведомлений:

  1. Ваше веб-приложение инициирует отправку уведомления через канал push-уведомлений в браузере.
  2. Команда на отправку поступает в CNS.
  3. CNS отправляет уведомления на серверы, заданные в эндпоинтах.
  4. Серверы уведомлений (FCM, APNs) отправляют уведомления в браузеры пользователей.

Особенности работы с push-уведомлениями в браузере

Работа с push-уведомлениями в браузере аналогична работе с мобильными push-уведомлениями, но обладает некоторыми особенностями.

Создание канала push-уведомлений

Создать канал уведомлений можно с помощью метода HTTP API create для ресурса PlatformApplications сервиса Yandex Cloud Notification Service или аналога метода для CLI или SDK.

В параметр Platform нужно передать значение WEB. Значения атрибутов PlatformPrincipal и PlatformCredential не используются.

Пример создания канала push-уведомлений в браузере для HTTP API:

export IAM_TOKEN=<IAM_token>
curl \
  --header "Content-Type: application/x-www-form-urlencoded; charset=utf-8" \
  --header "Authorization: Bearer ${IAM_TOKEN}" \
  --data-urlencode "Action=CreatePlatformApplication" \
  --data-urlencode "ResponseFormat=JSON" \
  --data-urlencode "FolderId=b1g85uk96h3f********" \
  --data-urlencode "Name=test" \
  --data-urlencode "Platform=WEB" \
  "https://notifications.yandexcloud.net/"

Где:

  • IAM_TOKEN — IAM-токен.
  • Action — тип операции.
  • ResponseFormat — формат ответа: JSON или XML.
  • FolderId — идентификатор каталога.
  • Name — имя канала уведомлений, задается пользователем.

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

Получение VAPID-ключа

Одним из шагов для создания эндпоинта является вызов метода JavaScript subscribe из браузера пользователя. Чтобы вызвать метод subscribe, необходим публичный VAPID-ключ. VAPID-ключ можно получить в атрибуте VAPIDPublicKey метода HTTP API getAttributes для ресурса PlatformApplications сервиса Yandex Cloud Notification Service или аналога метода для CLI или SDK.

Пример получения параметров канала push-уведомлений в браузере для HTTP API:

export IAM_TOKEN=<IAM_token>
curl \
  --header "Content-Type: application/x-www-form-urlencoded; charset=utf-8" \
  --header "Authorization: Bearer ${IAM_TOKEN}" \
  --data-urlencode "PlatformApplicationArn=arn:aws:sns::b1g7gh04hiav********:app/WEB/test" \
  --data-urlencode "Action=GetPlatformApplicationAttributes" \
  --data-urlencode "ResponseFormat=JSON" \
  "https://notifications.yandexcloud.net/"

Где:

  • IAM_TOKEN — IAM-токен.
  • PlatformApplicationArn — идентификатор (ARN) канала уведомлений.
  • Action — тип операции.
  • ResponseFormat — формат ответа: JSON или XML.
Пример успешного ответа в JSON
{
  "GetPlatformApplicationAttributesResponse": {
    "ResponseMetadata": {
      "RequestId":"1lOn********"
    },
    "GetPlatformApplicationAttributesResult": {
      "Attributes": {
        "CreatedAt": 1744743751,
        "Description": "",
        "LoggingPath": "",
        "Name": "test",
        "Platform": "WEB",
        "VAPIDPublicKey": "BCyZSlvKpYoRx_SaFpHtqyryq9lmutEyJ-hpeh_1jEcwTPvcJRtpv0VGw_zfOSZVjIzLCj5ggWgIyfW********"
      }
    }
  }
}

Также вы можете узнать VAPID-ключ с помощью консоли управления. Для этого:

  1. В консоли управления выберите каталог, в котором находится канал уведомлений.
  2. В списке сервисов выберите Cloud Notification Service.
  3. Выберите нужный канал.
  4. Значение VAPID-ключа будет указано в поле Публичный VAPID-ключ секции Обзор.

Создание эндпоинта

Создать эндпоинт можно с помощью метода HTTP API create для ресурса Endpoint сервиса Yandex Cloud Notification Service или аналога метода для CLI или SDK.

Для создания эндпоинта необходим объект PushSubscription в формате JSON, полученный в браузере пользователя. Объект PushSubscription нужно передать в параметре Token.

Пример объекта PushSubscription в JSON
{
 "endpoint": "https://fcm.googleapis.com/fcm/send/abcdef123456",
 "expirationTime": 1704093740000,
 "keys": {
   "p256dh": "BOrLkr7sEt8tERyAv6c8ZG5UC********",
   "auth": "aBcDeFg12345"
 }
}

Пример создания эндпоинта для HTTP API:

export IAM_TOKEN=<IAM_token>
curl \
  --header "Content-Type: application/x-www-form-urlencoded; charset=utf-8" \
  --header "Authorization: Bearer ${IAM_TOKEN}" \
  --data-urlencode "PlatformApplicationArn=arn:aws:sns::b1g7gh04hiav********:app/WEB/test" \
  --data-urlencode "Action=CreatePlatformEndpoint" \
  --data-urlencode "Token=<pushSubscription_JSON>" \
  --data-urlencode "CustomUserData=<данные_пользователя>" \
  --data-urlencode "ResponseFormat=JSON" \
  "https://notifications.yandexcloud.net/"

Где:

  • IAM_TOKEN — IAM-токен.
  • PlatformApplicationArn — идентификатор (ARN) канала уведомлений.
  • Action — тип операции.
  • Token — объект PushSubscription в формате JSON, который получен в браузере пользователя.
  • CustomUserData — прочие пользовательские данные, которые можно сохранить вместе с эндпоинтом.
  • ResponseFormat — формат ответа: JSON или XML.

Создать эндпоинт можно через консоль управления. В процессе создания также необходимо будет передать объект PushSubscription в JSON, полученный в браузере пользователя.

Отправка уведомлений

Отправить уведомление можно с помощью метода HTTP API publish для ресурса Endpoint сервиса Yandex Cloud Notification Service или аналога метода для CLI или SDK.

Отправить уведомление можно одним из способов:

  • Отправить текст уведомления в параметре Message без передачи текста для конкретной платформы.

    Пример отправки уведомления в виде простого текста для HTTP API:

    export IAM_TOKEN=<IAM_token>
curl \
  --header "Content-Type: application/x-www-form-urlencoded; charset=utf-8" \
  --header "Authorization: Bearer ${IAM_TOKEN}" \
  --data-urlencode "TargetArn=<идентификатор_эндпоинта>" \
  --data-urlencode "Action=Publish" \
  --data-urlencode "Message=<текст_уведомления>" \
  --data-urlencode "ResponseFormat=json" \
  "https://notifications.yandexcloud.net/"

    Где:

    • IAM_TOKEN — IAM-токен.
    • TargetArn — идентификатор (ARN) эндпоинта.
    • Action — тип операции.
    • Message — сообщение, которое вы хотите отправить в эндпоинт.
    • ResponseFormat — формат ответа: JSON или XML.

  • Передать текст по умолчанию и текст для конкретной платформы. При этом уведомление так же передается через параметр Message, но в формате JSON. Дополнительно надо задать параметр MessageStructure=json. Ключом для платформы при отправке уведомления в браузер будет строка WEB.

    Пример отправки уведомления в формате JSON для HTTP API:

    export IAM_TOKEN=<IAM_token>
curl \
  --header "Content-Type: application/x-www-form-urlencoded; charset=utf-8" \
  --header "Authorization: Bearer ${IAM_TOKEN}" \
  --data-urlencode "TargetArn=<идентификатор_эндпоинта>" \
  --data-urlencode "Action=Publish" \
  --data-urlencode "Message={ "default": "<текст_по_умолчанию>", "WEB": "<текст_для_браузера>" }" \
  --data-urlencode "MessageStructure=json" \
  --data-urlencode "ResponseFormat=json" \
  "https://notifications.yandexcloud.net/"

    Где:

    • IAM_TOKEN — IAM-токен.
    • TargetArn — идентификатор (ARN) мобильного эндпоинта.
    • Action — тип операции.
    • Message — уведомление в формате json.
    • MessageStructure — формат уведомления (json).
    • ResponseFormat — формат ответа: JSON или XML.

Также вы можете отправить уведомление без передачи текста для конкретной платформы через консоль управления.

См. также

Предыдущая
Мобильные Push-уведомления
Следующая
SMS