Що таке PWA додаток?

В епоху мобільного інтернету та високих очікувань користувачів від онлайн-сервісів дедалі більшої популярності набирають Progressive Web Apps (PWA) - прогресивні веб-додатки. PWA поєднують у собі найкращі якості веб-сайтів і нативних мобільних додатків, пропонуючи швидкий, надійний і захопливий користувацький досвід.

За даними Google, в середньому PWA забезпечують на 50% більше конверсій, ніж традиційні додатки або мобільні версії сайтів. При цьому PWA в 3-4 рази легші за розміром, ніж нативні застосунки і можуть заощадити користувачам до 80% мобільного трафіку завдяки вбудованому кешуванню.

Не дивно, що до 2024 року, за прогнозами експертів, частка PWA серед усіх мобільних застосунків може досягти 30%, а обсяг ринку перевищить 10 млрд доларів. Уже зараз багато лідерів e-commerce, медіа та онлайн-сервісів, такі як AliExpress, Forbes, Twitter, Tinder успішно використовують PWA для охоплення мобільної аудиторії.

У цій статті ми детально розберемо феномен PWA, його технологічні основи, переваги для бізнесу та приклади реалізації. Наша мета - дати повне уявлення про потенціал прогресивних веб-застосунків для поліпшення користувацького досвіду та бізнес-метрик у різних індустріях.

Що таке PWA додатки

Progressive Web Apps (PWA) - це веб-додатки, що використовують сучасні можливості браузерів і веб-платформи для забезпечення надійної, швидкої та захопливої роботи на будь-яких пристроях. PWA спираються на ключові принципи:

• Прогресивність - працюють для будь-якого користувача незалежно від браузера.
• Адаптивність - підлаштовуються під розмір екрана і форм-фактор пристрою.
• Незалежність від з'єднання - працюють автономно або за нестабільного інтернет-з'єднання.
• Актуальність - завжди містять останню версію завдяки процесу оновлення.
• Безпека - обслуговуються через HTTPS для запобігання перехоплення даних.
• Виявленість - ідентифікуються як "додатки" завдяки маніфесту і сервіс-воркеру.
• Можливість залучення - дають змогу легко зберегти іконку на домашньому екрані без магазинів.
• Здатність залучення - полегшують повторне залучення через функції пуш-повідомлень.

Інакше кажучи, PWA привносять багато переваг нативних застосунків у веб з метою поліпшити досвід користувачів:

• Швидке завантаження навіть при повільному з'єднанні завдяки попередньому кешуванню ресурсів.
• Чуйний інтерфейс із плавною анімацією і швидкою навігацією, подібною до нативних додатків.
• Робота в повноекранному режимі без вікна браузера як у справжнього додатка на пристрої.
• Можливість встановлення на домашній екран в один клік безпосередньо з браузера.
• Пуш-повідомлення, що підвищують залученість і конверсії навіть поза додатком.
• Доступ до камери, геолокації, вібрації та інших функцій пристрою після явного дозволу.

При цьому PWA зберігають ключові переваги вебу:

• Не вимагають встановлення з магазинів додатків і сумісні з будь-якими пристроями.
• Миттєво доступні за URL без скачування, що покращує конверсію з пошукових систем і реклами.
• Швидко оновлюються у всіх користувачів без ручних дій з їхнього боку.
• Важать у середньому в 4 рази менше, ніж нативні додатки, економлячи пам'ять пристрою.
• Можуть бути легко виявлені пошуковими системами і проіндексовані.

Порівняємо деякі характеристики PWA з нативними додатками і звичайними сайтами:

Як видно PWA поєднують у собі найкраще з двох світів - нативний досвід і можливості платформи з миттєвим доступом до вебу. Це створює потужний інструмент для бізнесу, який хоче підвищити зручність і конверсію своїх мобільних користувачів, не втрачаючи при цьому охоплення аудиторії та органічний трафік.

Технічні основи PWA

В основі функціонування PWA лежать три ключові веб-технології: Service Worker, Web App Manifest і протокол HTTPS.

