PWA — это веб-приложение с установленной браузером связью между сайтом и устройством. Но три результата здесь разные: страницу можно добавить на экран, выбранные файлы доступны без сети, а свежая версия появляется после обновления. Один manifest сам по себе не обеспечивает последние два пункта.
Возьмём учебный чек-лист для похода: пользователь открывает список вещей, отмечает собранное и хочет видеть его в самолёте без интернета. Разделим обещание на две части: офлайн открывается оболочка и сохранённый список; синхронизация между устройствами пока не входит в прототип. Так offline не превращается в неопределённое «работает без сети».
Три слоя PWA на одном примере
Manifest описывает представление. В manifest.webmanifest задаются имя, короткое имя, стартовый адрес, режим отображения и иконки. HTML каждой страницы подключает файл через <link rel="manifest" href="/manifest.webmanifest">. На HTTPS проверь, что URL manifest отвечает с JSON, а пути к иконкам не ведут в 404. В документации MDN о manifest описаны эти свойства; сам файл не делает данные офлайн-доступными.
Service worker управляет запросами. Это отдельный worker, который регистрируется страницей и может перехватывать её сетевые запросы. Для списка вещей имеет смысл заранее сохранить неизменяемую оболочку: HTML, CSS, JS и иконки. MDN по Service Worker API разбирает install, activate, fetch и обновление worker. Обработка должна иметь ограниченный scope: не перехватывай запросы всего сайта, если PWA живёт в /checklist/.
Cache Storage — это не серверная база. Сначала реши, что именно разрешено держать локально. Статика подходит для precache; изменяемый список может сохраняться в IndexedDB, но тогда нужно отдельно решить синхронизацию и конфликты. Для простого чтения справочной страницы можно выбрать cache-first; для обновляемого списка — network-first с понятным локальным fallback. Гайд MDN по кэшированию предупреждает о компромиссе свежести и доступности и отмечает, что POST-запросы обычно не подходят для кэша. Не превращай пользовательские или приватные ответы API в общий кеш.
Версии без «залипшего» интерфейса
Назови кеши по версии, например checklist-static-v3. При установке новой версии добавь обновлённые статические ресурсы в новый кеш. При активации удали только старые кеши этого приложения. Новый worker может ждать, пока открытые вкладки используют старый; сразу перехватывать контроль допустимо лишь если интерфейс умеет пережить смену ресурсов посреди сессии. Покажи пользователю «Доступно обновление» и перезагрузи страницу после явного согласия — либо опиши, почему автоматическая смена безопасна. MDN объясняет жизненный цикл и обновления в руководстве по service worker.
Установка зависит от браузера и устройства
Не рисуй универсальную кнопку «Установить». Согласно текущей таблице installability MDN, Chromium на desktop поддерживает install prompt при выполнении критериев; Safari на macOS Sonoma и новее предлагает Add to Dock; Firefox desktop не устанавливает PWA через manifest. На Android формат установки зависит от браузера и наличия Google Mobile Services. На iOS 16.4 и новее добавление возможно из меню Share в Safari, Chrome, Edge, Firefox и Orion; это не делает их интерфейсы установки одинаковыми. Проверяй браузеры и версии аудитории перед тем, как обещать установку.
| Проверка | Что сделать | Что считать наблюдаемым результатом |
|---|---|---|
| Обычная загрузка | Открыть URL напрямую и пройти список | Страница и отметки работают онлайн |
| Manifest | Открыть файл и проверить пути ресурсов | Валидный JSON, нужные значения, иконки доступны |
| Первый offline | Загрузить приложение онлайн, затем отключить сеть | Оболочка открывается; заранее оговорённый список доступен |
| Неизвестный адрес | Перейти по несуществующему пути офлайн | Понятная fallback-страница, а не бесконечная загрузка |
| Новая версия | Опубликовать изменённый worker, оставить старую вкладку открытой | Старый UI не получает несовместимые файлы; после обновления видна новая версия |
| Установка | Выполнить браузерный путь отдельно на каждом целевом устройстве | Записать браузер, ОС, шаги и результат; отсутствие prompt не считать ошибкой приложения без проверки требований |
Эта таблица — план проверки, а не результат запущенного теста. Для проверки обновлений нужны фактически развёрнутые две версии; пока они не собраны, не заявляй, что сценарий проверен.
Рабочий запрос к генератору
Спроектируй PWA-чек-лист похода только для чтения и отметок на одном устройстве. Сначала предложи структуру файлов: HTML, CSS, JS, manifest и service worker. В manifest укажи имя, стартовый маршрут и режим, перечисли недостающие реальные файлы иконок вместо выдуманных путей. В service worker предложи версионируемый кеш только для app shell, offline fallback и очистку кешей приложения. Не кэшируй запросы авторизации и API. Составь отдельные проверки сети/обновления; не утверждай совместимость браузеров без таблицы целевых устройств. Код не публикуй, пока я не просмотрю план.
Затем проси изменения по одному слою и сверяй ответы с конкретными требованиями. Если список должен синхронизироваться между устройствами, это уже отдельная задача с backend, идентификацией пользователя и конфликтами; локальный кеш не решает её. Для более крупного сценария сравни PWA с мобильным прототипом и загрузкой файлов, где офлайн-кеш имеет другие риски.