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

Матеріал з Вікіпедії — вільної енциклопедії.
Версія від 04:50, 14 лютого 2022, створена TohaomgBot (обговорення | внесок) (Перекладено дати в примітках з англійської на українську)
Перейти до навігації Перейти до пошуку

Поступовий вебзастосунок (англ. 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. Процитовано 18 лютого 2005. {{cite web}}: |archive-date= вимагає |archive-url= (довідка)
  2. ↑ Marcotte, Ethan. Responsive Web Design. Процитовано 25 травня 2010. {{cite web}}: |archive-date= вимагає |archive-url= (довідка)
  3. ↑ WebView | Android Developers. Процитовано 4 грудня 2016.
  4. ↑ What is a Hybrid Mobile App? -. Telerik Developer Network. 25 березня 2015. Процитовано 4 грудня 2016.
  5. ↑ а б Russell, Alex. Progressive Web Apps: Escaping Tabs Without Losing Our Soul. Процитовано 15 червня 2015. {{cite web}}: |archive-date= вимагає |archive-url= (довідка)
  6. ↑ Your First Progressive Web App | Web Fundamentals - Google Developers. Google Developers. Процитовано 17 липня 2016.
  7. ↑ Google Developers. Progressive Web App. Процитовано 15 червня 2015. {{cite web}}: |archive-date= вимагає |archive-url= (довідка)
  8. ↑ а б W3C “Web App Manifest”, Working Draft, retrieved 12 September 2016
  9. ↑ Що таке PWA і як вони можуть допомогти онлайн-бізнесу - Блог Arto Web Agency. Arto Web Agency. Процитовано 8 травня 2018.
  10. ↑ Alex Russell. What, Exactly, Makes Something A Progressive Web App?. Infrequently Noted. Процитовано 7 грудня 2016.
  11. ↑ Заблоковано завантаження змішаного активного вмісту. Блоґ одного кібера. 7 серпня 2014. Процитовано 7 грудня 2016.
  12. ↑ Mixed Content Blocking Enabled in Firefox 23! | Tanvi Vyas. Процитовано 7 грудня 2016.
  13. ↑ Web Push Notifications: Timely, Relevant, and Precise. Google Developers. Процитовано 24 квітня 2020.
  14. ↑ Introducing Background Sync  |  Web  |  Google Developers. Google Developers. Процитовано 24 квітня 2020.
  15. ↑ The App Shell Model  |  Web Fundamentals  |  Google Developers. Google Developers. Процитовано 24 квітня 2020.

Посилання

Отримано з https://uk.wikipedia.org/w/index.php?title=Поступовий_вебзастосунок&oldid=34625756