Манифест веб-приложения

Манифест веб-приложения — это файл JSON, который сообщает браузеру, как установить страницу в качестве приложения: какое имя использовать, какой значок отображать, какой URL запускать, какую цветовую схему применять и в каком режиме отображать приложение (автономном, полноэкранном или в браузере).

Укажите манифест на каждой странице, которую можно установить: добавьте <link rel="manifest" href="/manifest.webmanifest"> в head. Браузер один раз загружает манифест и кэширует его; изменения манифеста будут учтены при последующих загрузках.

Чтобы браузер предложил «Установить приложение», манифест должен содержать как минимум: name (полное имя), short_name (подпись на главном экране, примерно 12 символов), start_url, display (обычно «standalone») и массив icons как минимум с изображениями PNG размером 192x192 и 512x512.

URL, который открывается при нажатии на значок установленного приложения. Часто это / для главной страницы; к URL можно добавить параметры запроса для аналитики: "start_url": "/?source=pwa" позволяет отдельно отмечать сеансы, запущенные из приложения, и сеансы в браузере.

display может задавать режим браузера (обычное оформление страницы), минимальный интерфейс (часть элементов браузера), автономный режим (без элементов браузера — выглядит как приложение) или полноэкранный режим (без строки состояния). Автономный режим обычно выбирают для PWA.

Добавьте значок с назначением «maskable», чтобы Android мог обрезать его под форму других значков на главном экране: { src: "/icon-mask.png", sizes: "192x192", purpose: "maskable" }. Маскируемые значки содержат безопасную зону, которую система может обрезать.

theme_color задаёт оттенок адресной строки, когда приложение работает в браузере. background_color отображается как цвет заставки до загрузки страницы. Для аккуратного запуска согласуйте эти цвета с основными цветами вашей дизайн-системы.

Значение «портретная ориентация» блокирует приложение в портретном режиме после установки. Альтернативы — «любая», «альбомная» и «основная портретная». Большинство универсальных PWA не задают это значение и позволяют устройству выбрать ориентацию.

Чтобы браузер показал пункт «Установить», страница должна передаваться по HTTPS, зарегистрировать сервис-воркер, обрабатывающий события fetch, подключить корректный манифест с минимально необходимыми полями и соответствовать критериям вовлечённости (пользователь должен взаимодействовать со страницей).

Браузеры кэшируют манифест. Чтобы принудительно обновить его после редактирования, измените URL значков (подойдёт параметр запроса для обхода кэша) или подождите — большинство браузеров периодически выполняет повторную проверку. API для принудительного обновления не существует; проектируйте приложение с учётом того, что некоторое время у пользователей может быть немного устаревший манифест.

На вкладке Application в Chrome DevTools отображаются разобранный манифест, вычисленные значения и ошибки проверки. Проверка PWA в Lighthouse анализирует каждое требование для установки и сообщает, чего не хватает. Во время разработки используйте оба инструмента, чтобы подтвердить возможность установки.

Что делает значение «автономный режим» свойства отображения в манифесте веб-приложения?

Манифест веб-приложения (manifest.webmanifest) сообщает браузеру, как установить страницу в качестве приложения: имя, short_name, start_url, display, theme_color и значки (192 и 512, а также маскируемый значок для Android). Подключите его через <link rel="manifest">, обеспечьте HTTPS и сервис-воркер для возможности установки, проверьте результат в Chrome DevTools и с помощью проверки PWA в Lighthouse.