Прогресивні веб-застосунки (PWA) в даний час гаряче обговорюються. Що ж таке PWA та в чому їх переваги перед традиційними застосунками?

---

Оригінал: The Rising Era of Web Application Development With PWAs
Автор: Marie Weaver

Що таке прогресивний веб-застосунок?

Прогресивні веб-застосунки поєднують у собі властивості веб-сайтів і традиційних застосунків. Вони поступово адаптуються до відповідного пристрою, та використовують і викликають браузер як веб-сайт шляхом введення URL-адреси.

Доступ до веб-застосунків здійснюється через URL-адресу. ЇХ перевага перед традиційними полягає в тому, що вам більше не потрібно переглядати магазини програм. Ви викликаєте веб-застосунок у браузері і додаєте його на свій «домашній екран». Завантаження з магазину програм більше не потрібне. Оновлення через магазин програм, як ми звикли з традиційними застосунками, також виконуються автоматично.

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

Навіщо розробляти PWA замість звичайних застосунків?

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

• Традиційний застосунок спочатку необхідно завантажити та встановити з магазину програм. PWA працює без встановлення та може бути переданий іншим через URL.
• PWA вимагають менше місця на пристрої та краще сумісні зі старими операційними системами смартфонів.
• Розробка та обслуговування традиційних застосунків зазвичай обходяться дорожче, тому що розробникам доводиться розробляти версії для різних платформ.
• Традиційні застосунки спочатку перевіряються і затверджуються магазином програм. PWA готовий до негайного використання.
• Вони називаються PWA, щоб гарантувати, що кожен користувач використовує останню версію. За допомогою застосунка користувачі можуть відкласти оновлення.
• Наприклад, згідно з інформації Google, Alibaba.com зміг збільшити конверсію в мобільній сфері на 76 відсотків за допомогою PWA, тому що не було потреби завантажувати застосунок.

Недоліки прогресивних веб-застосунків

У порівнянні з традиційними застосунками, PWA також мають недоліки:

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

Односторінкові застосунки як точка старту

Хоча передові веб-застосунки вважаються гарячою темою в технічній спільноті, вони все ще не набули широкого поширення. Вже їх визначення часто спричиняє плутанину. Деякі компанії не розділяють прогресивні веб-застосунки та односторінкові застосунки (SPA).

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

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

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

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

Вони включають в себе:

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

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

У PWA більш швидкий час завантаження, ніж у традиційних застосунків. Прогресивні веб-застосунки призначені для швидкого завантаження. Зазвичай кажуть, що користувачі йдуть з мобільних сайтів, якщо сайт не завантажується протягом 3 секунд. Якщо PWA викликається вдруге, він відкривається менш як за 3 секунди завдяки Service Worker, навіть коли відповідний користувач не в мережі.

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

Автономні функції доступні для працівників сервісу завдяки функції кешування. Після отримання інформація стає доступною в автономному режимі. Використання можливе без встановлення та є багато місця для зберігання.

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

Може також використовуватися в автономному режимі або під час повільного підключення до Інтернету

Ще одна перевага прогресивних веб-застосунків у порівнянні з традиційними застосунками: вони також працюють в автономному режимі або при повільному або поганому підключенні до Інтернету. Після завантаження вмісту веб-програми можна знову викликати його в будь-який час в автономному режимі. Хто з вас цього не знає: ви сидите у трамваї (метро) або у поїзді і у вас погана чи повна відсутність інтернет-з'єднання. Використання традиційних застосунків зараз досить складне і втомлює.

Прогресивні веб-застосунки дають змогу почати працювати тут і зараз. Вони також працюють у ті моменти, коли традиційні застосунки «зазнають невдачі». Тут у гру вступає так званий Service Worker. Що таке Service Worker найкраще пояснити словами Вікіпедії: “Service Worker – це сучасна браузерна технологія, яка використовує JavaScript для забезпечення проксі-сервера між веб-браузером та сервером, який може використовуватись у різний спосіб. Найбільш відоме використання, щоб зробити певні сторінки доступними офлайн".

За допомогою Service Worker веб-застосунок також можна використовувати в автономному режимі. PWA використовує вміст та функції з кеша. Підключення до Інтернету більше не потрібне.

Цілі та необхідні кроки для прогресивного веб-додатку

Застосунок повинен виконувати такі функції:

• Значок застосунку для швидкого доступу з головного екрана.
• Відображення початкового екрана під час завантаження функцій у фоновому режимі.
• Безперебійне використання - онлайн та офлайн.
• Веб-push-повідомлення для збільшення взаємодії.

Функції тільки для смартфонів та планшетів

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

Список варіантів доступу та функцій, які прогресивний веб-застосунок вже може використовувати на смартфоні або планшеті, вражає.

Функції PWA (підбір):

• Робота з камерою, мікрофоном та голосове управління
• Робота з USB
• Доступ до файлів, доступ до пам'яті
• Доступ до контактів, SMS, буфер обміну
• Збережені способи оплати
• Радіотехнології (наприклад, Bluetooth, NFC)
• Функції трансляції для презентацій
• Робота з GPS
• Датчики (зовнішнього освітлення, датчика прискорення та положення пристрою в приміщенні)
• Запит статусу пристрою (рівень заряду батареї, онлайн-з'єднання)
• Вібрація, повідомлення (push та локальні повідомлення)
• Значок на головному екрані
• Повноекранний режим браузера
• Автономний режим, фонова синхронізація

Висновок

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

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