Progressive Web Apps (PWA)

Що таке Progressive Web Apps або PWA?

Progressive Web Apps — це технологічне поєднання нативних застосунків та вебзастосунків на основі HTML5, які ми знаємо. PWA з'явилися, аби закрити технологічну прірву між застосунками та вебсторінками.

Google був одним з головних прихильників, що заохочують розробку технологій такого типу. Аби краще зрозуміти її особливості, треба говорити про застосунки, які мають бути надійними, швидкими та залученими.

Особливості, які мають мати Progressive Web Apps

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

Звісно, ми говоримо в загальних рисах. Звідти кожна модель бізнесу/сервісу адаптуватиме свої цілі до потреб власної цільової аудиторії.

Швидкість

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

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

Користувачі сьогодні не мають терпіння; вони не чекають, поки сайт повністю завантажиться. 53% користувачів не чекатимуть більше 3 секунд, поки сайт завантажиться, за даними Think with Google

Надійні

Коли ми говоримо про надійність, ми маємо на увазі гарантії роботи сайту. Завдяки тому, що відомо як Service Workers, проблеми з мережевим з'єднанням не мають заважати завантаженню PWA.

Встановлювані

PWA можна встановити без потреби йти у Chrome Store, Apple Store чи будь-який з наявних магазинів застосунків. Пам'ятайте, що це не нативні застосунки, тож ми можемо отримувати до них доступ, не проходячи через ці магазини.

Встановлення поводиться просто як ярлик; йому не потрібен простір для зберігання різних файлів.

Різні пристрої: мобільні та настільні

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

Переваги та недоліки PWA

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

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

Недоліки

• ›Потребує інтернет-з'єднання.
• ›Не всі браузери підтримують PWA.
• ›Високе споживання батареї

Що таке Service Worker?

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

Одна важлива річ, яку ми маємо знати, — це те, що Service Workers можуть функціонувати лише якщо у вас є SSL-сертифікат і ви обслуговуєте їх через https.

А тепер розгляньмо все на прикладі: вебсайт BMW та його PWA.

Приклад PWA: BMW

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

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

На вигляд це «звичайний» сайт, але якщо копнути в код, нас чекає перший сюрприз. Дійсно, це сайт, повністю розроблений на AMP, не лише мобільна версія.

Але повернімося до сьогоднішньої теми.

Опинившись на сайті, перейдімо до панелі «налаштувати та керувати» Chrome.

Як ви могли побачити, відкрилося вікно з вмістом сайту BMW. Порівнюючи обидва вмісти, бачимо, що вони практично ідентичні.

Зображення сайту в браузері (Chrome)

Зображення сайту у PWA desktop

Розробникам BMW вдалося зберегти ідентичний візуальний вигляд. Коли ми приймаємо «встановлення» PWA у нашій папці застосунків Chrome або навіть на робочому столі (залежно від ОС, я зараз використовую MacOS), завантажується ярлик до PWA.

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

У мобільній версії все практично подібно. Коли ми заходимо на сайт з версією PWA, ми отримуємо сповіщення «створити ярлик».

Зайшовши на сайт із PWA, побачимо опцію створити ярлик.

Якщо ми погоджуємося, побачимо іконку PWA на нашому мобільному робочому столі.

DevTools, аби дізнатися більше про PWA

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

Для цього ми скористаємося інструментом розробника, який надає Chrome (DevTools). Відкриваємо інспектор правою кнопкою і переходимо до Application.

Chrome Devtools

App Manifest (Web Application Manifest)

Маніфест — це невеликий JSON-файл з базовими аспектами стилю, який він надає браузеру, аби уникнути різких змін.

Приклад Manifest (JSON)

Service Workers

Як ми пояснили раніше, тепер ми бачимо, про що йдеться. Бачимо JS-файл і у ньому скрипти, які він використовує. Service Worker встановлюється в браузер. У нас їх буде кілька з інших вебзастосунків.

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

Як впровадити PWA у WordPress?

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

Найпопулярніші плагіни для впровадження PWA у WordPress.

PWA у маркетингу

Для тих з нас, хто працює у маркетингу, Progressive Web Apps можуть допомогти досягти цілей, які тримає на думці кожен маркетинговий відділ заради зростання бренду.

Лояльність і продажі

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

Push-сповіщення у PWA — одна з дій, що працюють найкраще і сприяють генерації продажів.

Дослідження, проведене Gartner щодо PWA, дає нам низку дуже цікавих статистик про Lancome та Alibaba; Lancome повідомляє про 17% зростання конверсій, 51% у сесіях з мобільних пристроїв і 52% на iOS. Alibaba (група, до якої належить Aliexpress) покращила свій коефіцієнт конверсії на 76%.

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

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

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

Посилання

• ›Документація Google щодо PWA