YaChudo

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

Переглядів: 0. Оновлено 31.10.2026.

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

Огляд

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

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

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

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

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

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

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

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

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

Технології

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

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

Зелений замочок біля адреси сторінки
  • Мати безпечне походження. Повинні передаватись через TLS і замочок біля адреси сторінки зеленого кольору (відсутній активний змішаний вміст[11][12]).
  • Завантажуватись офлайн (навіть якщо це просто незмінна сторінка). З цього випливає, що прогресивні застосунки повинні використовувати 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[8] який дозволяє розробникам описувати метадані пов'язані із застосунком, наприклад:

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

Service Worker’и

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

Крім того:

Application Shell Architecture

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

Примітки

  1. ↑ Garrett, Jesse James. Ajax: A New Approach to Web Applications. Архів оригіналу за 7 травня 2019. Процитовано 18 лютого 2005.
  2. ↑ Marcotte, Ethan. Responsive Web Design. Архів оригіналу за 18 квітня 2021. Процитовано 25 травня 2010.
  3. ↑ WebView | Android Developers. Архів оригіналу за 18 грудня 2016. Процитовано 4 грудня 2016.
  4. ↑ What is a Hybrid Mobile App? -. Telerik Developer Network. 25 березня 2015. Архів оригіналу за 4 грудня 2016. Процитовано 4 грудня 2016.
  5. ↑ а б Russell, Alex. Progressive Web Apps: Escaping Tabs Without Losing Our Soul. Архів оригіналу за 24 березня 2021. Процитовано 15 червня 2015.
  6. ↑ Your First Progressive Web App - Web Fundamentals — Google Developers. Google Developers. Архів оригіналу за 24 червня 2016. Процитовано 17 липня 2016.
  7. ↑ Google Developers. Progressive Web App. Архів оригіналу за 24 лютого 2020. Процитовано 15 червня 2015.
  8. ↑ а б W3C "Web App Manifest”, Working Draft [Архівовано 18 квітня 2021 у Wayback Machine.], retrieved 12 September 2016
  9. ↑ Що таке PWA і як вони можуть допомогти онлайн-бізнесу - Блог Arto Web Agency. Arto Web Agency. Архів оригіналу за 9 травня 2018. Процитовано 8 травня 2018.
  10. ↑ Alex Russell. What, Exactly, Makes Something A Progressive Web App?. Infrequently Noted. Архів оригіналу за 25 листопада 2016. Процитовано 7 грудня 2016.
  11. ↑ Заблоковано завантаження змішаного активного вмісту. Блоґ одного кібера. 7 серпня 2014. Архів оригіналу за 21 грудня 2016. Процитовано 7 грудня 2016.
  12. ↑ Mixed Content Blocking Enabled in Firefox 23! | Tanvi Vyas. Архів оригіналу за 30 грудня 2016. Процитовано 7 грудня 2016.
  13. ↑ Web Push Notifications: Timely, Relevant, and Precise. Google Developers. Архів оригіналу за 22 квітня 2020. Процитовано 24 квітня 2020.
  14. ↑ Introducing Background Sync |  Web | Google Developers. Google Developers. Архів оригіналу за 20 квітня 2020. Процитовано 24 квітня 2020.
  15. ↑ The App Shell Model | Web Fundamentals | Google Developers. Google Developers. Архів оригіналу за 23 квітня 2020. Процитовано 24 квітня 2020.

Посилання

Джерело: стаття у Вікіпедії та історія редагувань (автори).