«Нам потрібен застосунок?» — запитання, яке рано чи пізно ставить кожен продукт, що росте. Колись відповідь була простою: якщо потрібні push-сповіщення, офлайн-режим чи іконка на головному екрані, ви робили нативні застосунки для iOS і Android. У 2026 році межа розмита. Прогресивні вебзастосунки встановлюються, працюють офлайн і надсилають push-сповіщення на всіх основних платформах, а кросплатформні фреймворки здешевили нативну розробку. У гайді чесно порівнюємо варіанти і даємо схему вибору.
Що таке PWA
Прогресивний вебзастосунок — це сайт, що використовує сучасні можливості вебу, щоб поводитися як застосунок (MDN: Progressive web apps; web.dev: PWA). Його роботу забезпечують три складові:
- Web app manifest — назва, іконки, кольори і режим відображення, щоб браузер міг встановити застосунок на головний екран чи робочий стіл.
- Service worker — скрипт, що перехоплює мережеві запити й дає офлайн-режим, кешування і фонові функції.
- HTTPS — обов'язковий для service worker і більшості сучасних API.
Одна кодова база обслуговує сайт, встановлений застосунок на Android, iOS, Windows і macOS та індексується пошуковими системами.
Що вміють PWA у 2026 році
- Встановлюватися на головний екран і робочий стіл з власним вікном та іконкою.
- Працювати офлайн чи на поганому зв'язку з кешованим контентом і чергою дій.
- Push-сповіщення, зокрема на iPhone та iPad: починаючи з iOS та iPadOS 16.4, вебзастосунки, додані на головний екран, можуть отримувати web push і показувати бейджі (WebKit, 2023; MDN: Push API).
- Камера, мікрофон, геолокація, вибір файлів, «поділитися», буфер обміну і платежі через стандартні веб-API.
- Поширення через магазини застосунків: на Android PWA можна запакувати для Google Play як Trusted Web Activity (Chrome: Trusted Web Activity); інструменти на кшталт PWABuilder допомагають пакувати для кількох магазинів.
У ЄС на початку 2024 року Apple ненадовго планувала прибрати вебзастосунки з головного екрана в межах Digital Markets Act, а потім змінила рішення і залишила їх (Apple: DMA and apps in the EU). Цей епізод нагадує: на iOS можливості вебзастосунків залежать від рішень Apple.
Де нативні застосунки досі перемагають
- Глибока інтеграція із залізом і ОС: Bluetooth Low Energy на iOS, NFC понад базове читання, фонове відстеження геолокації, дані здоров'я і фітнесу, віджети, застосунки для годинника.
- Фонова робота на iOS: у вебзастосунків обмежене фонове виконання, а в Safari немає background sync.
- Важка графіка й інтерфейси, критичні до продуктивності: ігри, складний відеомонтаж, AR.
- Магазин застосунків як канал: якщо користувачі шукають застосунки вашої категорії в App Store, бути там важливо.
- Помітність встановлення: на iOS користувач має додати вебзастосунок через меню «Поділитися»; запрошення до встановлення немає.
Кросплатформна нативна розробка: золота середина
Якщо потрібні нативні можливості, але не дві окремі кодові бази, кросплатформні фреймворки вже зрілі:
- Kotlin Multiplatform і Compose Multiplatform дозволяють спільну бізнес-логіку, а після того як Compose Multiplatform для iOS став стабільним у 2025 році, — і спільний UI для Android та iOS (JetBrains, 2025; Kotlin Multiplatform). Природний вибір, якщо бекенд уже на Kotlin, як у статті Spring Boot + Kotlin.
- React Native з New Architecture, увімкненою за замовчуванням з версії 0.76 (React Native, 2024), дає вебкомандам повторно використати знання React.
- Flutter пропонує єдиний UI-тулкіт із власним рушієм рендерингу.
Порівняння пліч-о-пліч
| Критерій | PWA | Кросплатформний нативний | Два нативні застосунки |
|---|---|---|---|
| Кодові бази | Одна (спільна із сайтом) | Одна для мобільних + сайт | Дві + сайт |
| Швидкість виходу на ринок | Найшвидше | Середньо | Найповільніше |
| Типова вартість | Найнижча | Середня | Найвища |
| Видимість у пошуку | Повна | Лише через окремий сайт | Лише через окремий сайт |
| Push-сповіщення | Так (на iOS після встановлення на головний екран) | Так | Так |
| Офлайн | Так, із service worker | Так | Так |
| Глибокі API пристрою | Обмежені, особливо на iOS | Більшість, через плагіни | Усі |
| Магазини застосунків | Опційно (найпростіше на Android) | Так | Так |
| Оновлення | Миттєві, без рев'ю | Рев'ю в магазині (плюс OTA для частини коду) | Рев'ю в магазині |
Схема вибору
Обирайте PWA, коли:
- Ваш продукт — здебільшого контент, каталог, форми, дашборди чи замовлення: e-commerce, бронювання, B2B-портали, внутрішні інструменти.
- Важливий пошуковий трафік: кожен екран має індексуватися.
- Потрібні миттєві оновлення без циклів рев'ю в магазинах.
- Бюджет краще витратити на один відмінний продукт, ніж на три посередні.
Обирайте кросплатформний нативний застосунок, коли:
- Потрібні можливості пристрою, недоступні PWA на iOS, або надійна фонова поведінка.
- Користувачі очікують знайти вас у магазинах застосунків.
- Плануєте часту й глибоку взаємодію: щоденні застосунки, виїзний сервіс, логістика з офлайн-скануванням.
Обирайте повністю нативну розробку, коли застосунок і є продуктом і потребує максимальної продуктивності чи платформного досвіду.
Багато компаній зрештою мають гібрид: швидкий PWA для залучення й нечастих користувачів і нативний застосунок для найактивніших клієнтів.
Як зробити так, щоб PWA відчувався як застосунок
- Продуктивність передусім. Встановлений застосунок, що повільно реагує, здається зламаним. Цільтеся в хороші Core Web Vitals, особливо INP; див. Core Web Vitals у 2026 році.
- Проєктуйте під офлайн. Вирішіть, які екрани працюють офлайн, чітко показуйте стан з'єднання і безпечно ставте дії в чергу.
- Просіть дозволи в контексті. Запитуйте дозвіл на сповіщення після дії користувача, що робить користь очевидною, а не при першому завантаженні.
- Підкажіть користувачам iOS, як встановити застосунок коротким візуальним підказом, бо в Safari немає запрошення до встановлення.
- Залишайтеся індексованими. Рендеріть контент на сервері й правильно налаштовуйте метадані, як описано у статті Технічне SEO для Next.js.
{
"name": "Acme Store",
"short_name": "Acme",
"start_url": "/?source=pwa",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#0f172a",
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}
Офлайн-стратегії, що працюють
Service worker дозволяє обрати стратегію кешування для кожного типу запитів:
| Контент | Стратегія | Чому |
|---|---|---|
| Каркас застосунку: HTML-макет, CSS, JavaScript | Спершу кеш, оновлення у фоні | Миттєвий старт, навіть офлайн |
| Зображення товарів | Спершу кеш зі строком дії | Рідко змінюються, важкі для завантаження |
| Каталог і ціни | Спершу мережа, резервно кеш | Свіжі дані онлайн, щось корисне офлайн |
| Кошик і замовлення (запис) | Черга офлайн, синхронізація онлайн | Не втрачати дії користувача на поганому зв'язку |
| Платежі й автентифікація | Лише мережа | Ніколи не віддавати застарілі чи кешовані відповіді |
Бібліотеки на кшталт Workbox реалізують ці стратегії, тож не доводиться писати низькорівневий код service worker вручну.
Приблизне порівняння вартості
Для типового продукту в e-commerce чи бронюваннях, з нашого досвіду, якісний PWA коштує приблизно як хороший адаптивний сайт плюс 15–30% на офлайн-режим, push-сповіщення і встановлення. Кросплатформний нативний застосунок додає окрему мобільну кодову базу, публікацію в магазинах і керування релізами; два повністю нативні застосунки приблизно подвоюють це ще раз. Підтримка підпорядковується тому самому патерну: один пайплайн вебрелізів проти двох чи трьох.
FAQ
Чи працюють PWA на iPhone? Так. Їх можна додати на головний екран, вони працюють офлайн і, починаючи з iOS 16.4, отримують push-сповіщення після встановлення.
Чи можна опублікувати PWA в App Store? Apple не приймає прості обгортки PWA без цінності, характерної для застосунків. Google Play приймає PWA, запаковані як Trusted Web Activity.
Чи дешевший PWA за нативний застосунок? Зазвичай суттєво, бо одна кодова база обслуговує і веб, і застосунок, а оновлення виходять без рев'ю в магазинах.
Чи можна почати з PWA і перейти на нативну розробку пізніше? Так, і часто це найрозумніший шлях: перевірте попит на PWA, а потім інвестуйте в нативну розробку там, де дані використання це виправдовують.
Джерела
- MDN. Progressive web apps і Push API.
- web.dev. Progressive Web Apps.
- WebKit (2023). Web Push for Web Apps on iOS and iPadOS.
- Apple. DMA and apps in the EU.
- Chrome for Developers. Trusted Web Activity.
- JetBrains (2025). Compose Multiplatform 1.8.0: iOS is stable.
- React Native (2024). React Native 0.76: New Architecture by default.