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

Матеріал з Вікіпедії — вільної енциклопедії.
Перейти до навігації Перейти до пошуку

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

Огляд

[ред. | ред. код]

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

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

[ред. | ред. код]

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

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

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

[ред. | ред. код]

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

  • Поступові (англ. Progressive) — працюють для будь-якого користувача, незалежно від вибору браузера, бо побудовані за принципом поступового поліпшення[en].
  • Адаптивні (англ. Responsive) — добре відображаються на будь-якому форматі пристрою: робоча станція, мобільному, планшеті чи будь-якій іншій формі, що може з'явитися.
  • Незалежні від з'єднання (англ. 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.

Посилання

[ред. | ред. код]