UTILS.
100% у браузері
📱

Генератор Web App Manifest (PWA)

Створіть валідний маніфест PWA (manifest.json) з іконками, кольорами теми та режимом відображення, а також готовий тег link rel=manifest.

— результат з’явиться тут —
— результат з’явиться тут —

Про цей інструмент

Генератор Web App Manifest створює валідний manifest.json для прогресивного веб-додатка (PWA) з простої форми, а потім видає вам супутні HTML-теги, які можна вставити в <head> сторінки. Усе збирається у вашому браузері, і нічого не завантажується на сервер — ви можете скопіювати JSON, завантажити його як manifest.json або скопіювати теги link та meta.

Web app manifest — це JSON-файл, який дозволяє встановити сайт на головний екран і запускати його як нативний додаток. Цей інструмент збирає стандартні ключі — name, short_name, description, start_url, scope, display (standalone, fullscreen, minimal-ui або browser), orientation, theme_color, background_color та масив icons — пропускаючи будь-яке поле, яке ви залишили порожнім, щоб результат був чистим. Кожен розмір іконки, який ви позначаєте, стає записом зі своїми src, sizes і type (визначеним за розширенням файлу), а необов'язкове поле purpose дозволяє позначити іконки як maskable. Результат серіалізується через JSON.stringify з відступом у два пробіли, тому він читабельний і відповідає стандартам.

Використовуйте плейсхолдер {size} у шляху до іконки (наприклад /icons/icon-{size}.png), і він замінюється кожним розміром, як-от 192x192 та 512x512. Як мінімум маніфест має містити name, start_url, режим display і принаймні іконки 192px та 512px, які тут задані за замовчуванням. Посилайтеся на нього зі своєї сторінки згенерованим тегом <link rel="manifest"> і додайте meta theme-color для інтерфейсу браузера.

Поширені запитання

Що таке web app manifest?
Це JSON-файл, що описує ваш прогресивний веб-додаток — його назву, іконки, кольори та спосіб запуску — щоб браузери могли пропонувати встановлення на головний екран і відкривати його у вікні, схожому на додаток.
Які поля є обов'язковими?
Корисний маніфест потребує принаймні name (або short_name), start_url, режим display та іконки 192x192 і 512x512. Цей генератор заповнює їх за замовчуванням; інші поля є необов'язковими й пропускаються, якщо залишені порожніми.
Що означає «maskable» для іконок?
Maskable-іконки мають безпечні відступи, тож платформи можуть обрізати їх у кола, сквіркли чи заокруглені квадрати, не обрізаючи ваш логотип. Встановіть purpose на 'maskable' або 'any maskable' для іконок, розроблених із такою безпечною зоною.
Як встановити маніфест на моєму сайті?
Збережіть JSON як manifest.json, завантажте його на свій сайт, а потім додайте згенерований <link rel="manifest" href="/manifest.json"> та meta-теги theme-color у <head> кожної сторінки.

Більше інструментів