Service Worker - це JavaScript скрипт, що працює у фоновому режимі браузера незалежно від веб-сторінки. Він дає змогу перехоплювати мережеві запити, керувати кешуванням і реалізовувати багато функцій нативних додатків.

Основні завдання Service Worker:

1. Кешування ресурсів для швидкого завантаження і доступу до контенту при повільному з'єднанні або в офлайні. Service Worker може зберігати в кеш статичні файли (HTML, CSS, JS, зображення), API відповіді та динамічні сторінки після першого відвідування.
2. Перехоплення і модифікація мережевих запитів. Наприклад, Service Worker може підміняти застарілі JS і CSS файли на актуальні версії з кешу, запобігаючи завантаженню зайвих даних. Або повертати з кешу збережені сторінки під час офлайн-доступу.
3. Проактивне надсилання пуш-повідомлень користувачам, навіть коли браузер закритий. Це дає змогу інформувати про важливі події, акції або оновлення контенту.
4. Фонова синхронізація даних при появі інтернет-з'єднання. Наприклад, якщо користувач заповнив форму або зробив замовлення в офлайн-режимі, Service Worker може автоматично надіслати ці дані на сервер, щойно з'явиться мережа.

Web App Manifest - це JSON файл, який описує метадані PWA для операційної системи пристрою. Він дає змогу вказати ім'я додатка, іконки, колірну схему, орієнтацію екрана та інші параметри відображення PWA під час встановлення на домашній екран.

Приклад маніфесту:

{
"name": "Моё приложение",
"short_name": "Моё приложение",
"description": "Лучшее PWA для вас!",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"theme_color": "#f9d423",
"background_color": "#ffffff"
}

Щоб браузер розпізнав PWA і запропонував встановити іконку на екран, маніфест потрібно вказати в тезі link:

<link rel="manifest" href="/manifest.json">

Водночас усі ресурси PWA - сторінки, скрипти, стилі та маніфест - мають передаватися за протоколом HTTPS, щоб гарантувати безпеку та конфіденційність даних користувача. Service Worker може бути зареєстрований тільки на захищених з'єднаннях.

3. Функціональні можливості PWA

Комбінація сучасних веб-технологій дає змогу реалізувати в PWA багато можливостей нативних застосунків:

Встановлення на домашній екран. Завдяки маніфесту, користувачі можуть додати іконку PWA на робочий стіл смартфона або в меню "Пуск" на ПК прямо з браузера в 1-2 кліка. При запуску звідти PWA відкриється в повноекранному режимі, як звичайний додаток.

Робота в офлайн режимі. Service Worker може кешувати критично важливі ресурси під час першого відвідування, щоб вони були доступні без інтернет-з'єднання. Наприклад, PWA магазину може показувати товари і приймати замовлення навіть в офлайні, а потім синхронізувати дані при появі мережі.

Пуш-повідомлення. Service Worker вміє отримувати пуш-повідомлення з сервера і показувати їх користувачеві, навіть коли PWA закрито. Це може в рази підвищити повторні відвідування і конверсії. Але спочатку потрібно запросити дозвіл на повідомлення.

Індикація нових подій. Значок PWA на екрані може показувати лічильник непрочитаних повідомлень або повідомлень. Так користувач завжди буде в курсі важливих оновлень.

Фонова синхронізація. Якщо користувач здійснив дію в PWA без інтернету (наприклад, надіслав повідомлення в чаті), Service Worker може автоматично повторити запит, коли мережа з'явиться. Це створює відчуття безшовної роботи застосунку.

Доступ до системних API. PWA можуть використовувати багато нативних можливостей пристрою, якщо користувач дасть на це дозвіл:

• Геолокація - для показу карт, навігації або вибору найближчих магазинів/сервісів
• Камера - для сканування QR/штрих-кодів, завантаження фото профілю або товарів
• Мікрофон - для голосового введення, пошуку або спілкування
• Датчики освітлення та наближення - для керування яскравістю та вимкнення екрана
• Bluetooth - для взаємодії з пристроями IoT, годинником, колонками
• Файлова система - для скачування контенту і роботи з документами
• Буфер обміну - для копіювання/вставки тексту та зображень
• Вібрація - для тактильної реакції на дії

