Co to jest PWA i dlaczego warto?
PWA (Progressive Web App) to aplikacja webowa, która może działać jak natywna aplikacja mobilna czy desktopowa. Po odpowiedniej konfiguracji, użytkownik może ją zainstalować na swoim urządzeniu (dodając skrót na ekran główny lub menu Start), a ona sama może działać offline i korzystać z funkcji systemowych.
Kluczowe cechy PWA to m.in.:
• Działanie offline i szybkie wczytywanie – aplikacja PWA potrafi pracować bez dostępu do internetu i startuje natychmiast, niezależnie od szybkości sieci.
• Uruchamianie w osobnym oknie – po instalacji działa w oddzielnym oknie, bez standardowego interfejsu przeglądarki (wygląda jak zwykły program).
• Integracja z systemem – można ją dodać na ekranie głównym telefonu lub w menu Start, a nawet uruchamiać z docka/paska zadań jak zwykłą aplikację.
• Powiadomienia push – PWA może otrzymywać notyfikacje push z serwera, nawet gdy jest nieaktywna w przeglądarce.
• Automatyczne aktualizacje w tle – przy ponownym połączeniu z siecią aplikacja może sama pobrać najnowsze zmiany i zaktualizować się w tle.
Dlaczego warto łączyć PWA z Blazorem? Blazor WebAssembly umożliwia pisanie aplikacji SPA w języku C#, które działają w przeglądarce (dzięki WebAssembly). Oznacza to, że front-end aplikacji tworzymy w .NET, zamiast w JavaScript. Dodając do tego możliwości PWA, nasze aplikacje napisane w C# zyskują cechy natywnych aplikacji – mogą działać offline, być instalowalne i oferować lepsze doświadczenie użytkownika. Innymi słowy, Blazor PWA to sposób, aby aplikacja webowa napisana w C# zachowywała się jak aplikacja mobilna/desktopowa, bez konieczności pisania osobnej aplikacji natywnej.
Tworzenie PWA w Blazor – krok po kroku
Przejdźmy do praktyki. Jak utworzyć aplikację Blazor WebAssembly z obsługą PWA? Mamy dwie główne opcje: skorzystanie z gotowego szablonu projektu z PWA lub dołączenie PWA do istniejącej aplikacji. Najprościej jest użyć szablonu podczas tworzenia nowego projektu.
Krok 1: Utworzenie nowego projektu Blazor WebAssembly z PWA
W środowisku Visual Studio utwórz nowy projekt typu Blazor WebAssembly Standalone App i zaznacz opcję "Progressive Web Application". Spowoduje to dodanie do projektu plików związanych z PWA.
W najnowszych wersjach .NET (np. .NET 6, .NET 7, .NET 8) opcja ta jest dostępna i automatycznie skonfiguruje PWA w projekcie. Jeżeli masz już istniejącą aplikację Blazor WebAssembly, również możesz dodać do niej obsługę PWA – wymaga to jednak ręcznego dodania odpowiednich plików (manifestu, service workera itp.) i wpisów konfiguracyjnych. Dlatego początkującym polecam wygenerowanie nowego projektu z szablonu PWA, co zapewni gotową konfigurację.
Krok 2: Struktura projektu PWA
Po utworzeniu projektu z PWA zobaczysz, że w katalogu wwwroot pojawiło się kilka dodatkowych plików. Najważniejsze z nich to:
• manifest.webmanifest – plik manifestu aplikacji PWA. Zawiera metadane aplikacji (nazwę, opis, ikony, kolor motywu itp.), dzięki którym system operacyjny rozpoznaje aplikację po instalacji.
• service-worker.js i service-worker.published.js – pliki service workera, czyli skryptu działającego w tle przeglądarki. Odpowiada on za cache'owanie zasobów i obsługę trybu offline. Plik service-worker.js używany jest podczas dewelopmentu, a service-worker.published.js działa w opublikowanej aplikacji (produkcyjnej). To one zapewniają aplikacji dostępność offline poprzez przechwytywanie żądań i serwowanie odpowiedzi z cache.
• Ikony aplikacji – pliki graficzne icon-192.png oraz icon-512.png. Są to ikony używane przy instalowaniu aplikacji (np. ikona na ekranie głównym telefonu lub ikonka programu na pulpicie).
Szablon PWA automatycznie dodaje również referencje do powyższych plików w głównej stronie HTML aplikacji (np. link do manifestu w <head> oraz rejestrację service workera w skrypcie). Dzięki temu od razu po skompilowaniu aplikacji Blazor, funkcje PWA są gotowe do działania bez dodatkowej konfiguracji. Warto wiedzieć, co robi każdy z tych plików – np. manifest definiuje jak aplikacja ma się zachować po "zainstalowaniu" (nazwa, orientacja, kolory, ikony), a service worker zapewnia działanie offline i aktualizacje. Na starcie jednak nie musisz nic w nich zmieniać.
Krok 3: Uruchomienie i testowanie PWA
Uruchom aplikację. Aplikacja Blazor WebAssembly załaduje się w przeglądarce tak jak zwykła strona. Teraz możesz sprawdzić w praktyce możliwości PWA:
• Instalacja aplikacji: W przeglądarce Chrome lub Edge zauważysz ikonę lub przycisk umożliwiający dodanie aplikacji. W przypadku Chrome na desktopie będzie to ikona z plusem w pasku adresu – kliknięcie jej wyświetli okno dialogowe z pytaniem o instalację aplikacji. Po potwierdzeniu, Twoja aplikacja zostanie zainstalowana i uruchomi się w osobnym oknie, już bez adresu URL i elementów przeglądarki. Użytkownik może ją teraz znaleźć na swoim komputerze tak jakby była zwykłym programem, a na telefonie – jak normalną aplikację mobilną.
• Działanie offline: Aby przekonać się, że aplikacja działa offline, możesz (po jej uruchomieniu) wyłączyć internet i odświeżyć stronę. Ponieważ pliki zostały zcache’owane przez service worker, aplikacja powinna nadal się wczytać i działać poprawnie. Pamiętaj jednak, że pełne wsparcie offline domyślnie działa dopiero w wersji opublikowanej aplikacji – podczas debugowania service worker jest odświeżany przy każdej zmianie, co ułatwia rozwój. Innymi słowy, tryb offline jest włączony tylko dla aplikacji wypuszczonej na produkcję. Do testowania offline w środowisku deweloperskim możesz użyć narzędzi developerskich przeglądarki (np. wymuszając tryb Offline w zakładce Network w Chrome). Dzięki temu upewnisz się, że po deploymencie użytkownicy będą mogli korzystać z aplikacji bez sieci.
Po zainstalowaniu aplikacji PWA użytkownik może korzystać z niej jak z natywnej: aplikacja uruchamia się szybciej (dzięki lokalnej cache), działa nawet gdy brak internetu, a Ty jako programista możesz dostarczać nowe wersje, które zostaną automatycznie pobrane w tle przy kolejnej okazji. To świetny sposób na zwiększenie dostępności i atrakcyjności Twojej aplikacji webowej.
Podsumowanie
Stworzenie progresywnej aplikacji webowej w Blazor jest prostsze, niż mogłoby się wydawać. Dzięki wbudowanym szablonom .NET możemy w kilka minut wygenerować projekt Blazor WebAssembly z obsługą PWA i cieszyć się funkcjonalnościami takimi jak działanie offline czy instalacja na urządzeniu. Blazor PWA łączy świat wygodnego programowania w C#/.NET z nowoczesnym doświadczeniem użytkownika znanym z aplikacji natywnych.
Zachęcam Cię do wypróbowania tworzenia PWA w Blazor na własną rękę – dodaj tę opcję przy następnym projekcie i zobacz, jak Twoja aplikacja staje się bardziej uniwersalna. Jeśli natomiast chcesz zgłębić temat Blazora od podstaw i nauczyć się budować profesjonalne aplikacje (także PWA) krok po kroku, sprawdź moje szkolenie online "Szkoła Blazora". Znajdziesz tam kompleksowe omówienie Blazora i praktyczne projekty, które pomogą Ci stać się ekspertem w tworzeniu nowoczesnych aplikacji webowych w C#.
