Генератор і валідатор маніфесту PWA
Заповни форму й отримай manifest.webmanifest разом із тегами для head, або встав маніфест, який уже віддає твій сайт. Обидва проходять той самий чекліст: критерії встановлення Chrome, правила, за якими він обирає вікно встановлення, і поля, які варто виправити.
Твій маніфест
Поклади його в корінь сайту як manifest.webmanifest — туди вказують теги нижче.
{
"name": "Aurora Play",
"short_name": "Aurora",
"description": "Щоденні турніри, бонуси й акаунт — в один тап із головного екрана.",
"lang": "uk",
"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 Символів: 66. Заповнює рядок тексту у високому шиті.
Варто виправити
Для встановлення не обов'язково, але людина побачить результат.
- Пройдено Довжина 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. Розширене чи компактне вікно встановлення — це перемикач, який ти вмикаєш і міряєш, а встановлення, відкриття й перехід на офер рахуються окремими подіями.