В кінці червня Stfalcon організував ряд зустрічей у Києві, одна з яких була присвячена розробці прогресивних веб-застосунків. Прогресивні веб-застосунки — це технологія та термін, який з'явився у 2015 році, однак багато людей, навіть експерти, досі мають досить розмите уявлення про це. Саме тому ми вирішили, що це буде цікаво як професіоналам у цій сфері, так і нашим клієнтам та аудиторії. У нас відбулася досить цікава дискусія та подія в цілому, з багатьма висновками, інсайтами та натхненням в кінці.
Отже, давайте розглянемо, що таке PWA і чи варта розробка прогресивних веб-застосунків витрат.
Що таке PWA?
По-перше, звернемося до офіційного визначення, наданого Google, інтернет-гігантом, який називає PWA користувацьким досвідом, що виходить за межі вебу. Згідно з developers.google, такі рішення є надійними, швидкими та залучаючими. Здається, що це описує лише якості, які мають застосунки, проте визначення не розкриває справжню сутність прогресивних веб-застосунків.
Чи є PWA абстрактними шаблонами, чи вони включають багато технічних підходів одночасно, що робить їх такими розмитими?
Насправді, вони охоплюють стек таких технологій, як JavaScript, HTML та CSS. Вони деякий час залишалися на периферії, залишаючись непомітними для звичайних користувачів і навіть деяких IT-фахівців.
Вас цікавить, чому розробка прогресивних застосунків залишалася непоміченою?
PWA схожі на звичайні сайти, принаймні вони починають своє життя як звичайні вкладки. Проте вони створюються за допомогою таких функцій, як TLS, Service Workers, Manifests, і їхній дизайн адаптивний. Вони дотримуються моделі дозволу запитувати, коли це потрібно. У момент, коли браузер впевнений, що ви часто використовуєте вебсайт у формі прогресивного застосунку, з'являється запит додати його на домашній екран або в лаунчер застосунків.
Таким чином, хоча вони не упаковані та не пропонуються в магазинах для завантаження, веб-застосунки такого типу можуть зберігатися на домашніх екранах і додаватися в області сповіщень.
Це новий якісний рівень, який дозволяє PWA зайняти місце на домашньому екрані. Потім вони інтегруються в середовище і можуть працювати на повноекранному режимі онлайн або офлайн, коли запускаються з нього.
Отже, сучасні сайти поступово стають «застосунками», хоча надають набагато кращий UX, ніж звичайні веб-застосунки.
Як їм вдається забезпечити винятковий UX?
Однією з основних особливостей PWA є їхня надійність. Вони продовжують працювати навіть за слабких мережевих умов. Користувачі ніколи не бачать динозавра, оскільки ключові ресурси попередньо кешуються сервісними працівниками, і це усуває залежність від мережі. PWA завантажуються миттєво в будь-якому випадку.
Швидкість — ще одна ключова перевага веб-застосунків, вони завжди забезпечують швидкі відповіді на дії користувачів через плавну анімацію, крім того, прокручування не потрібне. Це критично важливо, оскільки більше 50% користувачів залишають сайти, які завантажуються довше трьох секунд.
Залучення — це також важлива функція. Кожен PWA виглядає як природний додаток, він пропонує інтерфейс на весь екран і можливість повторного залучення користувачів за допомогою push-сповіщень.
Крім того, користувачі можуть регулювати, як виглядає та запускається додаток, вказуючи іконку, яку вони хочуть бачити, сторінку, що завантажується при відкритті додатка, орієнтацію екрану та певні інші параметри.
Які виклики?
Незважаючи на ряд переваг (офлайн-режим, схожість з додатком, але робота як сайт, швидке завантаження сторінок на мобільних пристроях, краща продуктивність, push-сповіщення тощо), у PWA є певні труднощі, про які варто знати.
1. Обмежена функціональність. Хоча PWA імітує нативний додаток, йому часто бракує певних важливих функцій. Доступ до GPS, NFC, сканера відбитків пальців, управління камерою та деяких інших технологій обмежений.
2. Швидка розрядка батареї. Використання прогресивних додатків швидше розряджає батарею гаджета, ніж нативні додатки.
3. Втрата трафіку. PWA не розповсюджуються через магазини, тому втрачають трафік, який міг би бути отриманий з App Store або Google Play. Це може бути досить суттєво.
4. Обмеження iOS. Зараз існують певні труднощі з використанням PWA на пристроях Apple, функції, доступні на Android, часто відсутні на iOS, наприклад, push-сповіщення та ярлики на домашньому екрані.
5. Потрібні нові інструменти та парадигми. Прецеденти розробки прогресивних веб-додатків все ще не поширені, тому, розглядаючи створення такого додатка, слід пам'ятати, що це вимагає архітектури додатка, управління подіями, станом та кешуванням. Уся робота, необхідна для створення додатка, повинна виконуватися для вебу, тому нові інструменти та підходи потрібно освоїти.
6. Відсутність рішень з відкритим кодом. Прогресивні генератори займаються лише найпростішими аспектами створення PWA, такими як створення маніфесту або базові функції ServiceWorkers, однак інтеграція з основними платформами електронної комерції та маркетингу або іншими компонентами, оптимізованими для швидкості та конверсії, вимагатиме певних зусиль.
7. Швидкість не приходить автоматично. Швидкий запуск вимагає складного розуміння продуктивності мобільного вебу та правильного впровадження необхідних функцій.
8. Підтримка оновлень. Веб-функції запускаються та оновлюються з безпрецедентною швидкістю: пришвидшені мобільні сторінки, нативні платежі, API управління обліковими даними тощо. Це може призвести до певних викликів, і розробники повинні передбачати та намагатися усунути труднощі заздалегідь.
9. Аналітика не є простою. Існуючі інтеграції сторонніх розробників, такі як аналітика, не призначені для роботи в контексті PWA, тому вам потрібна платформа, щоб вирішити такі проблеми.
Чому варто розробляти прогресивні веб-додатки?
Створення прогресивного додатка високої якості може мати неймовірні переваги, збільшуючи залучення користувачів і, відповідно, конверсії.
По-перше, вони завжди під рукою у користувача. Крім того, залучення зростає майже в 4 рази з push-сповіщеннями.
Оскільки для завершення транзакцій потрібно менше даних, конверсії також зростають. Щоб бути суттєвими, давайте перевіримо ключові факти та цифри з дослідження ефективності PWA.
- Зростання трафіку з мобільних пристроїв перевищило 68%.
- PWA завантажується та встановлюється до 15 разів швидше, ніж звичайний додаток.
- PWA потребує у 25 разів менше місця для зберігання.
- Зростання конверсій перевищило 52%.
- Час, проведений на сайті, зріс майже на 80%.
- Залучення користувачів зросло в середньому на 137%.
- Час завантаження сторінки становить приблизно 2.75 секунди.
- Відсоток відмов зменшився більш ніж на 40%.
Мобільні користувачі в основному віддають перевагу застосункам через швидкий інтерфейс і простоту використання на малих екранах. Прогнозується, що до 2022 року завантаження додатків зросте до 45%, але прогресивна веб-розробка дозволяє імітувати розумність мобільного додатку, не обмежуючись системою пристрою.
Низька вартість розробки — ще один фактор, що говорить на користь розробки прогресивних веб-додатків. Коли ви створюєте прогресивний веб-додаток, не потрібно кілька версій для різних платформ. PWA може працювати на будь-якому кінцевому пристрої, тому вартість розробки значно зменшується в порівнянні з створенням нативних додатків.
Які відомі прогресивні веб-додатки?
AliExpress.
Ідеальним прикладом прогресивного веб-додатку є веб-сайт Alibaba Group, який був перетворений на PWA кілька років тому. Існувало дві причини для цього: веб-сайт не зміг залучити мобільних користувачів, тоді як мобільна версія не перетворювала відвідувачів на користувачів додатку.
Результатом стало значне покращення UX та загальної продуктивності сайту. AliExpress зафіксував:
- майже 75% зростання часу, проведеного за сесію,
- вдвічі більше відвідувань сторінок за сесію,
- 104% зростання конверсій.
Відомий американський бізнес-журнал нещодавно розробив прогресивний веб-додаток. Проте це вже призвело до:
- 100% зростання рівнів залучення,
- 43% зростання сесій на одного користувача,
- 20% більше показів на сторінку,
- в 6 разів більше користувачів, які завершують статті.
Скріншоти Lancôme, Forbes, Ali
Lancôme.
Розкішний косметичний бренд з Франції, який представлений у всьому світі, помітив низькі конверсії через мобільний сайт у порівнянні з десктопною версією.
Бажаючи бути в тренді, вони інвестували в PWA, щоб створити кращий і швидший мобільний досвід для відвідувачів і зменшити відсоток відмов. Додатково були впроваджені push-сповіщення та інші функції.
Результат:
- більше ніж 50% зростання мобільних сесій,
- майже на 85% менше часу, необхідного для інтерактивності сторінки,
- 15% нижчий відсоток відмов,
- 17% більше конверсій,
- 8% зростання конверсій у кошиках, відновлених через push-сповіщення.
Заключні думки
Наразі PWA перебувають на передовій онлайн-технологій та об'єднують різні платформи, інструменти та практики, крім того, вони приваблюють користувачів. Деякі бренди вже скористалися можливістю та надали своїй аудиторії передовий досвід використання прогресивних застосунків. Будучи відкритими до інновацій, вони отримали фантастичні результати, і ми вважаємо, що настав час приєднатися до піонерів і використати технологічний прогрес на свою користь.
Окрім кращої конверсії та залучення користувачів, інноваційні PWA пропонують скорочення термінів випуску та мінімізацію загальних витрат. Хоча вони ще не підтримуються на всіх браузерах або програмному забезпеченні, прогрес сьогодні йде з надзвичайно швидким темпом, тому команда Stfalcon впевнена, що ці бар'єри незабаром будуть подолані.
Якщо у вас ще є питання щодо того, як створити прогресивні веб-застосунки — давайте розберемося в цьому на практиці разом.
