Главная Мануалы Progressive Web Apps (PWA) — мануал для начинающих Установка и распространение

Установка и распространение

На сайте у вас уже есть валидный манифест и работающий service worker. Браузер автоматически предлагает установку — маленькой иконкой в адресной строке. Это работает, но на практике большинство пользователей этого предложения не замечают. Чтобы повысить процент установок, обычно делают свою кнопку с осмысленным текстом. Как именно — разберём в этой главе. Заодно посмотрим, как пользователь устанавливает PWA на разных платформах и как опубликовать приложение в магазинах.

Событие beforeinstallprompt

В Chrome и Edge (а также во всех Chromium-браузерах) есть специальное событие beforeinstallprompt. Браузер бросает его на странице, когда сам решил, что сайт пригоден для установки: есть HTTPS, манифест с минимальными полями, есть зарегистрированный service worker. Перехватив это событие, можно отложить системный диалог и показать пользователю свою кнопку:

let deferredPrompt;

window.addEventListener("beforeinstallprompt", (event) => {
  event.preventDefault();
  deferredPrompt = event;
  document.querySelector("#install-btn").hidden = false;
});

document.querySelector("#install-btn").addEventListener("click", async () => {
  if (!deferredPrompt) return;
  deferredPrompt.prompt();
  const { outcome } = await deferredPrompt.userChoice;
  console.log("Решение пользователя:", outcome); // "accepted" или "dismissed"
  deferredPrompt = null;
  document.querySelector("#install-btn").hidden = true;
});

Кнопка появляется только если браузер сам решил, что сайт можно установить. Если условия не выполнены — событие не выстрелит, и кнопка останется скрытой. Это удобно: один и тот же код безопасно работает и в браузерах, которые не поддерживают beforeinstallprompt (например, Safari).

После успешной установки браузер бросит ещё одно событие — appinstalled. Удобно использовать для аналитики:

window.addEventListener("appinstalled", () => {
  console.log("PWA установлено");
  // Отправить событие в аналитику
});

Установка на Android

На Android процесс выглядит так:

Пользователь заходит на сайт через Chrome.
Если manifest и service worker валидны, через несколько секунд в нижней части экрана появляется банер с предложением установить.
Альтернативно — меню Chrome (три точки) → пункт «Добавить на главный экран».
Иконка появляется на главном экране. Внутри Android PWA запускается через WebAPK — настоящий APK-пакет, который Chrome автоматически генерирует и устанавливает.

Из-за WebAPK PWA на Android неотличимо от нативного приложения в списке установленных. Оно отображается в системном меню «Приложения», может быть назначено обработчиком ссылок, переживает обновления Chrome.

Установка на iOS

На iPhone и iPad процесс другой и менее очевидный для пользователя:

Открыть сайт в Safari (только в нём, в Chrome для iOS установить PWA нельзя — он использует движок Safari, но не предоставляет UI установки).
Нажать кнопку «Поделиться» внизу.
В появившемся меню — пункт «На экран «Домой»».
Подтвердить — иконка появится на рабочем столе.

Никакого автоматического банера или предложения от Safari нет. Поэтому в PWA для iPhone-аудитории обычно делают видимую подсказку, объясняющую, как установить:

// Простая проверка: iOS и при этом не запущено как PWA
const isIos = /iPhone|iPad|iPod/.test(navigator.userAgent);
const isStandalone = window.matchMedia("(display-mode: standalone)").matches;

if (isIos && !isStandalone) {
  showIosInstallHint();
}

display-mode: standalone — CSS-медиа-запрос, по которому можно отличить запуск в обычной вкладке Safari от запуска уже установленного PWA.

Установка на десктопе

В Chrome и Edge на macOS, Windows и Linux установка работает почти как на Android — иконка установки появляется в правой части адресной строки. PWA после установки открывается в собственном окне без табов и адресной строки, появляется в меню «Приложения» ОС, может быть назначено обработчиком определённых URL.

В Safari на macOS установка PWA появилась с macOS Sonoma (14-я версия): кнопка «Add to Dock» в меню File. До этого PWA на macOS можно было только использовать в обычной вкладке.

Публикация в магазинах приложений

Хотя PWA не требует попадания в магазины, иногда оно туда нужно — для маркетинга, для пользователей, которые не знают про «Добавить на главный экран», или просто чтобы быть найденным в поиске Google Play.

Google Play через TWA

TWA (Trusted Web Activities) — механизм, который позволяет упаковать PWA как Android-приложение. Внутри APK сидит Chrome Custom Tab, который открывает ваш сайт в полноэкранном режиме. Для пользователя — неотличимо от нативного приложения.

Чтобы собрать TWA вручную, нужен Android Studio. Но проще через PWABuilder — это сайт pwabuilder.com, в который скармливают URL вашего PWA. Сервис проверяет манифест и service worker, потом выдаёт готовый APK для Google Play, MSIX для Microsoft Store и iOS-обёртку.

Сложность одна — Digital Asset Links. Чтобы Android доверял связке APK + домен, нужно положить на ваш сайт файл /.well-known/assetlinks.json с отпечатком подписи APK. Без этого пользователь увидит адресную строку браузера сверху, как в обычном Custom Tab. PWABuilder это объясняет в инструкции.

Microsoft Store

В Microsoft Store попадание самое простое: PWABuilder упаковывает PWA в MSIX, который принимается магазином почти автоматически. Microsoft активно продвигает PWA как первоклассный способ распространения приложений на Windows.

App Store

В Apple App Store PWA напрямую опубликовать нельзя. Apple не пускает приложения, которые не содержат собственного нативного кода. Через PWABuilder можно сгенерировать обёртку с WKWebView, но это уже не «чистая» PWA, и Apple такие приложения часто отклоняет по правилу «всего лишь обёртка вокруг сайта».

Практический подход для iOS — не публиковаться в App Store, а делать удобную инструкцию по установке на главный экран. PWA на iOS работает (с ограничениями), просто способ установки нестандартный.

Предыдущая Следующая