PWA: маніфест і вебзастосунки, що встановлюються – основи

Коротко: Прогресивний вебзастосунок — сайт, який можна встановити як застосунок: з маніфестом, service worker і HTTPS він отримує значок, повноекранний режим, роботу офлайн і фонові служби.

Докладніше: PWA поєднують веб і застосунок: одна кодова база, магазин застосунків не потрібен, оновлення миттєво. Їх можна встановити (головний екран/робочий стіл), вони почасти працюють офлайн і можуть надсилати сповіщення.

Подробиці

Три складники

1. HTTPS (крім localhost).
2. Маніфест вебзастосунку (manifest.webmanifest): назва, значки, кольори, початковий URL, режим відображення:

{
  "name": "Emzett", "short_name": "Emzett"
  "start_url": "/", "display": "standalone"
  "background_color": "#0b0b10", "theme_color": "#0b0b10"
  "icons": [{"src":"/icon-192.png","sizes":"192x192","type":"image/png"}
            {"src":"/icon-512.png","sizes":"512x512","type":"image/png","purpose":"maskable"}]
}

У HTML: <link rel="manifest" href="/manifest.webmanifest">. 3. Service worker: фоновий скрипт, здатний перехоплювати запити, кешувати й віддавати офлайн-сторінки.

Service worker і кешування

Типові стратегії: cache first (статичні файли), network first (актуальні дані, запасний варіант із кешу), stale-while-revalidate (одразу старе, у фоні знову). Важливо: версіонуйте кеші, видаляйте старі кеші, сповіщення про оновлення («Доступна нова версія»), не кешуйте чутливі дані, не повторюйте наосліп запити POST. Інструменти: Workbox, плагіни фреймворків. Налагоджуйте в інструментах розробника браузера в розділі Application.

Можливості та обмеження

Можливо: встановлення, використання офлайн, push-сповіщення (на iOS зі встановленого PWA), фонова синхронізація, камера, місцезнаходження, доступ до файлової системи, функція «Поділитися». Обмеження: обмеження на iOS (ліміт сховища, менше API), немає повного доступу до функцій пристрою, як у нативних застосунків, виявлюваність без магазину. Конфіденційність: push і фонова синхронізація потребують згоди.

Перевірка та практика

Тестуйте з Lighthouse (критерії PWA), chrome://inspect, «Додати на головний екран». Передбачте офлайн-сторінку-запас, maskable-значки, theme_color, знімки екрана в маніфесті для діалогу встановлення. Перевіряйте оновлення: оновлення service worker набувають чинності лише після закриття всіх вкладок, якщо не задано skipWaiting. Прочитайте також про offline-first і фонову синхронізацію.

Див. також: Offline-first і фонова синхронізація, Service worker, Вебсховище, Lighthouse