ru ua en
c l o c k
Progressive Web Apps для просування сайту
20 April 2019
блог

Progressive Web Apps для просування сайту

Про нову технологію, її переваги, недоліки і особисті враження від роботи з PWA розповів фронтенд-розробник Clock Creative Lab Ігор Гонтаренко.

Progressive Web App (PWA) - новий більш зручний і легкий формат програми. При використанні PWA не відрізниш від традиційного нативного. Його виділяють лише кілька додаткових переваг:

  • миттєво завантажується,
  • займає менше пам'яті,
  • не потрібно оновлювати і завантажувати з магазинів IOS App Store або Google Play Store,
  • працює на будь-яких пристроях (навіть на старих ПК).

Як працюють прогресивні веб-додатки

Progressive Web App для Mercedes-Benz

Кілька місяців тому ми розробили і запустили новий сайт для Mercedes-Benz «Автоцентр на Кільцевій». І тепер оптимізували його під функції прогресивного веб-додатку.

Перш ніж докладно пояснити численні сильні сторони і поговорити про незначні недоліки технології, покажу її в роботі на прикладі проекту Mercedes-Benz.


Переваги Progressive Web App

PWA для бізнесу

  1. Спрощення роботи і скорочення витрат в три рази. Зробити це дозволяє мультиплатформеність - важлива складова успішної веб-технології. У нативних додатках її забезпечували окремі незалежні кодові бази. З PWA більше не потрібно витрачатися на їх створення. Технологія має єдиний код і працює на будь-якій платформі, де є браузер. Доступна навіть на старих ПК, але з обмеженим функціоналом. Крім більш скромного бюджету на ділі це означає, що отримати ефективний сайт і додаток компаніям тепер простіше. Раніше потрібно було наймати три команди розробників для створення: веб-ресурсу, нативного додатки під платформу iOS і додатки для Android. Складати для кожної технічне завдання і курирувати освоєння бюджетів. Так було тому, що для Desktop, iOS і Android необхідне знання різних мов програмування. З появою PWA досить єдиного ТЗ і однієї команди веб-розробників. Вони створять сайт і підключать його до прогресивного інтернет-додатку.
  2. Додаткове SEO-просування вашого сайту. Швидкість завантаження у PWA вище, ніж у веб-ресурсу. З літа поточного року Google враховує цей фактор і першими у видачі мобільного пошуку показує більш швидкі сайти. Клікабельність також безпосередньо залежить від часу, витраченого на завантаження.

Так, на хостингу зображень Pinterest в результаті скорочення часу очікування на 40%, трафік збільшився на 15%, а коефіцієнт конверсії до реєстрації - на 15%.

Згідно з дослідженнями Google про PWA:

  • На 20% збільшилася частка інтернет-сеансів на мобільних пристроях після впровадження технології.
  • На 18% зменшилася тривалість відвідувань.
  • На 29% зріс коефіцієнт мобільної конверсії.
  • 53% користувачів швидше закриють сайт, якщо його завантаження триває більше 3-х секунд. Мінімум 5 секунд займає скачування 1МБ при стандартному 3G підключенні за даними WebPageTest і DevTools.

Також у прогресивних веб-додатків кращі умови конкуренції. Їм не доводиться, як нативним, сусідити з тисячами подібних в IOS App Store або Google Play Store. Користувач може перейти на PWA з соцмереж, пошукової видачі або месенджерів.

3. Немає необхідності слідувати правилам App Store і Google play, оскільки вам більше не потрібні їх магазини для розміщення свого застосування.

4. Робота тільки з зацікавленою аудиторією. Встановити прогресивний веб-додаток пропонують тільки при повторному відвідуванні сайту. Так відсіюється значна частина «випадкових» відвідувачів.

5. Підвищення конверсії за рахунок push-повідомлень і зручності використання PWA на мобільних пристроях. Більше половини інтернет-користувачів виходять в мережу через смартфон, згідно з даними на перший місяць 2018 року. Клієнти і ваш бізнес стануть ще ближче, завдяки унікальним можливостям Progressive Web App.

        

