Як перетворити React-сайт на PWA: офлайн, push, install за 1 день

PWA = сайт + іконка на робочому столі + офлайн + push. Не треба нативного додатку, не треба модерації Apple. Конверсія встановленого PWA в 2-3× вища за звичайний сайт.

4 кроки до PWA

1. site.webmanifest

{{ "name": "VNV Agency", "short_name": "VNV", "start_url": "/", "display": "standalone", "background_color": "#000000", "theme_color": "#FF0000", "icons": [ {{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" }}, {{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }} ] }}

2. Service Worker з Workbox

Vite-plugin-pwa генерує SW автоматично. Кешує статику, API-відповіді, фолбек на офлайн-сторінку.

3. Кнопка «Встановити»

Ловимо beforeinstallprompt, показуємо банер після 2-го візиту. На iOS — інструкція «Поділитися → На початковий екран».

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

Web Push API + сервер з web-push lib. Відписки 50%+ — використовуйте тільки для важливого: статус замовлення, акція, нагадування.

Що дає PWA для бізнесу

• Іконка на екрані = 5-7 додаткових візитів на місяць
• Офлайн каталог для магазину = +15% переглядів
• Push з акцією = open rate 20-30% (vs email 2-5%)
• Lighthouse PWA-score 100 = бонус у Google

Перетворюємо ваш сайт на PWA за 1-3 дні від $200. Що таке PWA детально. Замовити → /services/web-development.