До змісту
Зв'язатися

Застосунок, PWA чи сайт: що обрати магазину

| Стаття: 3 хв читання | Техніка й безпека

PWA (progressive web app) — це вебсайт, який можна встановити на телефон як застосунок, і який уміє працювати за поганого зв'язку. Нативний застосунок — окрема програма з App Store чи Google Play. Адаптивний сайт — звичайний сайт у браузері, що підлаштовується під екран.

Простими словами

Три варіанти відрізняються тим, наскільки глибоко вони вбудовані в телефон і скільки зусиль потребують:


Адаптивний сайт

PWA

Нативний застосунок

Як знайти

Пошук, реклама, посилання

Те саме, плюс «Встановити»

Магазин застосунків, реклама

Установка

Не потрібна

Із браузера, без магазину

Через магазин

Кодова база

Одна

Одна, спільна з сайтом

Окремі для iOS та Android (або кросплатформа)

Робота без мережі

Ні

Так, частково

Так

Push-сповіщення

Ні

Так, з обмеженнями на iOS

Так

Глибока інтеграція з телефоном

Мало

Середньо

Повна

Визначення MDN: PWA — це застосунок на вебтехнологіях з досвідом, подібним до платформного; працює на різних пристроях з одного коду, встановлюється, може працювати офлайн і у фоні (MDN). Після встановлення PWA має іконку, відкривається в окремому вікні без інтерфейсу браузера (web.dev).

Обмеження PWA

web.dev прямо називає їх (web.dev): - Safari і Firefox на комп'ютері не підтримують установку PWA. - Установку PWA неможливо виконати з вбудованих браузерів багатьох застосунків (Facebook, Instagram, Gmail). Для магазину це важливо: частина трафіку з соцмереж відкривається саме там. - Реалізація Apple не має багатьох можливостей браузерів на Chromium. На iOS установку складніше показати, тому в інтерфейсі часто потрібна підказка «Як встановити». - Потрібно тестувати на кожній платформі й мати запасні варіанти.

Push на iOS працює з версії 16.4 і лише для сайтів, доданих на головний екран; дозвіл користувач дає після дії на сторінці, наприклад натискання кнопки підписки (WebKit).

Приклади збільшення конверсії та утримання (Rakuten 24, Goibibo, JD.ID) на web.dev подано як кейси компаній, а не перевірені дослідження (web.dev); тому перенесення цих цифр на інший магазин було б припущенням.

Як вирішити

Спершу питання, а не технологія.

  1. Чи достатньо швидкого мобільного сайту? Для більшості магазинів так. Основний шлях покупця «пошук, реклама, картка, оформлення» вимагає швидкого сайту й зручного чекауту: див. мобільний UX і Core Web Vitals.
  2. Чи є причина встановлення? Регулярні повторні покупки (їжа, косметика, зоотовари), програма лояльності, швидке повторне замовлення, сповіщення про статус. Тоді PWA або застосунок мають сенс.
  3. Чи є ресурси? Застосунок — це окремий продукт: розробка двох платформ, релізи, перевірка магазинами, підтримка. Дані про «скільки це коштує» залежать від проєкту; відкритих надійних нормативів немає.
  4. Чи потрібні можливості пристрою? Глибокі функції (сканування, складна робота з камерою, фоновий режим) частіше потребують нативного коду; з PWA їх набір обмежений браузером. Перевіряйте підтримку конкретних API на MDN перед рішенням.
  5. Хто вже ваші покупці? Якщо більшість приходить з пошуку та реклами один раз, застосунок їм не потрібен. Якщо є ядро постійних клієнтів, застосунок або PWA можна пропонувати їм після другої-третьої покупки, а не всім відразу.

Можливий шлях: спочатку сайт у формі PWA (маніфест, сервіс-воркер, швидкі сторінки), перевірити, чи користуються нею, і лише потім думати про нативний застосунок. Для порівняння підходів до архітектури див. також headless-комерція.

Типові помилки

  • Робити застосунок, бо «так роблять великі». Rozetka чи Prom мають іншу базу покупців.
  • Копіювати сайт у застосунок без нових сценаріїв. Нових причин ним користуватися немає.
  • Не вести окрему аналітику сайту, PWA і застосунку.
  • Закладати push як канал на всіх. Дозвіл просять після дії користувача, а не одразу при вході (WebKit).
  • Забути про оновлення: застосунок потребує постійної підтримки новими версіями ОС.

FAQ

Що таке PWA простими словами? Сайт, який можна встановити на телефон, що відкривається як застосунок і частково працює без інтернету.

Чи потрібен інтернет-магазину мобільний застосунок? Не обов'язково. Він виправданий, коли є регулярні повторні покупки та лояльна аудиторія, а мобільний сайт уже швидкий.

Чи працює PWA на iPhone? Так, з обмеженнями: установка складніша, набір функцій менший, push лише для доданих на головний екран сайтів з iOS 16.4 (web.dev, WebKit).

PWA чи нативний застосунок дешевший? PWA має одну кодову базу зі спільними технологіями сайту (MDN); конкретні витрати залежать від проєкту.

Пов'язані терміни

Джерела

Хочете перевірити це на своєму магазині?

Розробка e-commerce

Індивідуальні e-commerce рішення та інтеграції: від доопрацювань до складних систем.

Про послугу →

Поділитися

Читайте також

  • Хостинг, CDN і піки навантаження

    | Стаття: 4 хв читання

    Хостинг — це сервер (або хмара), на якому працює магазин. CDN (content delivery network) — мережа серверів по світу, що віддає частину сайту (картинки, скрипти, іноді сторінки) з точки, ближчої до покупця. Разом вони визначають, чи витримає сайт розпродаж і…

  • Резервні копії інтернет-магазину

    | Стаття: 3 хв читання

    Резервна копія — це збережена окремо копія сайту, бази даних (товари, замовлення, клієнти) і файлів, з якої можна відновити магазин після збою, помилки чи зламу. Копія має сенс лише тоді, коли відновлення з неї перевірено.

  • Боти й парсинг цін в інтернет-магазині

    | Стаття: 3 хв читання

    Боти — це програми, які автоматично відвідують сайт. Частина корисна (пошукові роботи), частина шкідлива: парсинг копіює ціни й каталог, credential stuffing перебирає вкрадені логіни, боти-скальпери скуповують дефіцит, а тестувальники карток перевіряють…

  • Шахрайство з оплатами та 3-D Secure

    | Стаття: 4 хв читання

    Шахрайство з оплатами в інтернет-магазині — це спроба отримати товар чи гроші за допомогою чужих карткових даних, обману покупця або недобросовісного оскарження платежу. 3-D Secure (3DS) — протокол, за яким банк-емітент додатково перевіряє, що картку…