Оплата всередині програми. PWA можуть інтегрувати API платіжних систем і сервісів, таких як Google Pay, Apple Pay, PayPal, Stripe, для прийому оплати без перезавантаження сторінки. Це радикально спрощує процес покупки і підвищує конверсію.

Але є й обмеження того, що можуть PWA порівняно з нативними додатками:

• Відсутність доступу до деяких системних функцій - дзвінки, SMS, контакти, NFC тощо.
• Немає можливості роботи у фоновому режимі, крім надсилання повідомлень
• Менше місця для зберігання даних (квота PWA в середньому 50Мб проти 200Мб у нативних)
• Неможливість повноцінної роботи в офлайні для додатків із динамічним контентом

Однак можливостей PWA в більшості випадків вистачає, щоб закрити основні потреби користувачів. А у 2023 році з'явилися нові API для файлового доступу, медіасесій, редагування зображень і надсилання SMS, що ще більше знижує розрив між PWA і нативними застосунками.

• Меньше места для хранения данных (квота PWA в среднем 50Мб против 200Мб у нативных)
• Невозможность полноценной работы в офлайне для приложений с динамическим контентом

Однако возможностей PWA в большинстве случаев хватает, чтобы закрыть основные потребности пользователей. А в 2023 году появились новые API для файлового доступа, медиа сессий, редактирования изображений и отправки SMS, что еще больше снижает разрыв между PWA и нативными приложениями.

Ключові переваги PWA

Завдяки прогресивним веб-технологіям PWA додатки забезпечують безліч переваг як для користувачів, так і для бізнесу. Згідно з дослідженням Google, середній час завантаження PWA становить 2,75 секунди, що у 8 разів швидше за середній нативний додаток (22 секунди). Це досягається за рахунок попереднього кешування ресурсів Service Worker'ом і зменшення розміру додатка. Середній розмір PWA - 300 КБ проти 20 МБ у нативного додатка, що в 15 разів економить мобільний трафік користувачів.

Завдяки інтелектуальному кешуванню Service Worker, PWA залишаються доступними і функціональними навіть при повільному інтернеті або повній його відсутності. Дослідження Gartner показало, що додавання офлайн режиму збільшило конверсії PWA магазинів на 15%. PWA забезпечують зручність використання інтерфейсу, яку можна порівняти з нативними додатками - швидкі переходи, анімації, робота в повноекранному режимі. Це спонукає користувачів проводити більше часу і здійснювати цільові дії. Наприклад, PWA Aliexpress збільшило конверсії в покупку на 104% у порівнянні з мобільним сайтом. А у Lancôme конверсія в PWA на 17% вища, ніж у застосунку.

Можливість встановлення іконки на робочий стіл в один клік підвищує видимість PWA - воно завжди на очах у користувача. У поєднанні з пуш-повідомленнями це збільшує повторні відкриття застосунку. Наприклад, у eXtra Electronics іконку PWA додали на 250% більше користувачів, ніж встановили застосунок із Google Play.

На відміну від нативних застосунків, PWA не вимагають публікації та схвалення в магазинах застосунків. Їх легко поширювати за URL-посиланням у рекламі, соцмережах, e-mail розсилках і результатах пошуку. При цьому PWA індексуються пошуковими системами, на відміну від нативних додатків. Наприклад, індексація PWA Nikkei призвела до зростання органічного трафіку в 2,3 раза.

Створення PWA обходиться в середньому в 3 рази дешевше, ніж нативного застосунку, завдяки використанню єдиної веб-технології замість кількох нативних платформ (Android, iOS). При цьому PWA працює на всіх сучасних пристроях і не вимагає постійних оновлень у магазинах додатків. Це знижує витрати на розробку на 75% і на підтримку на 33% порівняно з нативними додатками.

Області застосування PWA

