pwa-development

Progressive Web Apps - service workers, caching strategies, offline, Workbox

1. Załaduj skill za pomocą pliku base.md w swoim środowisku Claude lub Codex. Skill zawiera kompletne wytyczne dotyczące trzech filarów PWA: HTTPS (wymagany dla service workerów, localhost dozwolony w rozwoju), service workera (JavaScript działający w tle, umożliwiający pracę offline i powiadomienia push) oraz web app manifestu (plik JSON opisujący metadane aplikacji).

2. Przygotuj strukturę projektu z plikiem manifestu (manifest.json) zawierającym wymagane pola: name, icons (minimum 192px i 512px), start_url oraz display (standalone, fullscreen lub minimal-ui). Skill pomoże Ci zdefiniować każde pole zgodnie ze standardami Chrome.

3. Zaimplementuj service workera jako plik JavaScript działający w tle przeglądarki. Service worker musi zawierać obsługę zdarzenia fetch, aby aplikacja mogła działać offline. Skill wyjaśni, jak zarejestrować service workera w głównym pliku aplikacji.

4. Skonfiguruj strategię cachowania odpowiednią dla Twojej aplikacji. Skill zawiera wytyczne dotyczące Workbox i różnych podejść do przechowywania zasobów (statyczne pliki, API, obrazy), aby zoptymalizować wydajność i niezawodność.

5. Upewnij się, że Twoja aplikacja spełnia kryteria instalacji: działa na HTTPS (lub localhost w rozwoju), ma service workera z obsługą fetch oraz manifest z wszystkimi wymaganymi polami. Po spełnieniu tych warunków przeglądarki będą oferować instalację aplikacji.

6. Testuj aplikację w trybie offline i na różnych urządzeniach, aby potwierdzić, że service worker prawidłowo cachuje zasoby i aplikacja pozostaje funkcjonalna bez połączenia internetowego.