## Debug PWA Для перевірки PWA найзручніше використовувати Chrome DevTools. Вкладка: ```txt Application ``` Там можна перевірити: * Manifest; * Service Workers; * Cache Storage; * IndexedDB; * Local Storage; * Background Sync; * offline mode. Chrome DevTools має окремі інструменти для перевірки manifest, service workers і кешів. Див. [Debug Progressive Web Apps - Chrome for Developers](https://developer.chrome.com/docs/devtools/progressive-web-apps). --- ## Що варто показати на практиці Можна зробити маленьку демку: 1. Створити `manifest.json`. 2. Підключити його в HTML. 3. Додати `sw.js`. 4. Зареєструвати service worker. 5. Закешувати базові файли. 6. Увімкнути offline mode в DevTools. 7. Перезавантажити сторінку без інтернету. 8. Показати, що застосунок відкривається. 9. Додати offline fallback. 10. Коротко показати ідею background sync. --- ## Мінімальна структура проєкту ```txt project/ ├── index.html ├── app.js ├── styles.css ├── manifest.json ├── sw.js ├── offline.html └── icons/ ├── icon-192.png └── icon-512.png ``` --- ## Повний мінімальний приклад ### index.html ```html PWA Demo

PWA Demo

Цей застосунок може працювати офлайн.

``` --- ### app.js ```js if ('serviceWorker' in navigator) { window.addEventListener('load', async () => { try { await navigator.serviceWorker.register('/sw.js'); console.log('Service Worker registered'); } catch (error) { console.error('Service Worker registration failed:', error); } }); } let deferredPrompt; window.addEventListener('beforeinstallprompt', (event) => { event.preventDefault(); deferredPrompt = event; const installButton = document.querySelector('#install-button'); installButton.hidden = false; installButton.addEventListener('click', async () => { // у продакшені listener краще підписати один раз, поза beforeinstallprompt deferredPrompt.prompt(); const choice = await deferredPrompt.userChoice; console.log('User choice:', choice.outcome); deferredPrompt = null; installButton.hidden = true; }); }); ``` --- ### sw.js ```js const CACHE_NAME = 'pwa-demo-v1'; const ASSETS = ['/', '/index.html', '/styles.css', '/app.js', '/offline.html', '/manifest.json']; self.addEventListener('install', (event) => { event.waitUntil( caches.open(CACHE_NAME).then((cache) => { return cache.addAll(ASSETS); }) ); }); self.addEventListener('activate', (event) => { event.waitUntil( caches.keys().then((cacheNames) => { return Promise.all( cacheNames .filter((cacheName) => cacheName !== CACHE_NAME) .map((cacheName) => caches.delete(cacheName)) ); }) ); }); self.addEventListener('fetch', (event) => { if (event.request.mode === 'navigate') { event.respondWith( fetch(event.request).catch(() => { return caches.match('/offline.html'); }) ); return; } event.respondWith( caches.match(event.request).then((cachedResponse) => { return cachedResponse || fetch(event.request); }) ); }); ``` --- ### offline.html ```html Offline

Ви офлайн

Зараз немає інтернету, але застосунок все ще працює.

``` --- ## Важливі нюанси Service worker не має доступу до DOM. Тобто в `sw.js` не можна робити так: ```js document.querySelector('h1'); ``` Service worker працює окремо від сторінки. --- Service worker не повинен зберігати важливий стан у звичайних змінних. Погано: ```js let userData = {}; ``` Браузер може зупинити service worker, і ці дані зникнуть. Краще: * Cache Storage; * IndexedDB; * сервер; * інше persistent storage. Web.dev також зазначає, що service worker може бути завершений браузером, тому дані, які потрібні між запусками, треба зберігати в persistent storage, наприклад IndexedDB. Див. [Service workers - web.dev](https://web.dev/learn/pwa/service-workers/). --- ## Типові помилки ### Помилка 1: чекати, що PWA завжди встановиться Не всі браузери однаково показують install prompt. Це нормально. --- ### Помилка 2: кешувати все підряд Не треба бездумно кешувати всі API-запити. Можна отримати старі або неправильні дані. --- ### Помилка 3: не оновлювати cache version Погано: ```js const CACHE_NAME = 'cache'; ``` Краще: ```js const CACHE_NAME = 'cache-v1'; ``` Потім: ```js const CACHE_NAME = 'cache-v2'; ``` --- ### Помилка 4: не тестувати offline mode PWA без перевірки offline-режиму - це майже гарантовані баги. --- ## Короткий підсумок PWA - це спосіб зробити вебзастосунок ближчим до нативного застосунку. Для цього потрібні: * `manifest.json` - описує застосунок для встановлення; * `service worker` - контролює кеш, offline і background-задачі; * `Cache Storage` - зберігає статичні файли; * `offline fallback` - дає нормальний UX без інтернету; * `background sync` - дозволяє відправити дані пізніше. Головна ідея offline-first проста: > Застосунок не має ламатися тільки тому, що інтернет тимчасово зник. PWA - це не заміна всім нативним застосункам, але для багатьох вебпродуктів це дуже сильний спосіб покращити швидкість, доступність і user experience. --- ## Посилання * [Progressive web apps - MDN](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) * [Get started with PWAs - Microsoft Learn](https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/) * [Service workers - web.dev](https://web.dev/learn/pwa/service-workers/) * [Offline and background operation - MDN](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Offline_and_background_operation) * [Background Sync API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Background_Sync_API) * [Debug Progressive Web Apps - Chrome for Developers](https://developer.chrome.com/docs/devtools/progressive-web-apps)

PWA та offline-first

PWA та offline-first