Відкрийте дві свої PWA на одному Android-телефоні й натисніть Install у кожній. Є непогані шанси, що ви побачите два різні вікна. Одне — невелика картка посеред екрана: іконка, назва, домен, Cancel, Install. Друге — високий шит, який виїжджає знизу, містить опис і показує горизонтальну стрічку скріншотів застосунку.
Жодного з них ніхто у вашій команді не обирав. Обрав Chromium — і обрав за вашим маніфестом.
Вирішує одне поле
Перемикач — це screenshots. Якщо у Web App Manifest є хоч один запис у цьому масиві, Chromium міняє компактне вікно на високий шит і малює всередині нього ту саму галерею. Приберіть поле — повернеться компактне вікно.
description формат не визначає. Воно лише заповнює текстовий абзац усередині високого шита: є description — у шита є рядок опису, немає — той самий шит без цього рядка.
Перевірено на Chrome 113 / Android 14, один пристрій, одна сторінка, між прогонами змінювався тільки маніфест:
screenshots | description | Що показує Chromium |
|---|---|---|
| є | є | високий шит, галерея, рядок опису |
| є | нема | високий шит, галерея, без рядка опису |
| нема | є | компактне вікно |
| нема | нема | компактне вікно |
Остання пара — найважливіша. Якщо ви приберете опис у надії повернути маленьке вікно, не станеться нічого: ви просто втратите нормальне поле маніфесту й лишитесь із шитом.
Документація Chrome просить ставити form_factor: "narrow" на записи, призначені для телефонів; усі кадри тут зняті саме з narrow-записами в реальному піксельному розмірі. Скріншот, чиї заявлені sizes не збігаються з файлом, — це помилка того самого класу, що й неправильно оголошена іконка, і її варто виправити незалежно від того, яке вікно вам потрібне.
Два вікна, один застосунок, один телефон
Обидва кадри справжні, зняті з того самого демо-застосунку на тому самому пристрої з різницею в кілька секунд і обрізані по діалог. Сторінка позаду ідентична. Єдина відмінність між прогонами — чи був screenshots у маніфесті.
Що насправді змінюється для людини з телефоном у руці
Візуальна різниця очевидна. Значення мають відмінності у взаємодії — і їх можна виміряти. На екрані 1080×2220:
| Високий шит | Компактне вікно | |
|---|---|---|
| Починається на | 37% висоти екрана | 42% висоти екрана |
| Перекриває | 63% екрана, обрізаний нижнім краєм | 22% екрана |
| Кнопка Install | пігулка у правому верхньому куті шита, ~39% висоти | текстова кнопка, ~60% висоти |
| Прокручуваний вміст усередині | так — галерея, і сам шит тягнеться | ні |
| Способи закрити | тап повз, потягнути шит донизу, назад | тап повз, Cancel, назад |
З цієї таблиці випливають три речі.
Шит запрошує до другого рішення. Галерея — це контент. Контент просить, щоб на нього подивилися, а горизонтальна стрічка просить, щоб її гортали. Ви поставили об’єкт для перегляду між людиною і кнопкою, до якої вона вже тягнулася. Компактне вікно пропонує рівно дві дії й жодної третьої.
Кнопка Install переїжджає вгору, а не вниз. У високому шиті пігулка Install стоїть приблизно на 39% висоти екрана, у правому верхньому куті шита. У компактному вікні — приблизно на 60%, у зручній зоні великого пальця на великому телефоні. Вище — тут не краще; це просто далі від пальця.
Шит тягнеться, а тягнути — це те, як телефони закривають речі. Людина, яка торкнулася шита і повела палець донизу, щойно скасувала встановлення. Той самий жест на компактному вікні не робить нічого.
Чому це припадає на найгірший момент
Усе до вікна — ваше: текст, галерея, CTA. Ви весь візит будуєте намір заради одного тапу. Вікно — перший момент, коли браузер забирає екран собі, і останній момент перед тим, як встановлення справді відбудеться.
Це погане місце, щоб додати нову поверхню для перегляду. Людина вже прийняла рішення, якого просила ваша сторінка. Те, що вікно покаже далі, може або підтвердити це рішення, або перебити його — а галерея всередині шита дублює ту, яку відвідувач уже прогорнув на сторінці, тож підтвердження там, по суті, не пропонують.
Це не привід панікувати. Це привід знати, що саме ви віддаєте в продакшн.
Як перевірити, що у вас зараз
Три способи, від найдешевшого.
Прочитайте власний маніфест. Відкрийте URL маніфесту вашої PWA у будь-якому браузері й знайдіть screenshots. Якщо масив є і не порожній — у вас високий шит.
curl -s https://ваш-домен.example/manifest.json | grep -c '"screenshots"'Подивіться в DevTools. Підключіть телефон, відкрийте chrome://inspect і прочитайте панель Application → Manifest. Там видно розпізнані скріншоти й попередження про ті, які Chromium відкинув — відкинутий скріншот для цієї задачі рівно такий самий, як відсутній.
Поставте застосунок самі. Ніщо не замінює одне справжнє встановлення на справжньому пристрої раз на реліз. Вікно встановлення — єдиний екран воронки, якого ви не побачите в аналітиці.
Як перемкнути
Прибрати масив screenshots із маніфесту — це вся зміна. Решту лишіть: іконки вирішують, чи з’явиться промпт узагалі, а опис — нормальне поле маніфесту, якому там місце.
Це варто сказати прямо, бо ці речі легко переплутати. Видалення іконок не дасть вам компактного вікна — воно зробить застосунок непридатним до встановлення, і не з’явиться жодне вікно.
У DarkCore це налаштування рівня PWA, а не правка маніфесту. У блоці «Хуки конверсії» є перемикач Розширене вікно встановлення, і за замовчуванням він вимкнений: маніфест іде без скріншотів, і відвідувач бачить компактне вікно. Увімкніть — маніфест понесе вашу галерею у шит.
У будь-якому разі сторінка стора зберігає свою галерею незмінною. Chromium читає не галерею на сторінці, а тільки маніфест, тому перемикач нічого не коштує візуально до тапу.
Чого ми ще не знаємо — і ніхто не знає
Ми не міряли, яке вікно конвертить краще. Наскільки нам відомо, публічно цього не міряв ніхто.
Аргумент за компактне вікно — той, що вище: менше конкурентних дій, кнопка ближче до пальця, немає закриття перетягуванням. Аргумент за високий шит — скріншоти заспокоюють людину, яка за один тап від встановлення чогось із домену, про який вона ніколи не чула. Обидва правдоподібні. Розсудити може тільки ваш трафік, і відповідь цілком може відрізнятись за гео й вертикаллю.
Якщо будете тестувати — тестуйте нормально:
- одна змінна: формат вікна, більше нічого на сторінці;
- розріз за пристроєм і браузером, бо жодне з цих вікон не показує ніхто, крім Chromium, а в in-app браузерах немає жодного;
- міряйте install на тап, а не install на клік, щоб відсоток виходу з webview не з’їв усе порівняння;
- тримайте тест достатньо довго, щоб він пережив вихідні.
Суть цієї статті не в тому, що якесь вікно перемагає. Суть у тому, що досі ви віддавали те, яке випадково обрало ваше завантаження скріншотів — а це дивна річ, щоб лишати на волю випадку на останньому екрані перед встановленням.
Що читати далі
- PWA-застосунки в арбітражі трафіку: воронка від кліка до FTD — де встановлення стоїть у ширшій воронці
- Чому лінк відкриває браузер замість застосунку — усередині in-app браузера вікна встановлення не існує
- Фолбек на стор, коли застосунок не встановлено — що робити з тими, хто до вікна не дійшов
- Як обрати PWA-сервіс для арбітражу — на що дивитись, крім екрана встановлення