Встановлення 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%.