Ви запускаєте PWA, а браузер не пропонує встановлення? Перевірте консоль: швидше за все, помилка маніфесту. Правильне налаштування PWA-маніфесту — дрібниця, але саме вона в 80% випадків блокує подію beforeinstallprompt. Ми бачили проєкти, де були відсутні maskable-іконки, неправильно виставлений display_override або забуті iOS-метатеги. В результаті користувач не отримує іконку на робочий стіл, а конверсія падає на 30–40%. Розберемо, як зробити так, щоб додаток встановлювався на Android, iOS та десктоп без зайвих танців з бубном.
Основні проблеми та рішення
Причини відсутності кнопки встановлення
Основні причини: відсутність маніфесту, невалідний JSON, непідходящі іконки (розмір або тип), неправильний display (наприклад, browser замість standalone), відсутність Service Worker, не HTTPS. Але найчастіше — невідповідність іконок вимогам: на Android потрібні масковані іконки з purpose: maskable, на iOS — apple-touch-icon. Без них браузер просто не пропонує встановлення. Ми систематизуємо помилки та пропонуємо готові рішення. Правильно налаштований manifest збільшує шанс встановлення на 40% порівняно з помилковим.
Повний 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"> <!-- Splash screens iOS (опціонально) --> <link rel="apple-touch-startup-image" media="(device-width: 390px) and (device-height: 844px)" href="/splashscreens/iphone12.png"> <!-- Windows tile --> <meta name="msapplication-TileColor" content="#1a73e8"> <meta name="msapplication-TileImage" content="/icons/icon-144.png"> <meta name="theme-color" content="#1a73e8"> </head> Технічні деталі
Порівняння підтримки Android та iOS
| Поле manifest | Android (Chrome) | iOS (Safari) |
|---|---|---|
display | Підтримується (standalone, fullscreen) | Ігнорується |
icons | Підтримуються всі розміри | Тільки apple-touch-icon |
shortcuts | Підтримуються | Не підтримуються |
screenshots | Підтримуються (для встановлення) | Не підтримуються |
scope | Підтримується | Ігнорується |
Режими display
| Значення | Опис |
|---|---|
browser | Звичайна вкладка браузера |
minimal-ui | Мінімальні елементи навігації |
standalone | Без адресного рядка, як нативний додаток |
fullscreen | Повний екран без UI браузера |
display_override — масив із пріоритетом: браузер вибере перший підтримуваний. window-controls-overlay — для Desktop PWA показує кастомний titlebar.
Maskable-іконка
Maskable-іконка адаптується під форму (коло, квадрат, squircle) на різних пристроях. Контент повинен знаходитися в безпечній зоні — центральне коло радіусом 80% від розміру. Ми використовуємо бібліотеку sharp для генерації таких іконок із правильним відступом. Без maskable іконка може обрізатися на Android та Windows, що псує враження користувача при встановленні.
Як перевірити maskable-іконку
Завантажте іконку на 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 — повний аудит та генерація пакетів для App Store
Використовуйте документацію MDN для перевірки специфікації.
Згідно зі специфікацією W3C, Web App Manifest — стандарт для визначення зовнішнього вигляду PWA на пристроях.
Типові помилки та перевірка
Проблеми на iOS
Safari ігнорує поле display та деякі інші. Рішення — додати перераховані вище мета-теги та apple-touch-icon. Без них PWA на iPhone буде відкриватися в Safari, а не як окремий додаток. Також переконайтеся, що start_url коректний і веде на захищену сторінку (HTTPS).
Інструменти перевірки
Ми використовуємо три інструменти: Chrome DevTools для швидкої перевірки, Lighthouse для повного PWA-аудиту та PWABuilder для фінальної верифікації. PWABuilder генерує ще й пакети для Google Play і App Store, якщо потрібно публікувати PWA в магазинах. За нашим досвідом, близько 80% проблем із встановленням вирішуються правильним manifest.
Наші послуги
Що входить в роботу
- Аудит поточного manifest (якщо є)
- Генерація іконок всіх розмірів, включаючи maskable (192, 512, 96, 144, 180)
- Налаштування
shortcutsтаscreenshotsдля різних пристроїв - Верстка мета-тегів для iOS та Windows
- Перевірка через Lighthouse і PWABuilder
- Надання готового manifest.json та документації по оновленню
Процес роботи
- Аналіз вимог (аудиторія, пристрої, багатомовність)
- Проектування manifest (набір полів, структура іконок)
- Реалізація (генерація іконок, написання manifest, інтеграція в HTML)
- Тестування на реальних пристроях (Android, iOS, Windows)
- Деплой та моніторинг встановлень
Терміни орієнтовно
Базове налаштування — від 4 до 8 годин. Комплексний проект із багатомовністю та безліччю іконок — до 2 робочих днів. Вартість розраховується індивідуально: базовий пакет — від 2000 грн, комплексний — від 5000 грн. Економія на розробці нативного додатку може сягати 50–70%. Замовте налаштування PWA-маніфесту під ключ у нас — отримайте готовий JSON та іконки за 4 години. Напишіть нам для безкоштовної оцінки проекту — розповімо, як оптимізувати встановлення та підвищити конверсію.
Наші інженери мають 5+ років досвіду у PWA, сертифікати з веб-продуктивності та за плечима понад 50 проектів.