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

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

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

Огляд[ред. | ред. код]

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

Гібридні застосунки[ред. | ред. код]

Гібридні застосунки імітують досвід користування нативних мобільних застосунків, і потребують завантаження з App store[en]. Як такі, зберігаються не на сервері, а на диску пристрою. Комбінація розмітки, стилів[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) - спрощують повторні взаємодії завдяки функціям на зразок пуш-повідомлень[en].
  • Можуть встановлюватись (англ. 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. Процитовано February 18, 2005. 
  2. Marcotte, Ethan. Responsive Web Design. Процитовано May 25, 2010. 
  3. WebView | Android Developers. Процитовано 2016-12-04. 
  4. What is a Hybrid Mobile App? -. Telerik Developer Network. 2015-03-25. Процитовано 2016-12-04. 
  5. а б Russell, Alex. Progressive Web Apps: Escaping Tabs Without Losing Our Soul. Процитовано June 15, 2015. 
  6. Your First Progressive Web App | Web Fundamentals - Google Developers. Google Developers. Процитовано 2016-07-17. 
  7. Google Developers. Progressive Web App. Процитовано June 15, 2015. 
  8. а б W3C “Web App Manifest”, Working Draft, retrieved 12 September 2016
  9. Що таке PWA і як вони можуть допомогти онлайн-бізнесу - Блог Arto Web Agency. Arto Web Agency. Процитовано 2018-05-08. 
  10. Alex Russell. What, Exactly, Makes Something A Progressive Web App?. Infrequently Noted. Процитовано 2016-12-07. 
  11. Заблоковано завантаження змішаного активного вмісту. Блоґ одного кібера. 2014-08-07. Процитовано 2016-12-07. 
  12. Mixed Content Blocking Enabled in Firefox 23! | Tanvi Vyas. Процитовано 2016-12-07. 
  13. https://developers.google.com/web/fundamentals/push-notifications
  14. https://developers.google.com/web/updates/2015/12/background-sync
  15. https://developers.google.com/web/fundamentals/architecture/app-shell

Посилання[ред. | ред. код]