Установка PWA: перехват beforeinstallprompt, кастомный баннер, аналитика

Представьте: сайт с 10 000 посетителей в день, но возвращается лишь каждый двадцатый. Add to Home Screen способен поднять возвраты до 30% — если обойти технические ловушки: невалидный манифест, игнорирование iOS, отсутствие аналитики. Мы с 10-летним опытом внедрения PWA реализовали более 50 таких проектов — от интернет-магазинов до SaaS. Конверсия установки достигает 40% при грамотном перехвате beforeinstallprompt и адаптации баннера под платформу.

Экономия бюджета по сравнению с нативным приложением достигает 70% — это тысячи долларов, которые можно направить на улучшение продукта. Разберём, как настроить кастомный промпт, обойти ограничения 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.

{"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 дня от начала до готового решения с аналитикой. Гарантируем стабильную работу на всех платформах и конфиденциальность ваших данных. Свяжитесь с нами, чтобы обсудить задачу. Закажите внедрение PWA сегодня и увеличьте возвраты на 30%.