Frontend Academy · Урок

Push-уведомления

Запросите разрешение, подпишитесь на push через Push API, принимайте сообщения в сервис-воркере и показывайте уведомления с помощью showNotification

Урок 4 из 415 шагов

«Push-уведомления» — бесплатный урок Frontend Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Зачем нужны push-уведомления?

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

Push API и Notifications API

Два браузерных API работают вместе. Push API получает сообщения от сервера через push-подписку. Notifications API показывает сообщение пользователю.

Запрос разрешения

Запрашивайте у пользователя разрешение перед подпиской — делайте это только в ответ на явное действие пользователя (нажатие кнопки), а не при загрузке страницы.

async function enableNotifications() {
  const permission = await Notification.requestPermission();
  if (permission !== 'granted') {
    alert('Notifications denied');
    return;
  }
  // proceed to subscribe...
}

Push-подписка

Подпишитесь через активную регистрацию сервис-воркера. Открытый ключ VAPID сервера аутентифицирует подписку.

async function subscribeToPush() {
  const reg = await navigator.serviceWorker.ready;
  const sub = await reg.pushManager.subscribe({
    userVisibleOnly: true, // required: every push must show a notification
    applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
  });
  // Send sub to your server:
  await fetch('/api/save-subscription', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(sub)
  });
}

Ключи VAPID

Ключи VAPID (Voluntary Application Server Identification — идентификация сервера приложения по инициативе владельца) идентифицируют Ваш сервер в службах push-уведомлений (FCM, Mozilla и других). Создайте их один раз и храните закрытый ключ на сервере.

# Generate VAPID keys with web-push CLI:
npx web-push generate-vapid-keys

# Output:
# Public Key: BJ...
# Private Key: ka...

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

Используйте библиотеку npm web-push, чтобы отправить push-уведомление по сохранённой подписке.

import webpush from 'web-push';

webpush.setVapidDetails(
  'mailto:you@example.com',
  process.env.VAPID_PUBLIC,
  process.env.VAPID_PRIVATE
);

await webpush.sendNotification(savedSubscription, JSON.stringify({
  title: 'New message',
  body: 'Alice sent you a message',
  url: '/inbox/123'
}));

Обработка push-уведомлений в сервис-воркере

Сервис-воркер получает событие push и показывает уведомление.

// sw.js
self.addEventListener('push', (event) => {
  const data = event.data ? event.data.json() : {};
  event.waitUntil(
    self.registration.showNotification(data.title || 'Notification', {
      body: data.body,
      icon: '/icons/192.png',
      badge: '/icons/badge.png',
      data: { url: data.url }
    })
  );
});

Обработчик нажатия на уведомление

Открывайте приложение или переводите его окно в фокус, когда пользователь нажимает на уведомление.

self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  const url = event.notification.data.url || '/';
  event.waitUntil(
    clients.matchAll({ type: 'window' }).then(clientList => {
      for (const client of clientList) {
        if (client.url.endsWith(url) && 'focus' in client) return client.focus();
      }
      return clients.openWindow(url);
    })
  );
});

Параметры уведомлений

Настройте: значок, badge (маленький значок в области уведомлений), image (большое изображение), actions (кнопки), tag (замена старых уведомлений с тем же тегом), requireInteraction (уведомление остаётся, пока его не закроют), silent.

self.registration.showNotification('Message', {
  body: 'Alice sent you a photo',
  icon: '/icons/192.png',
  image: '/images/alice-photo.jpg',
  actions: [
    { action: 'view', title: 'View' },
    { action: 'reply', title: 'Reply' }
  ],
  tag: 'message-from-alice', // replaces earlier 'message-from-alice'
  requireInteraction: false
});

Отмена подписки

Позволяйте пользователям отказаться от получения уведомлений — вызовите pushSubscription.unsubscribe() и удалите подписку с сервера.

async function disablePush() {
  const reg = await navigator.serviceWorker.ready;
  const sub = await reg.pushManager.getSubscription();
  if (sub) {
    await sub.unsubscribe();
    await fetch('/api/delete-subscription', {
      method: 'POST',
      body: JSON.stringify({ endpoint: sub.endpoint })
    });
  }
}

Поддержка iOS

iOS 16.4 и более поздние версии поддерживают Web Push, но только для PWA, установленных на главный экран. Устройства с версиями до iOS 16.4 и Safari на iPhone не поддерживают web push вообще.

Распространённые ошибки

Push-уведомления завершаются без видимой ошибки, если: userVisibleOnly имеет значение false (Chrome требует true), ключи VAPID не совпадают, срок действия подписки истёк (подпишитесь снова) или при событии push не показано уведомление (браузер отзывает разрешение).

Быстрая проверка

Почему каждое push-сообщение должно приводить к показу уведомления (с параметром userVisibleOnly: true)?

Ответь в интерактивном уроке

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

Запрашивайте разрешение только в ответ на действие пользователя. Подписывайтесь через reg.pushManager.subscribe с открытым ключом VAPID. Сервер использует библиотеку web-push для отправки. Обработчик push сервис-воркера вызывает showNotification. notificationclick открывает приложение или переводит его окно в фокус. Настраивайте значок, badge, image, actions и tag. Всегда показывайте уведомление (требуется userVisibleOnly: true). iOS 16.4 и более поздние версии поддерживают эту возможность только для установленных PWA.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 41
Уроки: 163

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Push-уведомления» бесплатный?

Да — полный текст урока «Push-уведомления» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Push-уведомления»?

Запросите разрешение, подпишитесь на push через Push API, принимайте сообщения в сервис-воркере и показывайте уведомления с помощью showNotification Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

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

Сколько времени занимает урок «Push-уведомления»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Frontend Academy