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

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

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

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

Прогресивні вебзастосунки У 2015 році дизайнер Францес Берріман та розробник Google Chrome Алекс Рассел створили термін «Progressive Web Apps», щоб описати застосунки що використовують нові функції сучасних оглядачів, такі як Service Workers та маніфести, і дають користувачам змогу встановлювати вебзастосунки, оскільки застосунки першого класу у своїй рідній ОС. Згідно з документацією Google Developers, прогресивні вебзастосунки мають наступні ознаки: Прогресивні () — працюють для будь-якого користувача, незалежно від вибору браузера, бо побудовані за принципом . Адаптивні () — добре відображаються на будь-якому форматі пристрою: робоча станція, мобільному, планшеті чи будь-якій іншій формі, що може з'явитися. Незалежні від з'єднання () — Service Workers дозволяють працювати офлайново чи на мережах з низькою швидкістю. Схожі на застосунки () — користувачеві вони здаються рідними застосунками, і мають подібні взаємодії та навігацію. Свіжі () — завжди оновлені, завдяки процесові оновлення в технології service worker. Безпечні () — передаються через HTTPS для запобігання перехопленню і певності, що контент не підроблено. Виявні () — ідентифікуються як «додатки» завдяки маніфестам W3CW3C "Web App Manifest”, Working Draft , retrieved 12 September 2016 та області реєстрації сервіс-воркерів, що дозволяє пошуковим машинам їх знайти. Можуть бути задіяні повторно () — спрощують повторні взаємодії завдяки функціям на зразок пуш-повідомлень. Можуть бути встановленими () — дозволяють користувачам додавати додатки, які вони вважають корисними, на свій робочий стіл без мороки з app store. На них можна посилатися () — можуть просто пересилатися за допомогою 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 Для прискорення завантаження, сервіс воркери зберігають базовий інтерфейс користувача або «оболонку» () вебзастосунку. Ця оболонка надає початковий статичний каркас, у який поступово може завантажуватись вміст, що дозволить користувачам використовувати застосунок не зважаючи на якість мережевого з'єднання. Простіше кажучи, оболонка — це ввесь код який зберігається в кеші на пристрої.

Примітки

Посилання Курс від Google Intro to Progressive Web Apps на Udacity