PWA: манифест и устанавливаемые веб-приложения – основы

Коротко: Прогрессивное веб-приложение — сайт, который можно установить как приложение: с манифестом, service worker и HTTPS он получает значок, полноэкранный режим, работу офлайн и фоновые службы.

Подробнее: PWA объединяют веб и приложение: одна кодовая база, магазин приложений не нужен, обновления мгновенно. Их можно установить (главный экран/рабочий стол), они отчасти работают офлайн и могут отправлять уведомления.

Подробности

Три составляющие

1. HTTPS (кроме localhost).
2. Манифест веб-приложения (manifest.webmanifest): имя, значки, цвета, начальный URL, режим отображения:

{
  "name": "Emzett", "short_name": "Emzett"
  "start_url": "/", "display": "standalone"
  "background_color": "#0b0b10", "theme_color": "#0b0b10"
  "icons": [{"src":"/icon-192.png","sizes":"192x192","type":"image/png"}
            {"src":"/icon-512.png","sizes":"512x512","type":"image/png","purpose":"maskable"}]
}

В HTML: <link rel="manifest" href="/manifest.webmanifest">. 3. Service worker: фоновый скрипт, способный перехватывать запросы, кэшировать и отдавать офлайн-страницы.

Service worker и кэширование

Типичные стратегии: cache first (статические файлы), network first (актуальные данные, запасной вариант из кэша), stale-while-revalidate (сразу старое, в фоне заново). Важно: версионируйте кэши, удаляйте старые кэши, уведомление об обновлении («Доступна новая версия»), не кэшируйте чувствительные данные, не повторяйте вслепую запросы POST. Инструменты: Workbox, плагины фреймворков. Отлаживайте в инструментах разработчика браузера в разделе Application.

Возможности и ограничения

Возможно: установка, использование офлайн, push-уведомления (на iOS из установленного PWA), фоновая синхронизация, камера, местоположение, доступ к файловой системе, функция «Поделиться». Ограничения: ограничения на iOS (лимит хранилища, меньше API), нет полного доступа к функциям устройства, как у нативных приложений, обнаруживаемость без магазина. Конфиденциальность: push и фоновая синхронизация требуют согласия.

Проверка и практика

Тестируйте с Lighthouse (критерии PWA), chrome://inspect, «Добавить на главный экран». Предусмотрите офлайн-страницу-запас, maskable-значки, theme_color, скриншоты в манифесте для диалога установки. Проверяйте обновления: обновления service worker вступают в силу только после закрытия всех вкладок, если не задан skipWaiting. Прочитайте также про offline-first и фоновую синхронизацию.

См. также: Offline-first и фоновая синхронизация, Service worker, Веб-хранилище, Lighthouse