Что нужно знать вебу чтобы отправить push на телефон?

Отправка Web Push-уведомлений на телефон: ключевые компоненты

Для отправки push-уведомлений из веб-приложения на мобильное устройство (или десктоп) требуется комплексное взаимодействие нескольких технологий. Вот что необходимо знать:

1. Service Workers — основа доставки

Это фоновые скрипты, которые работают независимо от основной веб-страницы и обрабатывают push-события даже когда сайт закрыт. Они действуют как прокси между браузером и сервером.

// Регистрация Service Worker в основном скрипте
if ('serviceWorker' in navigator && 'PushManager' in window) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Service Worker зарегистрирован');
      return registration.pushManager.getSubscription();
    });
}

2. Push API — управление подписками

Интерфейс для подписки пользователя на push-уведомления и управления этой подпиской.

// Запрос разрешения и создание подписки
async function subscribeToPush() {
  const registration = await navigator.serviceWorker.ready;
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true, // Требование: уведомления должны быть видны
    applicationServerKey: urlBase64ToUint8Array(publicVapidKey)
  });
  
  // Отправляем объект subscription на backend для сохранения
  await fetch('/api/subscribe', {
    method: 'POST',
    body: JSON.stringify(subscription),
    headers: { 'Content-Type': 'application/json' }
  });
}

3. VAPID (Voluntary Application Server Identification) — идентификация сервера

Стандарт для безопасной идентификации сервера приложения при отправке push-сообщений. Требует пары ключей (публичный/приватный).

// Генерация VAPID ключей (на сервере или с помощью утилит)
// Пример для Node.js с библиотекой web-push
const webpush = require('web-push');
const vapidKeys = webpush.generateVAPIDKeys();
// Публичный ключ отправляется клиенту, приватный хранится на сервере

4. Backend-обработка — отправка уведомлений

Серверная часть, которая хранит подписки пользователей и отправляет push-сообщения через Web Push Protocol.

# Пример на Python (используя библиотеку pywebpush)
from pywebpush import webpush, WebPushException
import json

def send_push_notification(subscription_json, data):
    try:
        webpush(
            subscription_info=json.loads(subscription_json),
            data=json.dumps(data),
            vapid_private_key=PRIVATE_KEY,
            vapid_claims={"sub": "mailto:admin@example.com"}
        )
    except WebPushException as ex:
        print("Ошибка отправки:", ex)

5. Web App Manifest — настройка отображения

Файл manifest.json определяет, как приложение будет выглядеть на устройстве пользователя (иконки, название, тема).

{
  "name": "Мое Push-приложение",
  "short_name": "PushApp",
  "icons": [{
    "src": "/icon-192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#2196F3",
  "background_color": "#ffffff"
}

Ключевые шаги процесса:

1. Запрос разрешения — браузер показывает нативный диалог запроса разрешения
2. Создание подписки — клиентская часть создает уникальную подписку для устройства
3. Сохранение подписки — сервер сохраняет данные подписки для каждого пользователя
4. Отправка уведомления — сервер отправляет сообщение через push-сервис браузера
5. Обработка в Service Worker — Service Worker получает и отображает уведомление

Критические требования:

• HTTPS обязательно (кроме localhost) — push-уведомления работают только через безопасное соединение
• Поддержка браузера — проверка через if ('PushManager' in window)
• Пользовательское согласие — нельзя отправлять уведомления без явного разрешения
• Payload шифрование — данные уведомлений должны быть зашифрованы по стандарту ECIES

Практические ограничения:

• Размер payload обычно ограничен 4KB
• Браузер может ограничивать частоту уведомлений
• Push-сервисы разных браузеров могут иметь особенности (Firefox через Autopush, Chrome через FCM)

Реализация push-уведомлений требует внимания к безопасности, производительности и пользовательскому опыту. Необходимо предусмотреть:

• Отписку пользователей
• Обновление подписок (они могут устаревать)
• Логирование отправки для отладки
• A/B тестирование содержания уведомлений