Блог / Статті03 травня 2018

Що таке PWA і як вони можуть допомогти онлайн-бізнесу

PWA (Progressive Web Applications; Прогресивні веб-додатки) – це веб-ресурси, які поєднують у собі властивості сайту і мобільного додатку. Зберігаючи зручність використання традиційних веб-сайтів, вони набувають також автономності класичних додатків: з PWA можна працювати як в онлайн, так і в офлайн-режимі.

Як працює і що вміє PWA?

Коли ви потрапляєте на PWA-сайт, він показує вам наступне повідомлення: «Ви хочете додати цей сайт на головний екран?»

Приклад установки pwa на головний екран мобільного пристрою

Якщо ви натиснете "Так", то:

  1. на екран мобільного пристрою додасться іконка сайту;
  2. відбудеться його установка по аналогії з тим, як відбувається установка звичайного мобільного додатка.

Що це дасть? По-перше, у вас тепер є можливість відкривати сайт в один клік з головного екрану пристрою. Здавалося б, нічого незвичного, адже засобами браузера на головний екран для швидкого доступу можна додати будь-який сайт. Але це не все: на відміну від звичайних сайтів, після установки PWA ви зможете взаємодіяти з ним навіть в офлайн-режимі, тобто за повної відсутності з'єднання з інтернетом. Як? Ми ж встановили його до себе на пристрій, пам'ятаєте? Крім цього, коли ви онлайн, PWA може синхронізувати дані та оновлювати їх в кеші пристрою. Подібним чином працює стрічка новин у додатку Facebook: коли з'єднання відсутнє, інформація вилучається з кешу, і ви бачите контент, актуальний на останній момент виходу в інтернет. Але як тільки з'явиться з'єднання, додаток завантажить з сервера найновішу інформацію, і ви зможете побачити свіжі записи та фото; дані в кеші також оновляться.

Крім цього, після установки PWA буде працювати незалежно від браузера (тобто відкриватися не у вікні Chrome, Opera або Safari, a в своєму власному).

Видалення (деінсталяція) PWA з пристрою здійснюється таким же чином, як і звичайних додатків.

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

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

Для того щоб ви змогли краще зрозуміти, як працює PWA і що вона вміє, ми підготували для вас приклад з основними функціями технології. Ознайомитися з ним можна за посиланням нижче (приклад не працює в «режимі інкогніто»; коли ви зайдете на сторінку прикладу, наш сайт запитає у вас дозвіл на отримання push-повідомлень – будь ласка, погодьтеся. Це потрібно тільки для демонстрації роботи PWA – ми не будемо надсилати вам повідомлення в подальшому).

Плюси Progressive Web App

  • Можливість безбраузерної роботи. Ця функція дає користувачеві доступ до інформації в один клік, а значить, збільшується залученість: клієнт може швидко відвідати ресурс у будь-який зручний момент.
  • Кросплатформовість. Стандартний мобільний додаток працює тільки на тих платформах, для яких його розробляли (Android, iOS, Windows). Водночас, PWA здатні працювати майже на всіх апаратних платформах, що знижує вартість розробки: не потрібно створювати окремий продукт для кожної операційної системи, досить розробити один універсальний PWA-додаток.
  • Офлайн-режим. Без підключення до Інтернету користувач може переглядати інформацію і навіть відправляти HTML-форми. При цьому дані, які ввів відвідувач сайту в форму, тимчасово зберігаються на пристрої, а як тільки з'явиться зв'язок з інтернетом, вони відправляться на сервер. Уявіть, наприклад, що ви почали заповнювати форму замовлення, а потім зайшли в метро і з'єднання перервалося. На звичайному сайті, якщо ви після цього натиснете кнопку відправки, ваші дані зникнуть, тоді як PWA збереже всю інформацію і відправить її при першій нагоді вже без вашої участі (приклад офлайн-форми - на самому початку сторінки).
  • Push-повідомлення. Користувачі зможуть отримувати зручні повідомлення про акції, нові статті та інші події вашого ресурсу. Зазначимо, що приймати ці повідомлення можна навіть без установки PWA (приклад push-повідомлень - в самому кінці сторінки).
  • Поліпшення конверсії. Це скоріше наслідок перерахованих вище пунктів: під час роботи з PWA збільшується ймовірність повторного входу клієнта на сайт, час, який він проводить на ресурсі, поліпшується користувальницький досвід, що в перспективі допомагає підвищити конверсію, якщо мова йде про комерційний сайт.
  • Непрямий вплив на SEO. Прогресивні мобільні додатки демонструють хороші поведінкові фактори (користувачі активно переходять по сторінках, менший показник відмов), що може позитивно позначитися на ранжуванні в пошуку. PWA працює тільки з захищеним протоколом (HTTPS), а це теж позитивно впливає на позиції сайту.

