Поступовий вебзастосунок

Поступовий вебзастосунок (англ. Progressive Web App, PWA) — вебзастосунок, який є гібридом звичайної вебсторінки (чи вебсайту) та мобільного застосунку. Створюється за допомогою можливостей, що надають сучасні оглядачі Інтернету, але при цьому його використання нагадує використання мобільного застосунку.

Огляд

З 2005 року веброзробка перейшла від статичних сайтів до динамічних документів, що створюються серверними (LAMP, ASP.NET) або клієнтськими (Ajax) інструментами, і почали застосовувати адаптивний вебдизайн. Незважаючи на перевагу швидкого розгортання, спроби створення вебзастосунків для пристроїв на зразок iPhone 2007 року, у порівнянні з нативними були невдалими. Нативні застосунки надавали кращий досвід користування і швидше завантажувалися через різницю швидкостей читання з SSD та мережі. Запаковані ресурси та прямий доступ до апаратного забезпечення дозволяли нативним застосункам виконуватися набагато швидше і надавати більше функцій. Проте, з середини 2010-х, постійні вдосконалення в HTML5, CSS3, та JavaScript, значно функціональніші і сумісні зі стандартами браузери і потужні процесори зробили гібридні вебзастосунки життєздатною альтернативою.^[]

Гібридні застосунки

Гібридні застосунки імітують досвід користування нативних мобільних застосунків і потребують завантаження з App store. Як такі, зберігаються не на сервері, а на дискові пристрою. Комбінація розмітки, ^[en] та скриптових мов дозволяє створювати довільні інтерактивні елементи керування без використання закритих систем на зразок Flash. Частково виконуючись у мобільному браузері (наприклад WebView), гібридні застосунки не мають URL, але мають доступ до апаратного забезпечення пристрою.

Часто гібридні застосунки створюють за допомогою фреймворку Apache Cordova.

Поступові вебзастосунки

У 2015 році дизайнер Францес Берріман та розробник Google Chrome Алекс Рассел створили термін «Progressive Web Apps», щоб описати застосунки що використовують нові функції сучасних оглядачів, такі як Service Workers та маніфести, і дають користувачам змогу встановлювати вебзастосунки, оскільки застосунки першого класу у своїй рідній ОС. Згідно з документацією Google Developers, поступові вебзастосунки мають наступні ознаки:

• Поступові (англ. Progressive) — працюють для будь-якого користувача, незалежно від вибору браузера, бо побудовані за принципом ^[en].
• Адаптивні (англ. Responsive) — добре відображаються на будь-якому форматі пристрою: робоча станція, мобільному, планшеті чи будь-якій іншій формі, що може з'явитися.
• Незалежні від з'єднання (англ. Connectivity independent) — дозволяють працювати офлайново чи на мережах з низькою швидкістю.
• Схожі на застосунки (англ. App-like) — користувачеві вони здаються рідними застосунками, і мають подібні взаємодії та навігацію.
• Свіжі (англ. Fresh) — завжди оновлені, завдяки процесові оновлення в технології service worker.
• Безпечні (англ. Safe) — передаються через HTTPS для запобігання перехопленню і певності, що контент не підроблено.
• Виявні (англ. Discoverable) — ідентифікуються як «додатки» завдяки маніфестам W3C та області реєстрації сервіс-воркерів, що дозволяє пошуковим машинам їх знайти.
• Можуть бути задіяні повторно (англ. Re-engageable) — спрощують повторні взаємодії завдяки функціям на зразок пуш-повідомлень.
• Можуть бути встановленими (англ. Installable) — дозволяють користувачам додавати додатки, які вони вважають корисними, на свій робочий стіл без мороки з app store.
• На них можна посилатися (англ. Linkable) — можуть просто пересилатися за допомогою URL і не потребують складного процесу встановлення.

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