PWA для користувачів

  1. Мультиплатформеність. Прогресивний інтернет-додаток можна завантажити на будь-яких digital-пристроях в Google Chrome, Opera, Mozilla Firefox і браузерах Microsoft. Немає вимог за технічними можливостями і параметрами гаджетів.
  2. Ненав'язливість. Встановити PWA пропонують тільки після того, як ви проявили первинний інтерес при першому відвідуванні сайту.
  3. Не потрібно завантажувати з магазинів. Досить один раз нажати на кнопку у спливаючому діалоговому вікні.
  4. Миттєва завантаження. «Важкі» компоненти кешуються при першому відвідуванні веб-ресурсу.
  5. Мало важить (до 200Kb). Економно використовувати пам'ять пристрою дозволяє застосування можливостей браузера.
  6. Доступ в один клік на головному екрані або через push-повідомлення. «Пуші» не дадуть вам упустити товар, який сподобався, коли він з'явиться в наявності. І регулярно будуть повідомляти про нові продукти, що відповідають вашим інтересам.
  7. Автоматичне оновлення. У PWA-додатках без вашої участі з'являються все оновлення сайту.
  8. Мінімальна швидкість завантаження - менше, ніж за секунду.
  9. Робота з сайтом при відсутності мережі. Ви зможете отримати доступ до останньої версії контенту на цікавому веб-ресурсі через Progressive Web App навіть оффлайн. У такому режимі відкриється збережена версія сайту.

Недоліки Progressive Web Apps

Для розробників. Єдиний недолік - новизна технології. Прогресивні веб-додатки з'явилися всього близько року тому. І в мережі поки є порівняно мало інформації про роботу з PWA.

Для користувачів. На браузері Safari в iOS немає простоти роботи з додатком «в один клік», як в Google Chrome на Android. Потрібно застосувати більше маніпуляцій, щоб встановити PWA. Вручну виконується додавання іконки на робочий стіл. Це відштовхує частину потенційної аудиторії.

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

Нативні додатки і PWA: коли потрібні обидві технології

Багато великих світових компаній сьогодні працюють зі своїми клієнтами через два типи додатків - нативні і PWA. Відмова від перевіреної технології на користь нової поки виглядає занадто ризикованим. На цьому етапі Progressive Web App виступає непоганою альтернативою Натів. І великі компанії, як Uber, Twitter, Starbucks, Aviasales, Google Maps, Tinder, і AliExpress, дають своїм клієнтам можливість вибирати.

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

Ефективність PWA для бізнесу - реальні кейси компаній


Facebook

+43% інтернет-сеансів на одного користувача

+20% просматриваемость рекламних оголошень

+100% залучення

3Х збільшення глибини скролінгу

Lancôme

+17% вище конверсія

+8% повернення до колишніх кошикіх через push-повідомлення

+53% мобільних сеансів на iOS

MakeMyTrip

+38% швидше завантаження сторінки

+160% сеансів покупців

3Х вище конверсія

AliExpress

+82% конверсия на iOS

+74% тривалість сеансів

2Х більше відвіданих сторінок для кожного користувача в усіх браузерах

Прогресивні веб-додатки: підсумки і перспективи

Progressive Web App, завдяки досягненням в розробці браузерів, об'єднали функціонал нативного додатку, простоту установки і легкість завантаження сайту. Технологія також виступає потужним інструментом seo-просування. Сьогодні PWA - це прямий шлях в смартфон клієнта для вашого бізнесу. І його наявність, як показують кейси найбільших світових компаній, є конкурентною перевагою.

У тих, хто ще не використовує прогресивні веб-додатки, зараз є можливість «вскочити в останній вагон» - роздобути унікальний інструмент розвитку бізнесу і показати себе, як прогресивна компанія. Ефективність застосування Progressive Web App буде зберігатися ще рік-півтора і поступово йти на спад.

Однак якщо бюджет компанії дозволяє замовити розробку сайту з PWA і нативних додатків під різні платформи - повністю переходити на використання нової технології поки не варто. Найбільш виграшною стратегією поки залишається мати повний набір функціоналу, щоб залучити всі сегменти користувачів. Згодом нативні додатки самі зживуть себе. Тоді Progressive Web App займуть їх місце і стануть основною розробкою. Поки не з'являться нові, ще більш зручні інструменти.

Ви готові до лідерства в інтернеті?

Давайте обговоримо перспективи просування вашого сайту!