Сучасні інформаційні
технології/2.Обчислювальна техніка та програмування
Іваненко А.М.
НТУУ «КПІ імені Ігоря Сікорського», Україна
Прогресивні веб-додатки
Згідно данних барометра веб-аналітики StatCounter, аудиторія інтернет-користувачів мобільних пристроїв вже
перевищує аудиторію користувачів Інтернету на ПК. Люди
витрачають 52% власного
часу на користування мобільними додатами, і 42% – використовують
мобільний браузер[1]. Саме тому багато компаній мусили прикласти
більше зусиль для розробки мобільних додатків. Більш того,
для таких компаній, як Facebook або Google, велика частина їх рекламних доходів
протягом попередніх років надходила
завдяки
мобільним пристроям.
Дослідження, проведене marketingland.com,
показало дивовижну статистику - мобільні користувачі 80% часу застосовують лише три пріоритетних
нативних додатки[2]. Нативні
- це ті програми, які були розроблені під конкретну операційну систему. Пріоритетними
для більшості з нас залишаються кілька мобільних додатків, такі як Facebook, Instagram, пошта або інші. Кількість завантажених нативних додатків з
року в рік падає. Останнім часом
завантажуваність впала на 20%. Проблема користування додатками була
вирішена за допомогою Progressive Web Application (PWA).
Progressive Web Application – це особливі
додатки, що розроблені за допомогою
веб-технологій (JS + HTML + CSS), проте поєднують в собі звичайний веб-сайт з потрібними
технічними властивостями і специфічністю UX дизайну(логіка переходу зі сторінки на сторінку,
зручність взаємодії з інтерфейсом і т.д.) , що властиве мобільним додаткам.
Основне призначення PWA - збільшити конверсію, кількість
користувачів і зручність використання веб-додатків на мобільних пристроях.
Важливо зрозуміти, що
PWA – це не інфраструктура і не мова програмування. Це схоже на набір вимог,
яким
веб-додаток повинен задовільняти,
щоб функціонал прогресував. Тому веб-додаток повинен поєднувати властивості сайту та
мобільного додатку[3].
Такий додаток можна прикріпити до головного екрану смартфона за допомогою пункту опцій в браузері
«Add to home screen». В
протилежному випадку, додаток може запропонувати користувачеві
зробити це самостійно,
за
допомогою - Web app install banner.
Push API дозволяє
веб-додаткам отримувати повідомлення, відправлені з сервера, незалежно від
того, чи працює веб-додаток у фоновому режимі або завантажений користувачем. Це
дозволяє розробникам відправляти асинхронні повідомлення та оновлення
підписникам[5].
Перевага Progressive Web App в тому, що його дуже легко виявити, як звичайний
веб-сайт. Досить лише ввести назву в пошукову стрічку, натиснути на посилання і
мати готовий до використання додаток, відкритий у браузері.
Розмір додатка
- ще один важливий фактор. Середня нативна програма використовує близько 25 Мб.
Середня вага Progressive Web Apps - всього 2Мб.
Дві важливі складові цієї технології – це маніфест та Service Worker. Маніфест – це файл формату JSON,
що містить в собі інформацію про назву, посилання на іконки, конфігурацію та
інше. Service Worker є файлом JavaScript, працює по типу мережевого проксі і
відповідає за кешування[3].
Коли PWA
запускається вперше, воно розміщує всі статичні ресурси та оболонку додатку в кеш. Наступного разу, коли додаток буде
запущено, воно здобуде статичну інформацію додатку безпосередньо з кешу, що
значно поліпшить час, за який буде відтворено контент.
Також PWA
може пропонувати автономний режим, крім того з використанням архітектури Application Shell (дозволяє використовувати його в автономному режимі).
Progressive Web App працює досить злагоджено при неякісному з’єднанні та при відсутності мережі[4].
Нині технологія PWA здобула деяке поширення,
підтвердженням чого є програмні розробки, що допомагають програмістам
створювати якісні прогресивні додатки. Деякі сайти можуть допомогти розробникам: показуючи, які функції підтримуються тим чи іншим
браузером, аналізуючи конкретне API. Lighthouse – корисне розширення Chrome, яке виконує аудит вашого застосування і дає можливість
перевірити, наскільки воно відповідає вимогам прогресивного веб-додатку, дає
загальний бал, а також поради про те, як виправляти помилки[3].
Для компаній, у яких вже є власний додаток, перехід на PWA
зазвичай дозволяє об'єднати певні витрати на розробку і підтримку, що дозволить
синхронізувати еволюцію між веб-версією і нативним додатком.
Браузери Chrome і Opera почали підтримку прогресивних Web Apps. Firefox і Microsoft взяли на себе зобов'язання щодо підтримки. Поки намірів
щодо підтримки цього формату немає тільки в Apple. Розробники Apple визнають, що відмовившись від цієї технології,
реалізували дещо менше функцій, проте отримали повний контроль додатків в App
Store[4].
Додаток з обмеженим функціоналом зможе працювати на будь-якому гаджеті, і будь-якому місці, але при переході користувача на
більш досконалий пристрій або браузер,
розширюються функції PWA. І при цьому його не потрібно завантажувати
багаторазово на кожен
з доступних пристроїв користувача. Саме це є основою прогресивності даної технології[6].
З розвитком концепції PWA, веб-розробники зможуть швидко створювати і запускати
додатки, які ідентично виглядають та добре працюють на всіх платформах. В той
час як користувачі додатків отримують миттєвий доступ до своїх улюблених
веб-ресурсів у вигляді мобільних додатків. Відмітимо, що мобільні додатки більш
ефективні, менші за розміром, миттєво завантажуються та завжди оновлюються.
Список використаних джерел:
1. http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet
2.
https://marketingland.com/native-mobile-apps-are-beating-the-mobile-
web-heres-why-you-should-still-focus-on-mobile-web-over-apps-78919
3.
https://developers.google.com/web/progressive-web-apps/
4.
https://www.developpez.com/actu/152046/En-refusant-de-supporter-les- Progressive-Web-App-Apple-porterait-prejudice-a-l-avenir-du-Web-d-apres-un-ingenieur/
5.
https://medium.com/@sprocompany/what-makes-an-app-to-be-a- progressive-web-application-60ddce7aafc9
6.
https://pwa.rocks/