PWA гайд

Установка PWA: Chrome vs Safari / iOS

Что делает сайт устанавливаемым, как работает prompt в Chrome и что реально умеет iOS Safari.

1. Чеклист установки

Требование	Зачем
HTTPS	Нужен для SW и установки
Web App Manifest	name/short_name, icons, start_url, display
Service Worker с fetch	Нужен для installability в Chrome
Иконки (192 + 512)	UI установки и домашний экран
start_url внутри scope	Сломанный scope = сломанная установка

2. Chrome / Android

Chrome может показать install prompt. Событие можно перехватить и показать свою кнопку:

let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  document.getElementById('install-btn').hidden = false;
});

async function installApp() {
  if (!deferredPrompt) return;
  deferredPrompt.prompt();
  await deferredPrompt.userChoice;
  deferredPrompt = null;
}

Не вызывайте prompt() без действия пользователя.

3. Safari / iOS

Нет beforeinstallprompt.
Установка через Поделиться - На экран «Домой».
Добавьте apple-touch-icon и нужные meta.
В манифесте лучше display: standalone.
Возможности iOS растут, но многие PWA API всё ещё слабее Chromium.

<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="MyApp">

4. Быстрое сравнение

	Chrome	Safari iOS
Своя кнопка установки	Да (`beforeinstallprompt`)	Нет
Ручная установка	Меню / prompt	Share sheet
Иконки из manifest	Основной источник	Нужен ещё apple-touch-icon
Standalone-окно	Да	Да (с ограничениями)

5. Отладка

Chrome: Application - Manifest / Service Workers.
Нет установки - проверьте HTTPS, icons, SW fetch, start_url.
На iOS тестируйте на реальном устройстве.