Власний мобільний застосунок — мрія багатьох власників магазинів, але розробка під iOS та Android окремо, публікація в сторах і подальша підтримка коштують дорого. PWA (Progressive Web App) дає більшу частину переваг застосунку за значно менших витрат.
У цьому гайді пояснюємо, як PWA працює технічно і для покупця, які пуш-сповіщення справді приносять продажі, які обмеження є на iPhone і в яких випадках усе ж варто інвестувати в нативний застосунок.
Що таке PWA
Це сайт, який можна встановити на телефон як застосунок: з іконкою на головному екрані, власним вікном без адресного рядка й пуш-сповіщеннями. Оновлюється разом із сайтом — користувачу не треба нічого завантажувати з магазину застосунків.
З чого складається PWA
- HTTPS — обов’язкова умова: PWA працює лише на захищеному сайті.
- Web App Manifest — файл із назвою, іконками, кольорами й режимом відображення. Він визначає, як застосунок виглядає на головному екрані.
- Service Worker — скрипт, що працює у фоні: кешує сторінки й ресурси, отримує пуш-сповіщення і дозволяє показувати контент без зв’язку.
Окремого коду під iOS чи Android немає: це той самий сайт, тож будь-яке покращення вітрини одразу з’являється і в застосунку.
Як покупець встановлює PWA
| Пристрій | Як встановити |
|---|---|
| Android (Chrome) | Браузер сам пропонує встановити застосунок, або через меню: «Додати на головний екран» чи «Встановити застосунок» |
| iPhone та iPad (Safari) | Кнопка «Поділитися» → «На початковий екран» |
| Комп’ютер (Chrome, Edge) | Іконка встановлення в адресному рядку |
На Android магазин може показати власну кнопку «Встановити застосунок» у зручний момент. На iPhone такої можливості немає, тому варто показати покупцю коротку підказку з двома кроками — наприклад, після першого замовлення.
PWA чи нативний застосунок
| PWA | Нативний застосунок | |
|---|---|---|
| Розробка | Одна кодова база з сайтом | Окремо під iOS і Android |
| Вартість запуску | Частина проєкту сайту | Окремий проєкт, часто дорожчий за сайт |
| Публікація | Не потрібна | Модерація в App Store і Google Play |
| Встановлення | З сайту за кілька секунд | Пошук у сторі та завантаження |
| Оновлення | Миттєво для всіх | Через стор, користувач має оновити |
| Пуш-сповіщення | Так (на iOS — після встановлення на головний екран) | Так |
| Робота без мережі | Кешовані сторінки й каталог | Залежить від реалізації |
| Пошук Google | Індексується як сайт | Не індексується як сторінки магазину |
| Доступ до функцій телефона | Базовий | Повний |
| Підтримка | Разом із сайтом | Дві окремі кодові бази |
Пуш-сповіщення: як працюють і як не набриднути
Покупець дає дозвіл на сповіщення, браузер створює підписку, а магазин надсилає повідомлення через стандартний протокол Web Push. Сповіщення з’являється на екрані навіть тоді, коли сайт закритий. Для магазину це безкоштовний канал — без оплати SMS, без розсилок у месенджерах і без залежності від алгоритмів соцмереж.
Головна помилка — просити дозвіл одразу під час першого відвідування. Людина ще не знає магазину і майже напевно натисне «Заблокувати», а повторно запитати вже не вийде. Запитуйте тоді, коли користь очевидна:
- після оформлення замовлення: «Повідомити, коли посилка буде у відділенні?»;
- на картці товару, якого немає: «Повідомити про надходження?»;
- після додавання в обране: «Повідомити, якщо ціна знизиться?».
Сценарії, які приносять продажі
| Подія | Приклад повідомлення | Мета |
|---|---|---|
| Покинутий кошик | «Ваші кросівки ще в кошику — розмір 41 залишився один» | Повернути до оформлення |
| Знижка на товар з обраного | «Runner Pro подешевшали на 15%» | Підштовхнути до покупки |
| Надходження товару | «Чорні Runner Pro знову в наявності» | Не втратити попит |
| Статус замовлення | «Замовлення відправлено, номер ТТН уже в особистому кабінеті» | Менше дзвінків «де моя посилка» |
| Повторна покупка | «Корм закінчується? Замовте зі знижкою» | Регулярні продажі |
| Персональна акція | «Для вас −10% на аксесуари до неділі» | Повернути неактивних клієнтів |
Правила частоти
- Транзакційні повідомлення (статус замовлення, надходження) — стільки, скільки потрібно.
- Маркетингові — не частіше кількох разів на тиждень, інакше покупці відписуються.
- Кожне повідомлення — про щось конкретне для цієї людини, а не загальна розсилка «У нас знижки!».
- Додавайте до посилань у пушах UTM-мітки, щоб бачити в аналітиці, які сценарії приносять замовлення.
Швидкість і робота на слабкому зв’язку
Service Worker зберігає на пристрої оболонку застосунку, стилі, скрипти й переглянуті сторінки. Повторні відкриття відбуваються майже миттєво, а каталог можна гортати навіть тоді, коли мобільний інтернет зникає. В Україні, де під час відключень світла зв’язок буває нестабільним, це відчутна перевага: покупець не бачить порожнього екрана, а оформити замовлення може, щойно з’явиться мережа.
- Статичні ресурси (стилі, шрифти, іконки) — з кешу, з оновленням у фоні.
- Сторінки каталогу — спершу з мережі, а за її відсутності — збережена версія.
- Ціни, наявність і кошик — завжди з мережі, щоб покупець не бачив застарілих даних.
PWA і SEO
PWA — це звичайний сайт, тому він індексується як сайт: кожна сторінка має свою адресу і може потрапити в пошук. Нативний застосунок такої переваги не дає — його екрани Google не ранжує як сторінки магазину.
Проблеми виникають, якщо PWA зроблено як односторінковий застосунок без серверного рендерингу: робот отримує майже порожній HTML. У Nuxt це вирішує SSR — сторінки приходять готовими, а PWA-можливості додаються поверх.
Швидкість повторних візитів завдяки кешу позитивно впливає й на Core Web Vitals. Детальніше — у статті Core Web Vitals для інтернет-магазину.
PWA для власника магазину
Ми використовуємо PWA не лише для покупців, а й для керування магазином. Адмінка в телефоні дозволяє:
- одразу отримувати пуш про нове замовлення, звернення чи відгук;
- змінювати статус замовлення і створювати ТТН Нової Пошти без комп’ютера;
- оновлювати ціни й наявність товарів у дорозі;
- дивитися продажі за день прямо з головного екрана;
- відповідати на звернення клієнтів і модерувати відгуки;
- отримувати сповіщення, коли закінчується залишок популярного товару.
Доступ захищено авторизацією та ролями: менеджер бачить замовлення, а налаштування цін і звіти — лише власник чи керівник.
Обмеження, про які варто знати
- На iPhone пуш-сповіщення працюють лише після встановлення PWA на початковий екран і починаючи з iOS 16.4.
- Safari не пропонує встановити застосунок автоматично — покупцю потрібна підказка.
- Якщо PWA довго не відкривали, iOS може очистити збережені дані, тому кошик і обране варто зберігати на сервері для авторизованих покупців.
- Немає присутності в App Store. PWA можна опублікувати в Google Play через Trusted Web Activity, а в App Store значно складніше: Apple не пропускає застосунки, що є просто обгорткою сайту.
- Обмежений доступ до Bluetooth, NFC, фонової геолокації та деяких інших функцій, особливо на iOS.
Коли PWA — правильний вибір
- У вас є постійні клієнти, які повертаються за повторними покупками.
- Ви хочете нагадувати про акції та покинуті кошики без витрат на SMS.
- Бюджет не дозволяє окремо розробляти й підтримувати застосунки для двох платформ.
- Вам потрібно швидко реагувати на замовлення, не сидячи за комп’ютером.
Для більшості магазинів фізичних товарів PWA закриває головні задачі застосунку — повторні покупки, пуші, швидкість — без окремого бюджету на дві платформи. Нативний застосунок має сенс, коли у вас уже є велика лояльна аудиторія і продукт, що виходить за межі каталогу й кошика.
Як виміряти ефект від PWA
- Кількість встановлень на головний екран.
- Частка відвідувачів, які дали дозвіл на сповіщення.
- Відкриття й переходи за кожним сценарієм пушів.
- Замовлення й виручка з пуш-сповіщень за UTM-мітками.
- Частота повторних покупок серед тих, хто встановив PWA, порівняно з іншими клієнтами.
- Кількість відписок після маркетингових повідомлень — сигнал, що їх забагато.
Чекліст запуску PWA
- Сайт працює на HTTPS і має серверний рендеринг.
- Створено manifest із назвою, іконками всіх потрібних розмірів і кольором теми.
- Налаштовано Service Worker із продуманими стратегіями кешування.
- Для режиму без мережі є власна сторінка, а не помилка браузера.
- Підказка про встановлення для iPhone і кнопка для Android з’являються в доречний момент.
- Запит на сповіщення прив’язаний до конкретної дії покупця.
- Налаштовано транзакційні пуші: статус замовлення, надходження товару.
- Посилання в пушах мають UTM-мітки, а результати видно в аналітиці.
Часті запитання
Чи потрібно публікувати PWA в App Store або Google Play?
Ні. PWA встановлюється безпосередньо з сайту. За бажання його можна додатково опублікувати в Google Play, але для роботи це не обов’язково.
Чи працюють пуш-сповіщення на iPhone?
Так, починаючи з iOS 16.4, але лише після того, як покупець додав PWA на початковий екран. Тому для власників iPhone важлива зрозуміла підказка про встановлення.
Скільки місця займає PWA на телефоні?
Зазвичай значно менше, ніж нативний застосунок: на пристрої зберігаються лише оболонка, іконки й кешовані сторінки.
Чи можна додати PWA до наявного магазину?
Технічно так, якщо сайт працює на HTTPS. Але якщо сам сайт повільний, PWA не виправить головної проблеми: першу сторінку покупець однаково завантажує з мережі.
Чи замінять пуші email-розсилки?
Не повністю. Пуш — короткий і миттєвий канал для конкретних подій, а email краще підходить для довших матеріалів і добірок. Найкраще вони працюють разом.
На якій платформі можна зробити PWA?
PWA можна додати майже до будь-якого сайту, але найкраще він працює там, де вітрина вже швидка і має серверний рендеринг. Як вибрати основу для магазину, розповідаємо в статті як вибрати платформу для інтернет-магазину.
PWA-додаток з пуш-сповіщеннями входить у кожен наш проєкт. Деталі — на сторінці розробка інтернет-магазину.