Критерии PWA и роль HTTPS

Урок перечисляет критерии, которым должен соответствовать сайт, чтобы стать PWA, и объясняет, почему HTTPS обязателен.

Устанавливаемость (installability) — набор условий, при выполнении которых браузер считает сайт PWA и предлагает его установить.

Базовые критерии

Чтобы браузер признал сайт прогрессивным веб-приложением и предложил установку, нужно выполнить несколько условий:

HTTPS. Сайт отдаётся по защищённому соединению (исключение — localhost при разработке).
Веб-манифест. Подключён валидный manifest.json с обязательными полями: имя, иконки нужных размеров, start_url, режим отображения.
Service Worker. Зарегистрирован Service Worker (как минимум — для базовой устанавливаемости в современных браузерах достаточно его наличия; для офлайна — с обработчиком fetch).
Отзывчивость (responsive). Интерфейс адаптирован под мобильные экраны: настроен viewport, контент не «вылезает» за границы.

Эти критерии можно проверить автоматически — инструментом Lighthouse в DevTools (отдельный урок в конце курса).

Почему HTTPS обязателен

Service Worker — это скрипт, который может перехватывать все сетевые запросы вашего сайта и подменять ответы. Представьте, что злоумышленник в открытой Wi-Fi-сети внедрил свой Service Worker на ваш сайт — он мог бы перехватывать данные пользователей и отдавать поддельный контент. Поэтому браузеры разрешают регистрацию Service Worker и push-уведомления только по HTTPS, где соединение зашифровано и подлинность сервера подтверждена.

http://site.ru   --> Service Worker ЗАПРЕЩЁН
https://site.ru  --> Service Worker РАЗРЕШЁН
localhost        --> разрешён без HTTPS (для разработки)

Метатег viewport — про отзывчивость

Чтобы сайт корректно отображался на телефоне, в <head> нужен метатег viewport. Без него мобильный браузер покажет «десктопную» ширину, и интерфейс будет крошечным.

<meta name="viewport" content="width=device-width, initial-scale=1">

Как работает под капотом проверка устанавливаемости

Браузер при загрузке страницы собирает «галочки»: есть ли HTTPS, подключён ли манифест, валиден ли он, зарегистрирован ли Service Worker, есть ли иконка нужного размера. Когда все галочки на месте, срабатывает событие beforeinstallprompt (в Chromium-браузерах), и появляется возможность показать кнопку установки. Если хоть одно условие нарушено — событие не сработает, и пользователь установить приложение не сможет.

Частые ошибки

Тестировать по HTTP. Service Worker не зарегистрируется — и ничего не заработает. Используйте localhost локально и HTTPS на проде.
Забыть метатег viewport. Lighthouse снизит балл за отзывчивость, и сайт будет плохо выглядеть на мобильных.
Иконки неправильного размера. Браузеру нужны иконки определённых размеров (обычно 192×192 и 512×512), иначе установка не предложится.

Итоги

Критерии PWA: HTTPS, валидный манифест, Service Worker, отзывчивость.
HTTPS обязателен, потому что Service Worker перехватывает все запросы — это вопрос безопасности.
Исключение для разработки — localhost работает без HTTPS.
Метатег viewport нужен для корректного отображения на мобильных.