Web Push test (PWA)

Мінімальний тестовий сайт для перевірки push-повідомлень без мобільного застосунку (через Web Push).

Що всередині

• server.js: Node.js сервер (Express) + надсилання Web Push (web-push)
• public/: сторінка підписки, service worker, PWA manifest
• data/: локальні дані (створюється автоматично)
  • vapid.json: VAPID ключі
  • subscriptions.json: збережені підписки браузерів

Запуск локально

1. Встановити залежності:

cd webpush-test
npm install

2. Запустити сервер:

npm start

Відкрийте в браузері на ПК: http://localhost:3000

Тест на телефонах (ВАЖЛИВО: потрібен HTTPS)

Для реального тесту на Android/iPhone сайт має відкриватися по HTTPS (інакше push не запрацює).

Найпростіший спосіб — підняти HTTPS-тунель на localhost:3000:

Варіант A: Cloudflare Tunnel (рекомендую)

1. Встановіть cloudflared (Windows).
2. Запустіть:

cloudflared tunnel --url http://localhost:3000

3. cloudflared дасть HTTPS URL виду https://xxxx.trycloudflare.com — відкрийте його на телефоні.

Варіант B: ngrok

1. Встановіть ngrok.
2. Запустіть:

ngrok http 3000

3. Відкрийте виданий https://... адрес на телефоні.

Як тестувати

1. Відкрийте HTTPS URL на телефоні.
2. Натисніть «Дозволити повідомлення».
3. Після підписки натисніть «Надіслати тестовий push» — повідомлення має прийти на цей телефон.

Нюанси iPhone (iOS)

• Push у Safari зазвичай працює лише якщо сайт додано на головний екран:
  • Safari → Поділитися → «На початковий екран» → відкрити вже встановлену іконку → повторити «Дозволити повідомлення».