Progressive Web Apps

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

Поняття Progressive Web Applications (PWA) на слуху давно, з весни 2018 року додатки цього класу підтримуються всіма основними браузерами, однак поширеність технологій PWA незважаючи на очевидні «плюси» поки дуже низька.

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

Філософія PWA

Для початку варто відмітити, що немає точного визначення PWA додатки. Не можна чітко сказати, ось цей сайт PWA чи ні. Це протяжна шкала, на якій можуть розташовуватися і «homepage» першокурсника Петі, який додав web app маніфест, який створює іконку сайту на домашньому екрані мобільника; і зовні нічим не відрізняється від звичайного сайту новин, тільки користувачі якого можуть сказати, що він дивно швидкий і зручний, а все тому що його контролює працівник сфери послуг (service worker'a).

Відносність PWA закладена в самій назві - «прогресивне». Прогресивний порівняно з чим і в якій мірі? Але ця відносність, насправді, дуже хороша, тому що вивчати технології PWA і застосовувати їх в своїх поточних проектах можна поступово, без глобального ремоделінга і рефакторінга.

З іншого боку, ідея у PWA є, і ідея досить чітка і потужна. І то, як неспішно вона розгортається, цілком може свідчити про масштабність наслідків.

Що таке PWA?

PWA - це назва групи додатків, які використовують стек Web технологій (JS + HTML + CSS) і дозволяють з'єднати простоту використання Web сайту зі специфічними для нативних додатків операційної системи UX і технічними можливостями. Основне призначення PWA збільшити конверсію, кількість користувачів і зручність використання Web додатків на мобільних пристроях.

Progressive Web Apps є логічним продовженням Accelerated Mobile Pages, таким чином, якщо ви раніше створювали AMP додатки, то вам однозначно варто оновити свій додаток до норм PWA додатків. Якщо ви до цього нічого не чули про AMP, то це не стане для вас проблемою під час вивчення PWA.

Архітектура PWA

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

PWA додатку необхідно бути:

• Прогресивним - Працювати з кожним користувачем в не залежності від оточення використовуючи метод поступового поліпшення як основний принцип роботи;
• Адаптивним - Підлаштовуватися під будь-який пристрій: десктоп, смартфони, планшети або щось інше;
• Незалежним від з'єднання - Використовуючи Service Worker програма має працювати в оффлайн режимі при перериванні або відсутності з'єднання;
• Виглядати нативно - Додаток має відповідати звичним для користувача способам взаємодії і навігації;
• Самообновлюючим - Додаток має контролювати процес автоматичного поновлення за допомогою Service Worker API;
• Безпечним - За допомогою використання HTTPS запобігати перехопленню і підміні даних;
• Обумовленим - за допомогою W3C маніфесту і реєстрації через Service Worker додаток ідентифікується як «додаток» пошуковими системами;
• Утримуючим - Використовуючи технічні можливості мотивуємо користувача ще раз використовувати такі програми, наприклад за допомогою push повідомлень;
• Легким в установці - Дозволяє «зберегти» додаток на пристрої користувача за допомогою додавання PWA додатку в список встановлених додатків без використання магазину додатків;
• Легким у використанні - Для початку використання програми досить відкрити URL. Встановлювати програму не обов'язково.

Стандартний процес роботи

Користувач, використовуючи смартфон, відкриває посилання отримане за допомогою будь-якої програми, після завантаження web сторінки користувач отримує повноцінний додаток, який він може використовувати. Тим самим почати використовувати новий додаток стає набагато простіше, адже не потрібно заходити в магазин додатків і чекати поки встановиться необхідний користувачеві додаток. При необхідності користувач може додати додаток на робочий стіл за допомогою пункту опцій в браузері «Add to home screen». Або додаток може запропонувати користувачеві зробити це замість нього за допомогою - Web app install banner.

Після чого на головному екрані користувача буде створена іконка попередньо зазначена в маніфесті додатка. Розробник може керувати стилем браузера і варіантом відображення програми після установки. Так само Service Worker, який йде в комплекті з PWA додатком, буде відповідати за кешування, оффлайн роботу і обробку пуш повідомлень.