Вы запускаете PWA, а браузер не предлагает установку? Проверьте консоль: скорее всего, ошибка манифеста. Настройка Web App Manifest — кажущаяся мелочь, но именно она в 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.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": "ru", "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 на устройствах.
Почему manifest не работает на iOS?
Safari игнорирует поле display и некоторые другие. Решение — добавить перечисленные выше мета-теги и apple-touch-icon. Без них PWA на iPhone будет открываться в Safari, а не как отдельное приложение. Также убедитесь, что start_url корректен и ведёт на защищённую страницу (HTTPS).
Как проверить корректность manifest перед деплоем?
Мы используем три инструмента: 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 рабочих дней. Стоимость рассчитывается индивидуально: зависит от количества локализаций и необходимости интеграции с системой управления контентом. Закажите настройку PWA-манифеста у нас — получите готовый JSON и иконки за 4 часа. Свяжитесь с нами, чтобы обсудить ваш проект и получить предварительную оценку — расскажем, как оптимизировать установку и повысить конверсию.
Наши инженеры имеют 5+ лет опыта в PWA, сертификаты по веб-производительности и за плечами более 50 проектов.