Налаштування Web App Manifest для PWA
Web App Manifest — JSON-файл, що описує приложення для браузера та ОС. Визначає іконки, назву, кольори, орієнтацію та поведінку при установці.
Повний manifest.json
{
"name": "ТехноМагазин — купити електроніку онлайн",
"short_name": "ТехноМагазин",
"description": "Смартфони, ноутбуки, аксесуари. Швидка доставка.",
"start_url": "/?utm_source=pwa&utm_medium=manifest",
"scope": "/",
"display": "standalone",
"display_override": ["window-controls-overlay", "standalone"],
"orientation": "any",
"theme_color": "#1a73e8",
"background_color": "#ffffff",
"lang": "uk",
"dir": "ltr",
"categories": ["shopping", "lifestyle"],
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-192-maskable.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"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"
}
],
"screenshots": [
{
"src": "/screenshots/catalog-mobile.webp",
"sizes": "390x844",
"type": "image/webp",
"form_factor": "narrow",
"label": "Каталог товарів"
},
{
"src": "/screenshots/product-mobile.webp",
"sizes": "390x844",
"type": "image/webp",
"form_factor": "narrow",
"label": "Карточка товара"
},
{
"src": "/screenshots/catalog-desktop.webp",
"sizes": "1280x800",
"type": "image/webp",
"form_factor": "wide",
"label": "Каталог — десктоп"
}
],
"shortcuts": [
{
"name": "Кошик",
"short_name": "Кошик",
"url": "/cart?utm_source=pwa",
"icons": [{ "src": "/icons/cart-96.png", "sizes": "96x96", "type": "image/png" }]
},
{
"name": "Пошук",
"short_name": "Пошук",
"url": "/search?utm_source=pwa",
"icons": [{ "src": "/icons/search-96.png", "sizes": "96x96", "type": "image/png" }]
}
],
"protocol_handlers": [
{
"protocol": "web+technoshop",
"url": "/products?q=%s"
}
]
}
Підключення в HTML
<head>
<link rel="manifest" href="/manifest.json">
<!-- iOS — Safari не читає manifest для цих параметрів -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="ТехноМагазин">
<!-- iOS іконки -->
<link rel="apple-touch-icon" href="/icons/apple-touch-icon-180.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-touch-icon-152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-touch-icon-120.png">
<!-- iOS splash screens (опціонально) -->
<link rel="apple-touch-startup-image"
media="(device-width: 390px) and (device-height: 844px)"
href="/splashscreens/iphone12.png">
<!-- Windows плитка -->
<meta name="msapplication-TileColor" content="#1a73e8">
<meta name="msapplication-TileImage" content="/icons/icon-144.png">
<meta name="theme-color" content="#1a73e8">
</head>
Режими display
| Значення | Описання |
|---|---|
browser |
Звичайна вкладка браузера |
minimal-ui |
Мінімальні елементи навігації |
standalone |
Без адресної рядки, як нативне приложення |
fullscreen |
Повний екран без UI браузера |
display_override — масив з пріоритетом: браузер вибере перший підтримуваний. window-controls-overlay — для Desktop PWA показує кастомний titlebar.
Maskable-іконка
Maskable-іконка адаптується під форму (круг, квадрат, squircle). Важливо: контент іконки повинен перебувати в безпечній зоні — центральний круг 80% від розміру.
Перевірка: maskable.app — завантажити іконку та перевірити як вона виглядає в різних масках.
Динамічний manifest для мультиязичного сайту
// routes/web.php
Route::get('/manifest.json', [ManifestController::class, 'index']);
// ManifestController.php
public function index(Request $request): JsonResponse
{
$locale = app()->getLocale();
$manifest = [
'name' => __('pwa.name'),
'short_name' => __('pwa.short_name'),
'description' => __('pwa.description'),
'start_url' => "/?lang={$locale}&utm_source=pwa",
'lang' => $locale,
'theme_color' => '#1a73e8',
'background_color' => '#ffffff',
'display' => 'standalone',
'scope' => '/',
'icons' => $this->getIcons(),
'shortcuts' => $this->getShortcuts($locale),
];
return response()->json($manifest)
->header('Content-Type', 'application/manifest+json');
}
Перевірка
- Chrome DevTools → Application → Manifest — усі поля, іконки, встановлюваність
- Lighthouse → PWA — перевірити всі вимоги
- PWABuilder.com — повний аудит та генерація пакетів для App Store
Час налаштування: кілька годин для коректного manifest з іконками всіх розмірів.