Встановлення PWA: beforeinstallprompt, кастомний банер, аналітика

Ми — команда з 10+ років досвіду впровадження PWA, реалізували 50+ проєктів. Уявіть: сайт із 10 000 відвідувачів на день, але повертається лише кожен двадцятий. Add to Home Screen для встановлення PWA здатен підняти повернення до 30% — якщо обійти технічні пастки: невалідний маніфест, ігнорування iOS, відсутність аналітики. Налаштування встановлення PWA з кастомним банером та аналітикою вимагає уваги до beforeinstallprompt. Конверсія встановлення досягає 40% при грамотному перехопленні beforeinstallprompt та адаптації банера під платформу. PWA завантажується в 3 рази швидше за звичайний сайт, а конверсія встановлення в 2 рази вища за показ кліків на банер. Типова економія складає до $20,000 на розробці порівняно з нативним застосунком, а вартість впровадження починається від $1,500. Встановлення PWA в 2 рази ефективніше за звичайний банер. Розберемо, як налаштувати кастомний промпт, обійти обмеження Safari та вбудувати воронку встановлень у GA4.

Чому beforeinstallprompt — не єдиний спосіб?

Chrome та Edge генерують подію beforeinstallprompt лише після того, як переконаються, що PWA відповідає критеріям: HTTPS, Service Worker, маніфест та достатній час взаємодії. Подію можна перехопити та показати кастомний банер у зручний момент — наприклад, після оформлення замовлення або перегляду третьої сторінки. Типова конверсія такого промпту — 20–40% у мотивованої аудиторії.

let deferredPrompt = null;

window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  showInstallBanner();
});

async function triggerInstall() {
  if (!deferredPrompt) return;
  deferredPrompt.prompt();
  const { outcome } = await deferredPrompt.userChoice;
  gtag('event', 'pwa_install', {
    event_category: 'PWA',
    event_label: outcome,
  });
  deferredPrompt = null;
  hideInstallBanner();
}

window.addEventListener('appinstalled', () => {
  hideInstallBanner();
  deferredPrompt = null;
});

Як підвищити конверсію встановлення PWA на iOS?

На iOS немає жодного beforeinstallprompt. Safari принципово не підтримує автоматичне встановлення — лише ручне додавання через меню «Поділитися». Вихід — показувати кастомний банер з покроковою інструкцією, використовуючи точну іконку кнопки Share. Наша команда розробила шаблон такого банера, який підвищує конверсію встановлень на iOS до 15%.

function shouldShowIOSPrompt() {
  const isIOS = /iphone|ipad|ipod/i.test(navigator.userAgent);
  const isInStandaloneMode = window.navigator.standalone === true;
  const hasSeenPrompt = localStorage.getItem('ios-install-prompt-shown');
  return isIOS && !isInStandaloneMode && !hasSeenPrompt;
}

if (shouldShowIOSPrompt()) {
  showIOSInstructionBanner();
  localStorage.setItem('ios-install-prompt-shown', 'true');
}

Як визначити режим запуску?

function getDisplayMode() {
  if (window.matchMedia('(display-mode: standalone)').matches) return 'standalone';
  if (window.matchMedia('(display-mode: fullscreen)').matches) return 'fullscreen';
  if (window.navigator.standalone === true) return 'standalone-ios';
  return 'browser';
}

Що таке маніфест і як його налаштувати?

Без правильного маніфесту PWA не працює. Обов'язкові поля: name, short_name, start_url, display, icons. Радимо додавати purpose: "maskable" для іконок — це дозволить Android адаптувати їх під різні форми. У сучасних версіях Chrome корисні screenshots: вони роблять діалог встановлення переконливішим. Докладніше про формат маніфесту — на MDN.

Детальний приклад налаштування маніфесту:

1. Створіть файл manifest.json.
2. Додайте name та short_name (наприклад, «Мій PWA» та «PWA»).
3. Вкажіть start_url (наприклад, «/»).
4. Виберіть display: standalone або fullscreen.
5. Додайте icons розмірами 192x192 та 512x512 з type image/png.
6. Додайте screenshots для покращення діалогу встановлення.

