Poradnik technologiczny

PWA offline: jak zaprojektować aplikację i synchronizację danych

Aplikacja PWA może pomagać użytkownikowi przy słabym połączeniu, ale wymaga ustalonego zakresu pracy offline. Najważniejsze są reguły zapisu i synchronizacji danych, a nie sama możliwość dodania ikony na telefonie.

Około 3 min czytaniaPrzejdź do ćwiczeń

PWA bez internetu: określ, co użytkownik może zrobić

W aplikacji serwisanta sensowny zakres może obejmować odczyt wcześniej pobranych zleceń, dopisanie notatki i zapis protokołu do późniejszego wysłania. Pobranie nowego zlecenia czy potwierdzenie aktualnego stanu magazynu wymaga łączności. Pokaż tę granicę w interfejsie, zanim użytkownik zacznie pracę.

Instalowalność i praca offline to odrębne cechy. Manifest opisuje m.in. nazwę i sposób uruchamiania aplikacji. Service worker może przechwytywać żądania i obsługiwać cache. Wymagania instalacji oraz dostępność funkcji różnią się między przeglądarkami, dlatego testuj urządzenia, z których naprawdę korzysta zespół.

Service worker i cache: dobierz strategię do rodzaju danych

Service worker działa w bezpiecznym kontekście HTTPS; localhost jest wyjątkiem przydatnym do rozwoju. Samo zarejestrowanie workera nie zapisuje automatycznie całej aplikacji. Trzeba wskazać zasoby, obsłużyć brak odpowiedzi i zaplanować aktualizację cache po nowym wdrożeniu.

Przykładowy podział cache w aplikacji terenowej
DanePodejścieInformacja dla użytkownika
Wersjonowane ikony, style i skryptyCache-first dla zatwierdzonej listy zasobówDostępna nowa wersja aplikacji
Przydzielone zleceniaPróba pobrania z sieci, potem zaakceptowana kopiaData ostatniej synchronizacji
Nowa notatka lub protokółLokalny zapis i kolejka operacjiZapisano na urządzeniu / wysłano / wymaga poprawy
Płatność lub bieżąca dostępnośćPotwierdzenie na serwerzeDo tej operacji potrzebne jest połączenie

Synchronizacja PWA: stałe identyfikatory i konflikty zmian

Każdej zmianie nadaj własny identyfikator operacji. Zapisz ją lokalnie przed pokazaniem komunikatu o zachowaniu danych. Po odzyskaniu sieci wyślij operację do backendu, który rozpozna jej ponowienie. To istotne, gdy serwer zapisał protokół, lecz telefon nie otrzymał odpowiedzi i próbuje jeszcze raz.

Zapamiętaj także wersję edytowanego rekordu. Jeżeli dyspozytor zmienił zlecenie w czasie pracy serwisanta, serwer powinien rozpoznać konflikt. Dla notatek można dopisać oba wpisy, ale dla terminu lub statusu konieczna może być decyzja użytkownika. Automatyczne nadpisywanie ostatnią zmianą jest regułą biznesową, którą trzeba świadomie zaakceptować.

Praca w tle i pamięć urządzenia: uwzględnij ograniczenia PWA

Nie uzależniaj poprawności procesu wyłącznie od synchronizacji w tle. Przeglądarka może zatrzymać service workera, a dostępność interfejsów API nie jest jednakowa. Zapewnij ponawianie po otwarciu aplikacji i przycisk synchronizacji z widocznym wynikiem. Kolejka powinna przeżyć restart aplikacji.

Pamięć przeglądarki domyślnie działa w trybie best-effort. Dane mogą zostać usunięte przy braku miejsca lub przez użytkownika. Prośba o trwałe przechowywanie nie odbiera użytkownikowi możliwości usunięcia danych. Ogranicz rozmiar pobieranych załączników, obsłuż błąd zapisu i wyraźnie oznacz protokoły, które nie dotarły jeszcze na serwer.

Test PWA offline: sprawdź cały dzień pracy

Przećwicz proces na prawdziwym telefonie, również po zamknięciu karty i ponownym uruchomieniu. Sprawdź aktualizację aplikacji, gdy użytkownik ma niewysłany protokół. Zmiana wersji schematu lokalnych danych nie może usuwać jego pracy.

Oddziel dane lokalne poszczególnych kont. Wylogowanie powinno mieć jednoznaczną politykę dla pobranych zleceń i niewysłanych zmian. Użytkownik musi wiedzieć, czy ich zachowanie wymaga wcześniejszej synchronizacji.

  • Włącz tryb samolotowy po pobraniu zlecenia i zapisz notatkę.
  • Zerwij połączenie w czasie wysyłki, następnie ponów operację.
  • Zmień ten sam rekord równocześnie na drugim urządzeniu.
  • Sprawdź brak miejsca, wygaśnięcie sesji i aktualizację service workera.

Zastosuj przeczytane wskazówki

Ćwiczenia i lista kontrolna

Sprawdź decyzje na przykładzie, a potem przejdź przez zadania we własnym środowisku testowym.

Przećwicz ponowienie bez duplikatu

Liczba zapisów: 0

Wyślij operację demo-001, odzyskaj połączenie i ponów próbę.

Symulacja w przeglądarce. W aplikacji rozpoznanie identyfikatora operacji i ochrona przed wyścigiem muszą działać po stronie serwera.

Lista do wykonania

Zaznaczone kroki: 0 z 4

Opcjonalny zapis na kolejne wizyty. Wyłączenie usuwa zapis, zachowując bieżące zaznaczenia. Więcej o prywatności

Sprawdź swoją wiedzę

1. Telefon ponawia wysyłkę protokołu, bo poprzednia odpowiedź serwera nie dotarła. Co pomaga uniknąć drugiego zapisu tego samego protokołu?
2. Czy sama możliwość zainstalowania PWA potwierdza, że aplikacja działa bez internetu?

Kontynuuj naukę

Aplikacja webowa · Krok 3 z 3

Zobacz całą ścieżkę