PWA додатки універсальні і можуть використовуватися в найрізноманітніших сферах бізнесу, де важливі зручність користувачів і продуктивність:

• Інтернет-магазини та маркетплейси. PWA ідеально підходять для e-commerce, забезпечуючи швидкий і безшовний шопінг на мобільних. Приклади: AliExpress, eXtra Electronics, Jumia, Lancôme, Levi's.
• Медіа та новинні портали. PWA дають змогу швидко завантажувати контент, зберігати його для офлайн-читання та отримувати пуш-повідомлення про свіжі новини. Приклади: Forbes, Nikkei, The Washington Post, Telegram.
• Сервіси замовлення їжі та доставки. PWA відмінно працюють для вибору ресторанів, формування замовлення і відстеження доставки. Приклади: Starbucks, Burger King, Domino's Pizza, FoodPanda.
• Туристичні та транспортні додатки. PWA зручні для пошуку та бронювання квитків, готелів, перегляду розкладів і повідомлень про зміни. Приклади: Booking.com, Aviasales, Trenitalia, Airbnb.
• Соціальні мережі та месенджери. PWA забезпечують швидкий доступ до стрічок, повідомлень, можливість ділитися контентом і отримувати повідомлення. Приклади: Twitter, Pinterest, Instagram, TikTok.
• Стрімінгові сервіси та онлайн-кінотеатри. PWA дають змогу дивитися відео, слухати музику і подкасти з мінімальною буферизацією. Приклади: YouTube, Spotify, SoundCloud, Netflix.
• Банки та фінтех. PWA безпечно проводять платежі, перекази, показують баланс і транзакції навіть за слабкого інтернету. Приклади: Monzo, Barclays, Tinkoff, Halyk Bank.

Крім того, PWA використовують у сферах страхування, нерухомості, охорони здоров'я, фітнесу, освітніх платформ, для корпоративних порталів і внутрішніх систем компаній. Скрізь, де потрібен швидкий, зручний і надійний доступ з мобільних пристроїв.

За даними CMS Magazine, понад 65% населення України віком 14-70 років є інтернет-користувачами, більшість з яких використовують смартфони. При цьому кількість установок нативних застосунків в Україні за 2022 рік знизилася на 19%.

На цьому тлі PWA виглядають перспективною альтернативою для розвитку мобільної присутності українського бізнесу та охоплення аудиторії. Тим більше, враховуючи нестабільність мобільного інтернету в країні через проблеми інфраструктури. Багато українських компаній - Allo, Comfy, Bank Vostok, Prom.ua, SkyUp вже успішно запустили PWA-версії своїх сервісів поряд із нативними застосунками.

Тож, якщо ваш бізнес ще не має зручного мобільного рішення або ви роздумуєте над альтернативою поточному застосунку - час серйозно придивитися до технології PWA. Це може відкрити нові горизонти для зростання вашого mobile first продукту за мінімальних витрат на розробку та підтримку.

Приклади успішного використання PWA

Розглянемо кілька кейсів відомих брендів, які досягли вражаючих результатів завдяки впровадженню PWA.

AliExpress

Один з найбільших маркетплейсів у світі AliExpress запустив PWA-версію своєї платформи на додаток до сайту і нативних додатків у 2016 році. Метою було підвищити конверсію і залученість користувачів з мобільного вебу.

Результати AliExpress PWA:

• Збільшення конверсії в покупку на 104%
• Зростання показника часу, проведеного на сайті, на 74%
• Підвищення кількості переглянутих сторінок за сесію на 14%

Ключовими факторами успіху стали майже миттєве завантаження сторінок (~1 сек), можливість покупок в один клік, пуш-повідомлення про акції та знижки, а також зручний пошук і фільтрація товарів у PWA.

Lancôme

Французький бренд косметики класу люкс Lancôme вирішив створити PWA, коли виявив, що мобільний сайт приносить у 2 рази менше конверсій, ніж десктопна версія, а нативний додаток має невелику базу користувачів.

Ефект від запуску PWA Lancôme:

