Push-сповіщення

Надсилайте Web Push-сповіщення своїм користувачам і дозвольте AI підключити все необхідне.

Заувага

Реальна доставка push-сповіщень у браузері доступна, коли у вашому середовищі Proyecta Cloud увімкнено адаптер доставки web-push (PUSH_DELIVERY_ADAPTER=web-push). Коли він увімкнений, видається дійсна пара ключів P-256 VAPID, а сповіщення доставляються до підписаних браузерів. Коли він вимкнений, цикл запит-відповідь усе одно працює — підписки зберігаються, а надсилання виконується успішно, — але ключ 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-підписку, зберігає secret і прив’язує анонімну підписку до користувача після входу. Нічого з цього робити вручну не потрібно:

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." />;

Запитайте AI: "Add a 'Notify me' button to the header that opts the visitor into push."

Анонімні відвідувачі підтримуються — хук підписує їх зі згенерованим ID і автоматично заново прив’язує цю підписку до їхнього акаунта після входу, тож надіслане пізніше сповіщення дійде до них у будь-якому разі.

Надсилання сповіщення

Надсилання — це дія власника, а не публічних сторінок вашого застосунку: браузер відвідувача ніколи не повинен мати змоги надіслати push усій вашій аудиторії. У повсякденній роботі ви надсилаєте сповіщення з розділу Push панелі адміністратора: пишете заголовок і текст, обираєте тему або розсилку всім і спершу надсилаєте тестове сповіщення на власний пристрій.

Ви можете адресувати сповіщення всім або лише відвідувачам, підписаним на конкретну тему. Сповіщення має заголовок, текст і, за бажанням, іконку та зображення.

Після надсилання ви отримуєте кількість пристроїв, на які воно пішло, і кількість невдалих спроб. Одне застереження: ці числа відображають реальну доставку до браузерів лише тоді, коли адаптер доставки web-push увімкнений. Якщо він вимкнений, число показує кількість збережених підписок, на які було спрямовано запит, а не фактичну доставку, — тож не сприймайте його як підтвердження доставки.

Теми

Відвідувачі можуть підписуватися на іменовані теми (наприклад, product-updates, weekly-digest) замість єдиного списку «все або нічого». Це рекомендований спосіб управління підписками — вам не потрібно самостійно відстежувати visitor ID для масових розсилок. Теми з’являються як селектор аудиторії в розділі Push панелі адміністратора.

Відписка

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

const { subscribed, unsubscribe } = usePush();

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

Дозвольте AI підключити все необхідне

Вам не потрібно писати нічого з цього вручну. Запитайте AI:

• "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 — відкриття конкретного екрана в застосунку при натисканні на сповіщення