Szkolenie Progressive Web Apps

Progressive Web App to strona, która zachowuje się jak aplikacja: ma ikonę na ekranie telefonu, działa bez sieci i potrafi wysłać powiadomienie. Na szkoleniu zamieniasz zwykłą aplikację webową w PWA krok po kroku, bez przepisywania jej od nowa.

Najwięcej czasu dostaje Service Worker, bo to od niego zależy, czy użytkownik zobaczy aktualną wersję aplikacji, czy stary cache. Dowiesz się też, co działa w Chrome, a co w Safari na iPhonie, zanim obiecasz klientowi funkcję, której część użytkowników nie dostanie.

Program

2 dni

• PWA w 2026 roku
  • Aplikacja webowa a aplikacja natywna
  • Instalacja w Chrome i Edge: HTTPS, manifest i Service Worker, bez którego nie pojawi się monit instalacji
  • Instalacja w Safari: każda strona, także bez manifestu
  • Ograniczenia na iPhonie: powiadomienia i licznik na ikonie tylko po instalacji
• Web App Manifest
  • Nazwa, ikony, kolory i tryb wyświetlania (display, display_override)
  • Własny przycisk „Zainstaluj” (beforeinstallprompt) i instrukcja instalacji dla Safari
  • Skróty i ekran startowy
  • Instalowalność w DevTools (Application > Manifest)
• Service Worker
  • Rejestracja i zakres działania
  • Cykl życia: install, activate, fetch
  • Debugowanie w zakładce Application w DevTools
  • Nowa wersja aplikacji: wykrycie, komunikat i przeładowanie
• Strategie cache
  • Cache first, network first, stale-while-revalidate
  • Wybór strategii dla HTML, API, obrazów i fontów
  • Wersjonowanie i sprzątanie starego cache
• Tryb offline
  • Strona zastępcza bez połączenia
  • Dane w IndexedDB i prośba o trwałe przechowywanie (navigator.storage.persist())
  • Informowanie użytkownika o stanie sieci
  • Wysyłka zapisanych zmian po powrocie sieci: Background Sync i własna kolejka dla Safari i Firefoksa
• Workbox
  • Precache plików z builda
  • Routing i gotowe strategie
  • Integracja z Vite
• Powiadomienia push
  • Web Push i klucze VAPID
  • Subskrypcja, wysyłka z serwera i obsługa kliknięcia
  • Declarative Web Push w Safari: powiadomienie bez Service Workera
  • Kiedy prosić o zgodę na powiadomienia
• Integracja z systemem
  • Licznik na ikonie aplikacji (Badging API)
  • Pokaz funkcji dostępnych tylko w Chromium: udostępnianie do aplikacji, otwieranie plików i własny pasek tytułu

Dla kogo?

• Dla programistów frontendu, którzy chcą dać użytkownikom aplikację bez sklepu z aplikacjami.
• Dla zespołów, których użytkownicy pracują przy słabym zasięgu.

Co musisz umieć?

• Programować w JavaScript, w tym Promise i async/await.
• Rozumieć, jak działa zapytanie HTTP i cache przeglądarki.
• Korzystać z podstawowych narzędzi DevTools.
• Mieć telefon z Androidem lub iPhone’a, żeby zainstalować na nim aplikację z ćwiczeń.

Czego się nauczysz?

• Ustalisz, czego wymaga instalacja PWA w Chrome, Edge i Safari.
• Przygotujesz manifest i zainstalujesz aplikację na telefonie.
• Napiszesz Service Worker z dobraną strategią cache dla każdego zasobu, także z pomocą Workboxa.
• Uruchomisz aplikację bez internetu, poprosisz o trwałe przechowywanie danych i wyślesz zmiany po powrocie sieci w każdej przeglądarce.
• Wyślesz powiadomienie push i poinformujesz użytkownika o nowej wersji aplikacji.
• Sprawdzisz, które funkcje integracji z systemem działają na iPhonie, zanim obiecasz je klientowi.

Trener

Piotr Kowalski

W branży IT od 2008 roku. Od 2014 jest mentorem dla wielu developerów. Jako trener spędził na sali szkoleniowej kilka tysięcy godzin, a na LinkedIn ma 52 rekomendacje. Każde jego szkolenie to dawka solidnej wiedzy oraz humoru.

Więcej na stronie "O mnie"