PWA — Progressive Web App

Веб-сайт, который работает как нативное приложение: установка на устройство, offline, push.

Что это

Не одна технология, а набор: manifest.json + Service Worker + HTTPS + ряд UX-практик. Браузер видит manifest и предлагает «установить» сайт. После установки иконка на рабочем столе, окно без браузерного chrome, offline через Service Worker.

Основные части

1. manifest.json

{
  "name": "Podcast Player",
  "short_name": "Podcast",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0f1117",
  "theme_color": "#f7df1e",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Подключение в <head>:

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#f7df1e">

2. Service Worker

См. Service Worker. Обеспечивает offline-режим через Cache API и proxy сети.

3. HTTPS

Без HTTPS (или localhost) ни SW, ни manifest не сработают.

Триггер «Install» (beforeinstallprompt)

let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  installButton.hidden = false;
});

installButton.addEventListener('click', async () => {
  deferredPrompt.prompt;
  const { outcome } = await deferredPrompt.userChoice;
  // 'accepted' | 'dismissed'
  deferredPrompt = null;
});

Критерии установки

Браузер предлагает установку если:

  • есть валидный manifest.json с name, start_url, icons (минимум 192 и 512)
  • зарегистрирован Service Worker с fetch-обработчиком
  • HTTPS
  • иконка ≥ 192×192

Местоположение приложения

После установки:

  • Chrome — добавляет ярлык на рабочий стол / в chrome://apps
  • iOS Safari — «Добавить на главный экран» (без beforeinstallprompt)
  • Android Chrome — нативное диалоговое окно установки

Подводные камни

  • iOS Safari не показывает install prompt — только через «Поделиться → На главный экран»
  • display: standalone убирает адресную строку — потеряешь дебаг URL
  • Кэш SW нужно версионировать, иначе после деплоя пользователь застрянет на старом
  • Lighthouse → вкладка PWA проверяет соответствие чек-листу

Local-first подход

PWA → можно строить local-first apps: данные хранятся в OPFS/IndexedDB, синхронизация через WebSocket/WebRTC, conflict resolution через CRDT. Концепт «вкладка — это UI, Service Worker — это business logic ядро».

Используется в bootcamp

  • Podcast Player мог бы стать PWA: установка, offline-проигрывание скачанных эпизодов

Ссылки

🎓 Источники

См. также