{"name":"Назва","short_name":"Застосунок","start_url":"/?source=pwa","display":"standalone","icons":[{"src":"/icons/icon-192.png","sizes":"192x192","type":"image/png","purpose":"any maskable"},{"src":"/icons/icon-512.png","sizes":"512x512","type":"image/png","purpose":"any maskable"}],"screenshots":[{"src":"/screenshots/desktop.png","sizes":"1280x720","form_factor":"wide"},{"src":"/screenshots/mobile.png","sizes":"390x844","form_factor":"narrow"}]}

PWA vs нативний застосунок: що обрати?

PWA обходиться в 3–5 разів дешевше нативного застосунку при співставному UX. Розробка нативного застосунку коштує значно дорожче, а PWA не потребує модерації App Store та миттєво оновлюється. Однак PWA не має доступу до деяких системних API (наприклад, Bluetooth). Якщо ваша цільова аудиторія активна на iOS, обов'язково додавайте кастомний банер для ручного встановлення. Отримайте консультацію — ми безкоштовно оцінимо ваш проєкт і покажемо кейси впровадження.

Як відстежувати встановлення в GA4?

1. Встановіть GA4 на сайт (через gtag або GTM).
2. В обробнику beforeinstallprompt додайте подію pwa_prompt_shown.
3. При кліку на кнопку встановлення відправляйте pwa_install_click.
4. Після appinstalled відправляйте pwa_installed з метаданими.
5. Налаштуйте конверсії в GA4: ціль «Встановлення PWA» — подія pwa_installed.

Типова воронка: показ банера → клік → системний промпт → встановлення. Конверсія від кліку до встановлення — 50–70%.

Які типові проблеми виникають при впровадженні?

Якщо beforeinstallprompt не спрацьовує, причина найчастіше у відсутності HTTPS, Service Worker або маніфесту. На iOS немає автоматичного промпту — потрібен кастомний банер з інструкцією. Якщо не відстежуєте встановлення, додайте обробник appinstalled. Всі ці ситуації вирішуються за 2–3 дні стандартної роботи.

Що входить у нашу роботу

Терміни та гарантії

• Базова реалізація (маніфест + Service Worker + перехоплення події): 1 день
• Кастомний банер з аналітикою: +1 день
• Підтримка iOS (інструкція + визначення режиму): +0.5 дня
• Іконки maskable та адаптація дизайну: +0.5 дня

Разом 2–3 дні від початку до готового рішення з аналітикою. Гарантуємо стабільну роботу на всіх платформах та конфіденційність ваших даних. Компанія з 10+ річним досвідом впровадження PWA, 50+ проєктів. Зв'яжіться з нами, щоб обговорити задачу. Замовте впровадження PWA сьогодні та збільште повернення на 30%.

Коли додаток не відкривається без інтернету, користувач іде до конкурентів

PWA перетворює сайт на надійний додаток, який працює навіть в офлайні, надсилає push-повідомлення та встановлюється на головний екран. Розробка PWA додатків — це впровадження Service Worker, налаштування кеш-стратегій та інтеграція Web Push. На відміну від нативних додатків, вам не потрібні дві команди під iOS та Android — один код працює у всіх сучасних браузерах. Замовте аудит вашого проекту на PWA-сумісність — ми безкоштовно оцінимо потенціал та терміни.

Як Service Worker керує мережевими запитами?

Service Worker — це JavaScript-проксі між браузером та мережею. Працює в окремому потоці, перехоплює запити та вирішує, звідки їх віддавати: з кешу, з мережі або комбінацією. Розглянемо три базові стратегії на реальних сценаріях.

Cache First застосовується для активів з хешем в імені — файл ніколи не зміниться, можна кешувати назавжди. Stale While Revalidate оптимальна для контенту, де допустима невелика затримка актуалізації. Workbox від Google автоматизує версіонування кешу та інвалідацію — без нього коректний Service Worker вимагатиме 300+ рядків коду з нетривіальними edge cases. Vite + vite-plugin-pwa генерує Service Worker з конфігу, включаючи precaching статики.