Недоліки технології PWA

  • Перше завантаження PWA-сторінки може бути трохи повільним, що буває критично при дуже слабкому Інтернет-з'єднанні. Пов'язано це з тим, що на момент першого входу інформація в кеші про ресурс відсутня.
  • Сумарний розмір PWA обмежений певними вимогами, які залежать від браузера користувача: не більше 6% вільного місця на пристрої для Chrome, 10% – для Firefox, 50 МБ – для мобільної версії Safari або 250 МБ – для Internet Explorer. Прорахувати точний ліміт досить важко, оскільки у кожного користувача ступінь завантаженості пам'яті пристрою може бути різною. Тому, створюючи PWA, доводиться максимально зменшувати розмір всіх ресурсів, щоб мінімізувати ризик того, що якісь з них не помістяться в кеш.
  • Технологію PWA складніше впровадити на вже готовий сайт, тому що потрібна максимальна оптимізація контенту.
  • Якщо ви працюєте з PWA-сайтом через браузер, то очищення кешу браузера призведе до безповоротної втрати даних, пов'язаних із сайтом, та відсутності можливості відвідувати ресурс в офлайн-режимі до тих пір, поки не з'явиться інтернет і дані в кеші не перезапишуться.
  • Значна частина функцій PWA-сайтів не може нормально працювати при ввімкненому режимі «інкогніто» в браузері.

Кому підійде PWA?

І нарешті, один з найважливіших питань – для якого формату онлайн-бізнесу технологія PWA буде доцільною?

Інтернет-магазини

Для великих інтернет-магазинів PWA-технологія може бути застосована, проте працювати з таким ресурсом в офлайн-режимі буде важко. Пов'язано це з тим, що великий магазин вимагає безлічі запитів на сервер під час фільтрації або сортування великої кількості товарів за різними ознаками. Крім того, безліч фотографій товарів, які небажано занадто сильно стискати, можуть просто не поміститися в локальному кеш-сховищі. З магазинами, що мають невеликий каталог товарів, справа йтиме краще: їх асортимент можна виводити на одній сторінці та фільтрувати за допомогою JavaScript на стороні браузера/додатку.

Інфо-ресурси

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

Landing pages

Нарешті, для landing page або сайту-візитки впровадити PWA найбільш просто: у зв'язку з тим, що контент цих ресурсів практично незмінний, для них навіть не потрібно налаштовувати фонову синхронізацію. Весь сайт буде кешуватися на пристрої, і користувач зможе звернутися до нього в будь-який момент.

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

Впровадження технології PWA на існуючий сайт

Для швидкого впровадження PWA на вже готовий сайт він має відповідати наступним вимогам:

  • оптимізована вага всіх картинок і фото на сторінках;
  • мінімізований код скриптів, CSS-стилів і HTML-файлів. Дуже бажано використовувати скрипти тільки на чистому JavaScript, без застосування сторонніх бібліотек;
  • підготовка іконок різного розміру для головного екрану різних платформ (Android, iOS, Windows), за якими буде здійснюватися запуск програми;
  • максимально оптимізований розмір всього сайту (у зв'язку з обмеженнями займаної пам'яті на пристрої, вказаними вище).

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

Варто зазначити, що для сайтів на деяких популярних CMS (наприклад, на Wordpress) існують плагіни перенесення існуючого ресурсу на PWA. Однак, важливо уточнити, що навіть при використанні плагінів потрібна перевірка і тестування фахівцями: чим більший і складніший сайт, тим більше помилок і проблем може виникнути під час його автоматизованого перенесення. Те саме можна сказати і про ресурс EscalatingWeb, який пропонує повністю автоматичне «перетворення» сайту на PWA. Судячи з відгуків користувачів, він підходить далеко не всім і коректно працює тільки з невеликими сайтами з малою кількістю динамічного контенту.

 

"Для 95% компаній і організацій, які хочуть досягти успіху в інтернеті, мобільні додатки є невірним рішенням. Мало того, більшість зараз це розуміють і погоджуються з цим. У такій ситуації завдання додатків здатні взяти на себе PWA, а також нескладні мобільні сайти." – Ренд Фішкін.

 

Технологія Progressive Web App є однією з сучасних тенденцій, які здатні визначити майбутнє інтернету і онлайн-бізнесу. На цьому наголосив, наприклад, засновник компанії Moz Ренд Фішкін в своєму прогнозі на 2018 рік. Найважливішими показниками для сучасних веб-ресурсів є зручність у використанні (UX) і кросплатформовість, а прогресивні веб-додатки чудово справляються з цими завданнями. Так, не все ще ідеально – адже технологія досить нова, але вона постійно розвивається і розширює функціонал, відкриваючи нові можливості перед користувачами.

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

Денис Улянченко
Front-end розробник
Спеціалізуюся на Front-end розробці веб-сайтів з 2017 року. Постійно відслідковую новинки в сфері розробки і вивчаю просунуті технології. У вільний від роботи час пишу музику в стилі Tech. Є питання? Поставте мені їх особисто на електронну адресу den@arto.agency.

Дізнавайтеся про важливе першими!

Навчальні матеріали, важливі новини, огляди. Ми пишемо вам тоді, коли дійсно є що сказати
КОМЕНТАРІ
КОМЕНТУВАТИ
УВІЙТИ
  • Facebook
  • Twitter
ЦЕЙ САЙТ ВИКОРИСТОВУЄ COOKIES
Ми використовуємо cookies для аналізу трафіку, забезпечення функцій соціальних мереж і роботи системи коментування на сайті. Список встановлюваних cookies знаходиться на цій сторінці. Чи згодні ви на установку cookie?