pwa-development

Skill do tworzenia Progressive Web Apps z pełną obsługą pracy bez internetu. Nauczy Cię implementacji service workerów, strategii cachowania i manifestu aplikacji. Dowiesz się, jak spełnić wymagania instalacji (HTTPS, service worker z obsługą fetch, manifest z ikonami), aby Twoja aplikacja działała niezawodnie na wszystkich urządzeniach i mogła być zainstalowana bezpośrednio z przeglądarki.

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.