import { VitePWA } from 'vite-plugin-pwa';
export default {
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.ico'],
      manifest: { /* name, icons, start_url, display */ },
      workbox: {
        globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
        runtimeCaching: [
          { urlPattern: /^https?:\/\/api\./,
            handler: 'NetworkFirst',
            options: { cacheName: 'api-cache' }
          }
        ]
      }
    })
  ]
};

Як офлайн-режим реалізується на практиці?

«Працює офлайн» для різних продуктів означає різне. Ось три типові сценарії.

• Офлайн-читання (новинні сайти, документація): Service Worker кешує сторінки при першому візиті, стратегія Stale While Revalidate + Background Sync для синхронізації після відновлення з'єднання.
• Офлайн-редагування (нотатки, завдання): IndexedDB зберігає локальні дані, Background Sync API ставить операції в чергу — браузер синхронізує сам, навіть якщо вкладка закрита. Обмеження: Background Sync підтримується тільки в Chromium.
• Офлайн-форма: користувач натиснув «Надіслати» без інтернету — дані не втрачаються, а ставляться в чергу та надсилаються автоматично. Для медичних та страхових форм це критично.

Проблема, про яку часто забувають: конфлікти при синхронізації. Якщо користувач А редагував запис офлайн, а користувач Б змінив його онлайн — потрібна стратегія вирішення (last-write-wins, three-way merge або показ конфлікту користувачеві). Ми опрацьовуємо ці сценарії на етапі проектування.

Як працюють Web Push-повідомлення?

Web Push доставляє повідомлення через браузер + Push Service (FCM для Chrome/Edge, APNs для Safari). Користувач надає дозвіл → браузер підписується на Push Service → ви отримуєте endpoint та ключі → надсилаєте повідомлення → Push Service доставляє в браузер. Реалізація через бібліотеку web-push (Node.js) або аналог для вашого бекенду. VAPID-ключі генеруються один раз, підписка зберігається в базі даних.

На поточний момент iOS (починаючи з версії 16.4) підтримує Web Push тільки для встановлених PWA, Chrome/Firefox/Edge — повна підтримка без встановлення. Частота та релевантність повідомлень безпосередньо впливають на відтік підписників — A/B тестування часу надсилання та формулювань стандартна практика.

Чому варто обрати PWA замість нативних додатків?

Економія на розробці під дві платформи — до 60% бюджету. Один код, єдина бізнес-логіка, автоматичне оновлення без магазинів. Ми виконали понад 30 PWA-проектів для e-commerce, фінтеху та корпоративних систем — гарантуємо сумісність з останніми версіями браузерів та відмінні показники Core Web Vitals (LCP, CLS, INP). PWA збільшує конверсію в середньому на 36% (дані Google). Сертифіковані спеціалісти з досвідом 7+ років у веб-розробці.

Що входить у розробку PWA під ключ?

App Shell архітектура та precaching критичних ресурсів при першому встановленні дають миттєве завантаження оболонки додатку навіть при повільному з'єднанні.

Процес роботи та терміни

1. Аудит поточного додатку (Lighthouse PWA score, аналіз сценаріїв).
2. Визначення цінних офлайн-сценаріїв.
3. Налаштування Service Worker через Workbox та реалізація маніфесту.
4. Інтеграція Web Push (якщо потрібно).
5. Тестування на реальних пристроях — Chrome DevTools, Safari Web Inspector.
6. Деплой, документація, навчання команди.

Орієнтовні терміни: базова PWA (маніфест + Service Worker + кеш статики) — 1–2 тижні поверх готового додатку; Web Push — 1–2 тижні; офлайн-редагування з IndexedDB та Background Sync — 3–6 тижнів залежно від складності даних.

Вартість розраховується індивідуально після аудиту. PWA-проект зазвичай обходиться в 2–3 рази дешевше нативного додатку під обидві платформи. Додаткову економію дає відсутність витрат на публікацію в App Store та Google Play. Зв'яжіться з нами для консультації — ми безкоштовно оцінимо ваш проект та запропонуємо оптимальну стратегію впровадження.

Посилання для поглибленого вивчення

• MDN Web Docs: Service Worker API
• W3C Push API Specification
• Wikipedia: Progressive Web Application
• Wikipedia: Service Worker