Как из обычного приложения сделать PWA

Что проверяют

Знаете ли вы минимальный набор, который превращает сайт в устанавливаемое приложение, и понимаете ли, что основная работа в стратегии кэширования, а не в манифесте. Следом почти всегда спрашивают, как обновить service worker у пользователей, у которых закэширована старая версия.

Как отвечать

Базовые требования:

• HTTPS: service worker регистрируется только на защищённом origin, исключение localhost;
• манифест: manifest.webmanifest с name, short_name, start_url, display: standalone, theme_color и иконками 192 и 512 пикселей, желательно ещё maskable-иконка. Подключается через <link rel="manifest">;
• service worker: регистрация через navigator.serviceWorker.register(), внутри события install, activate и fetch.

Стратегии кэширования подбираются под тип ресурса:

• cache first: статика с хэшем в имени файла;
• network first: HTML и API, с откатом на кэш без сети;
• stale-while-revalidate: отдать из кэша и обновить в фоне.

Руками всё это писать не обязательно: Workbox генерирует список предзагрузки при сборке, для Vite есть vite-plugin-pwa. В Next.js манифест описывается файлом app/manifest.ts, а service worker пишется самостоятельно или через плагин.

Обновление: новый worker ждёт в состоянии waiting, пока закроются все вкладки со старым. Правильнее показать «Доступна новая версия», а по согласию пользователя вызвать skipWaiting() и перезагрузить страницу, чтобы не подменять ресурсы посреди работы.

Проверка: вкладка Application в Chrome DevTools, режим Offline, аудит Lighthouse. В свежих версиях Lighthouse отдельную категорию PWA убрали, установку проверяют в DevTools.

Про iOS: установка только через «На экран Домой», веб-пуши работают с iOS 16.4 и только у установленного приложения.

Где спотыкаются

Кэшируют index.html по стратегии cache first. Пользователь застревает на старой сборке, пока не очистит данные сайта.

Путают PWA с адаптивной вёрсткой. Адаптивность нужна, но офлайн и установку она не даёт.

Не версионируют кэш и не удаляют старые кэши в activate, хранилище копит устаревшие файлы.