• Збільшення конверсії на 17% порівняно з додатком
• Зростання мобільних сесій на 51%
• Скорочення часу до інтерактивності на 84%

Адаптивний інтерфейс PWA, кешування даних і оптимізація критичних ресурсів дали змогу радикально прискорити роботу сайту на смартфонах. А додавання пошуку за фото, відео-консультацій і персоналізованих рекомендацій зробили процес вибору і купівлі косметики в PWA зручним і захопливим.

Twitter

Популярна соцмережа Twitter була однією з перших, хто експериментував з PWA, запустивши полегшену версію Twitter Lite у 2017 році для країн, що розвиваються, з повільним інтернетом.

Статистика Twitter Lite PWA:

• Збільшення кількості твітів на 75%
• Зростання кількості переглянутих сторінок на 65%
• Зменшення відмов на 20%

"Легкий" розмір PWA (600 КБ проти 23.5 МБ у додатку Android), швидка навігація і можливість персоналізації інтерфейсу спонукали користувачів проводити більше часу і генерувати більше контенту в PWA.

Серед інших успішних прикладів PWA - Pinterest, Starbucks, Tinder, Forbes, Aviasales, Ola Cabs, Tinder, Book My Show та багато інших. У кожному кейсі впровадження PWA призводило до помітного поліпшення ключових метрик - конверсій, залученості, утримання та продуктивності.

Майбутнє PWA і тренди розвитку

Хоча технологія PWA не нова, саме зараз вона набирає популярності у бізнесу. Цьому сприяє прогрес веб-стандартів, зростаюча продуктивність пристроїв і browsers, а також нове покоління користувачів, які віддають перевагу мобільним і легким інтерфейсам.

Ключові тренди, які визначатимуть розвиток PWA в найближчі роки:

Розширення можливостей Web API. Провідні технологічні компанії, такі як Google, Microsoft, Samsung вкладають значні ресурси в розробку нових програмних інтерфейсів та інструментів для вебу. Такі API як File System Access, Web Bluetooth, Contact Picker, Idle Detection, Screen Wake Lock та інші поступово стирають межу між PWA і нативними додатками.

Інтеграція з екосистемами пристроїв. PWA застосунки більш глибоко інтегруватимуться з апаратними можливостями пристроїв та їхніми операційними системами. Наприклад, взаємодіятимуть з "розумною" домашньою технікою, фітнес-браслетами, VR/AR обладнанням. Також PWA зможуть краще працювати у фоні, отримувати доступ до файлів, зберігати більше даних офлайн.

Платформи для створення та дистрибуції PWA. Багато популярних платформ електронної комерції (Shopify, Magento, WooCommerce), системи управління контентом (WordPress, Drupal, Joomla) і конструктори сайтів (Wix, Squarespace) вже пропонують PWA як частину своїх рішень "з коробки". У майбутньому такі PWA-платформи стануть ще більш поширеними та доступними для масового використання.

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

Адаптація бізнес-моделей. Багато компаній перейдуть від класичної моделі окремого сайту і нативного застосунку до омніканальної моделі PWA, яка охоплює користувачів на будь-яких платформах. PWA додатки будуть основою для програм лояльності, вибудовування довгострокових відносин з клієнтами, реалізації підписок і транзакційних сценаріїв.

Згідно з прогнозом Grand View Research, світовий ринок PWA зросте до $10.44 мільярда до 2027 року, показуючи середньорічні темпи зростання 31.9%. При цьому кількість смартфонів у світі перевищить 7.5 мільярдів.

Це означає, що дедалі більше бізнесів бачитимуть у PWA ефективний спосіб досягти й утримати мобільну аудиторію. А розвиток можливостей веб-застосунків зробить їх дедалі функціональнішими і зручнішими.

Тож якщо ви ще не розглядали PWA як канал залучення та обслуговування клієнтів, саме час це зробити. Тренд на заміщення традиційних сайтів і застосунків на прогресивні веб-додатки тільки посилюватиметься. І що раніше ви освоїте цю технологію, то більшу конкурентну перевагу отримаєте.