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

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

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

Как отвечать

Сначала коротко назовите, что превращает сайт в PWA:

• манифест: manifest.webmanifest или manifest.json, подключённый через <link rel="manifest">. В нём name, short_name, start_url, display: standalone, theme_color и иконки 192 и 512 пикселей;
• Service Worker: регистрируется через navigator.serviceWorker.register() и перехватывает запросы в событии fetch. От него зависят офлайн-режим, кеш и push-уведомления;
• HTTPS: без него воркер не зарегистрируется, исключение только localhost.

Дальше переходите к тому, что будете проверять:

• установка: есть ли предложение установить на Android и десктопе, верны ли иконка, название и цвет заставки. На iOS ставят только через «Поделиться» и «На экран Домой», события beforeinstallprompt там нет;
• офлайн: включить Offline на вкладке Network в DevTools и пройти ключевые сценарии. Должна открываться понятная офлайн-страница, а не ошибка браузера;
• кеш и обновление: на вкладке Application смотреть Service Workers и Cache Storage. Новый воркер по умолчанию ждёт в статусе waiting, пока не закроются все вкладки со старой версией, если в коде нет skipWaiting();
• push: запрос разрешения, переход по клику на уведомление. На iOS push работает только у приложения, добавленного на экран.

Отдельной категории PWA в свежих версиях Lighthouse больше нет, ошибки установки показывает раздел Manifest в DevTools.

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

Пересказывают разработку: манифест и код воркера, но не называют ни одного тест-кейса. На QA-собеседовании это главный промах.

Не знают жизненный цикл Service Worker и пропускают классический баг: после релиза пользователь видит старую версию, потому что её отдаёт кеш.

Проверяют только в Chrome на десктопе. Safari на iOS ведёт себя иначе: свой способ установки, свои ограничения на хранилище и push.