PWA - Progresywne aplikacje webowe
LICZBA DNI: 3 (24h)
KOD KURSU: PWA
Dostosowany program O szkoleniu
DLA KOGO?
Programiści chcący budować aplikacje progresywne i offline przy użyciu JavaScript i HTML5
Architekci chcący poznać możliwości nowoczesnych przeglądarek pod kątem projektowania aplikacji progresywnych
WYMAGANIA
Dobra znajomość JavaScript i HTML5
ZALETY
Szkolenie skupia się na praktycznym wykorzystaniu możliwości nowoczesnych przeglądarek
Uczestnik podczas praktycznych zajęć poznaje strategie szybszego ładowania aplikacji, cache, pracy offline oraz budowania progresywnych aplikacji, które dostosowują się do środowiska oraz korzystają z natywnych API, dzięki czemu strony HTML5 mogą wyglądać i zachowywać się jak zainstalowane aplikacje mobilne
Cele szkolenia
Pokazanie możliwości budowania aplikacji progresywnych - wyglądających i działających jak natywne aplikacje mobilne, ale działające w przeglądarce z użyciem JavaScript i HTML5
Program
Wprowadzenie
- Aplikacje webowe a natywne
- Aplikacje natywne a hybrydowe
- Progresywne aplikacje webowe - PWA
- Koncepcje i zastosowanie
- Progressive Enhancement
- PWA w kontekście SPA - Single Page Applications
Przygotowanie PWA
- Plik manifestu aplikacji
- Wsparcie przeglądarek
- Narzędzia deweloperskie
Testowanie i debugowanie
- Testowanie w przeglądarce
- Emulowanie urządzenia
- Testowanie na fizycznym urządzeniu
- Instalacja i aktualizacja
Service workers a PWA
- Wprowadzenie do Service workers
- Cykl życia SW
- Rejestracja workera
- Zdarzenia i ich obsługa
- Aktualizacja i aktywacja workera
- Pozostałe zdarzenia
- Baner instalacyjny
Promise i Fetch w przeglądarkach
- Fetch API
- Wsparcie przeglądarek i Polyfill
- Obsługa CORS
Service Worker jako Cache
- Cache API
- Wsparcie przeglądarek
- Cache statyczny/precaching
- Cache wielu plików
- Obsługa błędów
- Wersjonowanie cache
- Dynamiczny cache
Zaawansowany cache
- Cache na żądanie
- Offline fallback
- Cache only, Network only i inne
- Routing i strategie cache
Przechowywanie danych aplikacji
- LocalStorage i SessionStorage
- IndexedDB
- Przykład z użyciem Google Firebase
- Synchronizacja w tle
Notyfikacje WebPush
- Omówienie, ważne koncepcje
- Narzędzia deweloperskie
- Uprawnienia
- Wyświetlanie powiadomień
- Akcje powiadomień
- Subskrypcja powiadomień Push
- Wysyłanie powiadomień z serwera
Natywne API
- Obsługa Plików
- Audio/Video i grafika
- Lokalizacja i śledzenie Użytkownika
- API Baterii
- API połączenia sieciowego
- Accelerometr
Narzędzie WorkBox
- Omówienie możliwości
- Konfiguracja i generowanie workera
- Strategia precache
- Routing
- Dynamiczny cache
- Offline HTML fallback
- Proces budowania
Narzędzie Lighthouse
Integracja z popularnymi frameworkami
- Angular
- React
- Vue
