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

Отправляйте Web Push-уведомления своим пользователям, а ИИ сделает всё остальное.

Заметка

Реальная доставка push-уведомлений в браузер доступна, когда в окружении Proyecta Cloud включён адаптер доставки web-push (PUSH_DELIVERY_ADAPTER=web-push). При включённом адаптере выпускается действительная пара ключей VAPID (P-256), а уведомления доставляются в подписанные браузеры. Если адаптер выключен, все запросы по-прежнему выполняются — подписки сохраняются, отправка завершается успешно, — однако VAPID-ключ является заглушкой, поэтому реальной доставки не происходит, а сообщения записываются в лог. Если push-уведомления не приходят, начни проверку именно с этого адаптера.

Каждое приложение Proyecta может отправлять push-уведомления в браузер и PWA своим пользователям. Proyecta берёт на себя генерацию VAPID-ключей, хранение подписок, управление топиками и доставку — без сторонних аккаунтов.

Как это работает

Push-уведомления в Proyecta следуют стандартному жизненному циклу Web Push, состоящему из четырёх шагов:

1. Enable — VAPID-ключи генерируются для приложения при первой необходимости
2. Subscribe — регистрация устройства посетителя для получения уведомлений
3. Identify — привязка анонимной подписки к авторизованному пользователю
4. Send — доставка уведомления конкретным пользователям, топикам или всем сразу

Первые три шага выполняет за тебя хук usePush(), четвёртый ты делаешь из админ-панели.

Подписка устройства пользователя

В приложении уже есть хук usePush(), который берёт на себя весь браузерный сценарий: получение VAPID-ключа, регистрацию service worker, создание Web Push-подписки, хранение секрета и привязку анонимной подписки к пользователю после его входа. Ничего из этого делать вручную не нужно:

import { usePush } from '@/hooks/usePush.ts';

function NotifyMeButton() {
    const { supported, subscribed, subscribe, unsubscribe, isPending } = usePush();

    // `supported: false` means this browser cannot do push at all — hide the CTA.
    if (!supported) return null;

    return (
        <button onClick={subscribed ? unsubscribe : subscribe} disabled={isPending}>
            {subscribed ? 'Turn off notifications' : 'Notify me'}
        </button>
    );
}

Есть и готовый блок, если нужен только запрос на подписку:

import { PushOptInButton } from '@/components/blocks/PushOptInButton.tsx';

<PushOptInButton description="Get told the moment a new drop lands." />;

Спроси ИИ: "Add a 'Notify me' button to the header that opts the visitor into push."

Анонимные посетители поддерживаются: хук подписывает их со сгенерированным идентификатором и автоматически перепривязывает эту подписку к аккаунту, когда посетитель входит в систему, — так что отправленное позже уведомление дойдёт до него в любом случае.

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

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

Адресовать уведомление можно всем или только тем, кто подписан на определённый топик. Уведомление содержит заголовок, текст и, при необходимости, иконку и изображение.

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

Топики

Посетители могут подписываться на именованные топики (например, product-updates, weekly-digest) вместо одного общего списка «всё или ничего». Это рекомендуемый способ управления подписками — тебе не нужно самостоятельно отслеживать visitor ID для рассылок. Топики отображаются как выбор аудитории в разделе Push админ-панели.

Отписка

Вызови unsubscribe из того же хука usePush() — он уже хранит секрет подписки, поэтому тебе ничего не нужно сохранять или передавать:

const { subscribed, unsubscribe } = usePush();

{
    subscribed && <button onClick={unsubscribe}>Turn off notifications</button>;
}

Позволь ИИ всё настроить

Тебе не нужно писать всё это вручную. Спроси ИИ:

• "Add a 'Notify me' button to the header that opts the visitor into push notifications."
• "Put a push opt-in prompt on the product page, but only show it to visitors who haven't already subscribed."
• "Add a topic called 'breaking-news' that visitors can opt into from the footer."

Ограничения

• В preview реальные push-уведомления не отправляются. Push-уведомления работают только в опубликованной версии приложения, поскольку браузеры требуют HTTPS на реальном домене.
• На iOS требуется PWA. На iOS 16.4+ Web Push работает только из установленного Progressive Web App (добавленного на главный экран), но не из Safari напрямую.
• Разрешение запрашивается один раз. Если пользователь отклонил разрешение на уведомления, браузеры не позволяют повторно запросить его программно. Придётся направить пользователя в настройки браузера или устройства.

Скоро

• Отправка по расписанию и по событиям — автоматическая отправка на основе событий в приложении или заданного расписания
• Deep linking — открытие конкретного экрана в приложении при нажатии на уведомление