• Дещо повільне перше завантаження ресурсу, пов'язане з тим, що інформація про сайт має зберегтися у кеш пристрою.
• Обмежений загальний розмір застосунку. Зумовлений тим, що для різних пристроїв та браузерів існують різні обмеження на об'єм кешу вебзастосунків: наприклад, до 6 % вільної пам'яті пристрою для Google Chrome, до 10 % — для Firefox, до 50 МБ — для мобільної версії Safari. Позаяк вільне місце на пристрої індивідуальне для кожного користувача, то загальний розмір ресурсу (включаючи зображення і скрипти) необхідно максимально оптимізувати.
• Складність впровадження технології на існуючий сайт.
• Під час роботи з PWA у браузері очищення його кешу призведе до неможливості роботи з сайтом офлайново до наступного з'єднання з інтернетом.
• Значна частина функцій PWA не працює у режимі «інкогніто» браузера.

Технології

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

Базові критерії для розгляду сторінки як поступового вебзастонку були описані Расселом в наступній публікації:

Зелений замочок біля адреси сторінки

• Мати безпечне походження. Повинні передаватись через TLS і замочок біля адреси сторінки зеленого кольору (відсутній активний змішаний вміст).

• Завантажуватись офлайн (навіть якщо це просто незмінна сторінка). З цього випливає, що поступові застосунки повинні використовувати Service Worker’и.
• Посилатись на маніфест з щонайменше чотирма ключовими полями: name, short_name, start_url, і display (зі значеннями «standalone» або «fullscreen»)
• Іконку розміром не менше 144×144 в форматі png. Наприклад: «icons»:

  [ { "src": "/images/icon-144.png", "sizes": "144x144", "type": "image/png" } ] 

Маніфест

Маніфест вебзастосунку — це специфікація W3C яка описує маніфест у форматі JSON який дозволяє розробникам описувати метадані пов'язані із застосунком, наприклад:

• Назва застосунку
• Посилання на іконки
• URL з якого запускається вебзастосунок
• Конфігурація вебзастосунку
• Опис орієнтації екрана за замовчуванням
• Опис режиму дисплея (наприклад повноекранний)

Service Worker’и

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

Крім того:

• Можуть працювати з пуш повідомленнями
• Можуть синхронізуватися з даними сервера на фоні

Application Shell Architecture

Для прискорення завантаження, сервіс воркери зберігають базовий інтерфейс користувача або «оболонку» (англ. shell) вебзастосунку. Ця оболонка надає початковий статичний каркас, у який поступово може завантажуватись вміст, що дозволить користувачам використовувати застосунок не зважаючи на якість мережевого з'єднання. Простіше кажучи, оболонка — це ввесь код який зберігається в кеші на пристрої.

Примітки

1. Garrett, Jesse James. . Архів оригіналу за 7 травня 2019. Процитовано 18 лютого 2005.
2. Marcotte, Ethan. . Архів оригіналу за 18 квітня 2021. Процитовано 25 травня 2010.
3. . Архів оригіналу за 18 грудня 2016. Процитовано 4 грудня 2016.
4. . Telerik Developer Network. 25 березня 2015. Архів оригіналу за 4 грудня 2016. Процитовано 4 грудня 2016.
5. Russell, Alex. . Архів оригіналу за 24 березня 2021. Процитовано 15 червня 2015.
6. . Google Developers. Архів оригіналу за 24 червня 2016. Процитовано 17 липня 2016.
7. Google Developers. . Архів оригіналу за 24 лютого 2020. Процитовано 15 червня 2015.
8. W3C "Web App Manifest”, Working Draft [ 18 квітня 2021 у Wayback Machine.], retrieved 12 September 2016
9. . Arto Web Agency. Архів оригіналу за 9 травня 2018. Процитовано 8 травня 2018.
10. Alex Russell. . Infrequently Noted. Архів оригіналу за 25 листопада 2016. Процитовано 7 грудня 2016.
11. . Блоґ одного кібера. 7 серпня 2014. Архів оригіналу за 21 грудня 2016. Процитовано 7 грудня 2016.
12. . Архів оригіналу за 30 грудня 2016. Процитовано 7 грудня 2016.
13. . Google Developers. Архів оригіналу за 22 квітня 2020. Процитовано 24 квітня 2020.
14. . Google Developers. Архів оригіналу за 20 квітня 2020. Процитовано 24 квітня 2020.
15. . Google Developers. Архів оригіналу за 23 квітня 2020. Процитовано 24 квітня 2020.

Посилання

• Курс від Google Intro to Progressive Web Apps [ 20 грудня 2016 у Wayback Machine.] на Udacity