Генератор и валидатор манифеста PWA
Заполните форму и получите manifest.webmanifest вместе с тегами для head, или вставьте манифест, который уже отдаёт ваш сайт. Оба проходят один и тот же чеклист: критерии установки Chrome, правила, по которым он выбирает окно установки, и поля, которые стоит исправить.
Ваш манифест
Положите его в корень сайта как manifest.webmanifest — туда указывают теги ниже.
{
"name": "Aurora Play",
"short_name": "Aurora",
"description": "Ежедневные турниры, бонусы и аккаунт — в один тап с главного экрана.",
"lang": "ru",
"id": "/",
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#0b0d14",
"background_color": "#0b0d14",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-512-maskable.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}Теги для HTML head
Добавьте их на каждую страницу приложения. apple-touch-icon нужен для Safari на iOS; обычно это 180×180.
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#0b0d14">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">Чеклист
Соответствует всем 5 критериям установки Chrome, которые относятся к манифесту. Живой сайт ещё должен пройти то, что эта страница проверить не может.
Ошибки: 0 · Предупреждения: 0 · Пройдено: 12 · Заметки: 2
Критерии установки Chrome
Часть списка Chrome, которая относится к самому манифесту.
- Пройдено name или short_name Задано: name, short_name.
- Пройдено icons: 192px и 512px Объявлены иконки 192×192 и 512×512.
- Пройдено start_url Задано: /.
- Пройдено display standalone подходит для установки.
- Пройдено prefer_related_applications Не равно true.
Окно установки
Какое из двух окон установки Chrome получит этот манифест.
- Заметка Окно на Android Скриншотов нет, поэтому Android покажет компактное окно.
- Заметка Окно на десктопе Широких скриншотов нет, поэтому Chrome на десктопе покажет стандартное окно.
- Пройдено description Символов: 68. Заполняет строку текста в высоком шите.
Стоит исправить
Для установки не обязательно, но человек увидит результат.
- Пройдено Длина short_name Символов: 6 — помещается на большинстве главных экранов.
- Пройдено scope start_url / внутри scope /.
- Пройдено id Задано: /. Приложение сохранит идентичность, если start_url изменится.
- Пройдено Maskable-иконка Есть. Android сможет заполнить адаптивные формы иконки.
- Пройдено theme_color #0b0d14 — валидный цвет.
- Пройдено background_color #0b0d14 — валидный цвет.
Чеклист
Результаты появятся здесь после проверки.
Чего проверка манифеста не докажет
Чистый чеклист значит, что файл соответствует правилам Chrome. Он не доказывает, что приложение устанавливается: это зависит ещё и от живого сайта.
- HTTPS
- Chrome предлагает установку только на страницах, отданных по HTTPS.
- Файлы иконок
- Страница читает размеры, которые вы объявили. Она не может подтвердить, что файлы существуют и действительно имеют 192 и 512 пикселей; что Chrome реально загрузил, видно в DevTools → Application → Manifest.
- Тег и ответ сервера
- На каждой странице нужен тег <link rel="manifest">, а файл должен загрузиться и распарситься. Chrome запрашивает его без credentials, если в теге нет crossorigin="use-credentials".
- Service worker
- Текущие критерии установки Chrome его уже не содержат, но офлайн-страницы, кеш и push без него не работают, а ваш эта страница не видит.
- Сам визит
- Chrome также ждёт клик или тап и 30 секунд на странице и не предлагает установить уже установленное приложение.
Поля манифеста и что с ними делает Chrome
Названия и значения полей — по справочнику MDN по Web App Manifest; поведение Chrome — по документации самого Chrome.
| Поле | Что делает | Что с ним делает Chrome |
|---|---|---|
name / short_name | Название приложения; short_name — там, где мало места, например под иконкой на главном экране. | Для установки нужно одно из двух. Сплеш-экран показывает name. |
icons | Изображения для главного экрана, лаунчера, переключателя приложений и сплеш-экрана. | Для установки нужны иконки 192px и 512px. Без maskable Android кладёт иконку на белый фон. |
start_url | Страница, которая открывается при запуске. | Обязателен для установки. start_url с другого origin игнорируется в пользу страницы, с которой началась установка. |
scope | URL, которые принадлежат приложению. | Страницы вне него показывают интерфейс браузера в окне приложения. Если start_url не внутри scope, scope игнорируется. |
id | Постоянная идентичность приложения. | Без него идентичность берётся из start_url, поэтому смена start_url позже может зарегистрировать второе приложение. |
display | Сколько интерфейса браузера остаётся в окне приложения. | fullscreen, standalone, minimal-ui или window-controls-overlay подходят для установки; browser — нет. |
orientation | Ориентация по умолчанию. | Применяется при открытии; без неё приложение следует устройству и настройкам пользователя. |
theme_color | Цвет тулбара и переключателя приложений. | Красит тулбар приложения. Держите его равным мета-тегу theme-color. |
background_color | Фон сплеш-экрана. | Используется на сплеш-экране на мобильных. Совпадение с фоном страницы даёт плавный старт. |
description | Короткое описание приложения. | Заполняет строку текста в высоком шите установки; обрезается после 300 символов. |
screenshots | Снимки приложения в работе. | Пригодные записи включают высокий шит: широкие — на десктопе, узкие или без form_factor — на Android. |
prefer_related_applications | Отправляет пользователей к нативному приложению. | true на Android ведёт в Play Store за приложением из related_applications вместо установки PWA. |
lang | Язык name и description. | По данным MDN, браузеры lang пока не реализуют; добавлять его не вредно. |
Расширенное или компактное окно установки
Chrome показывает одно из двух окон установки, и выбирает его манифест. Если есть хотя бы один скриншот, который Chrome может использовать, открывается высокий шит с галереей. Если нет — небольшая карточка с иконкой, названием, доменом и кнопкой Install.
description формат не выбирает. Оно лишь заполняет строку текста в высоком шите, поэтому удаление описания компактную карточку не вернёт. На десктопе учитываются только широкие скриншоты; Android широкие игнорирует и показывает узкие или те, что без form_factor.
Какое окно даёт больше установок, публично никто не измерял. Выбирайте осознанно и проверяйте на своём трафике.
Читать: два окна установки Chrome рядомГде манифесты обычно ломаются
- 1
Размеры, которых нет в файле
sizes — это обещание, а не замер. Запись 512x512, указывающая на файл 256px, пройдёт любую проверку манифеста. Экспортируйте каждый файл в том размере, который объявляете.
- 2
Смена start_url без id
Без id идентичность приложения — это start_url. Перенесёте его, и браузер воспримет новый манифест как другое приложение, так что у человека могут оказаться две иконки.
- 3
Click ID в start_url
MDN предупреждает: start_url с данными конкретного пользователя, вроде ?user=123, становится постоянным отпечатком. Держите click ID в трекере, а не в URL запуска.
- 4
Удаление иконок ради компактного окна
Иконки решают, будет ли установка вообще. Для компактного окна уберите скриншоты; уберёте иконки — не появится никакого окна.
Хватит править манифест вручную под каждую PWA.
DarkCore собирает манифест для каждой PWA. Расширенное или компактное окно установки — это переключатель, который вы включаете и измеряете, а установка, открытие и переход на оффер считаются отдельными событиями.