Установка 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%.