Aplikacja PWA została opublikowana: niektórzy użytkownicy korzystają z niej w przeglądarce, a inni instalują ją na swoich urządzeniach. Ważne jest, aby podczas aktualizowania aplikacji stosować sprawdzone metody pozwalające uniknąć pułapek.
Możesz zaktualizować:
- Dane aplikacji.
- Zasoby są już przechowywane w pamięci podręcznej urządzeń.
- Plik skryptu service worker lub jego zależności.
- Metadane pliku manifestu.
Omówmy sprawdzone metody dotyczące każdego z tych elementów.
Aktualizowanie danych
Aby aktualizować dane, takie jak te przechowywane w IndexedDB, możesz użyć takich narzędzi jak Fetch, WebRTC czy WebSockets API. Jeśli aplikacja obsługuje funkcje offline, pamiętaj, aby aktualizować dane obsługujące te funkcje.
W przypadku zgodnych przeglądarek dostępne są opcje synchronizacji danych nie tylko wtedy, gdy użytkownik otworzy aplikację PWA, ale także w tle. Dostępne opcje to:
- Synchronizacja w tle: zapisuje nieudane żądania i ponawia je przy użyciu synchronizacji z skryptu service worker.
- Okresowa synchronizacja danych przez internet w tle: synchronizuje dane okresowo w tle o określonych porach, dzięki czemu aplikacja może udostępniać zaktualizowane dane, nawet jeśli użytkownik jeszcze jej nie uruchomił.
- Pobieranie w tle: pobiera duże pliki nawet po zamknięciu aplikacji PWA.
- Web push: wysyła z serwera komunikat, który wybudza skrypt service worker i powiadamia użytkownika. Jest to tzw. „powiadomienie push”. Ten interfejs API wymaga zgody użytkownika.
Wszystkie te interfejsy API są wykonywane z kontekstu skryptu service worker. Obecnie są dostępne tylko w przeglądarkach opartych na Chromium, na urządzeniach z Androidem i w systemach operacyjnych na komputery. Jeśli używasz jednego z tych interfejsów API, możesz uruchomić kod w wątku skryptu service worker, aby na przykład pobrać dane z serwera i zaktualizować dane IndexedDB.
Aktualizuję zasoby
Aktualizowanie zasobów obejmuje wszelkie zmiany w plikach używanych do renderowania interfejsu aplikacji, takich jak kod HTML, CSS, JavaScript i obrazy. Może to być na przykład zmiana logiki aplikacji, obraz będący częścią interfejsu lub arkusz stylów CSS.
Zaktualizuj wzorce
Oto kilka typowych wzorców obsługi aktualizacji aplikacji. Proces ten możesz zawsze dostosować do swoich potrzeb:
- Pełna aktualizacja: każda zmiana, nawet niewielka, powoduje zastąpienie całej zawartości pamięci podręcznej. Naśladuje on sposób obsługi aktualizacji przez aplikacje na konkretnym urządzeniu, zużywa więcej łącza i poświęca więcej czasu.
- Aktualizacja zmienionych zasobów: w pamięci podręcznej zostaną zastąpione tylko zasoby, które zostały zmienione od ostatniej aktualizacji. Często implementuje się je przy użyciu biblioteki takiej jak Workbox. Wiąże się to z tworzeniem listy plików w pamięci podręcznej, przedstawiania pliku jako skrótu oraz sygnatur czasowych. Dzięki tym informacjom skrypt service worker porównuje listę zasobów z zasobami zapisanymi w pamięci podręcznej i decyduje, które zasoby zaktualizować.
- Aktualizacja pojedynczych zasobów: każdy zasób jest aktualizowany oddzielnie po zmianie. Przykładem aktualizowania zasobów pojedynczo może być strategia „Nieaktualna podczas ponownej weryfikacji” opisana w sekcji dotyczącej wyświetlania.
Kiedy aktualizować
Innym dobrym sposobem jest znalezienie dobrego momentu na sprawdzenie dostępności aktualizacji i zastosowanie ich. Możliwości są następujące:
- Kiedy skrypt service worker jest aktywny. Nie ma zdarzenia do nasłuchiwania w tej chwili, ale po wybudzeniu przeglądarka wykona dowolny kod w zakresie globalnym skryptu service worker.
- w kontekście okna głównego PWA, po wczytaniu strony przez przeglądarkę, aby uniknąć spowolnienia wczytywania aplikacji;
- Gdy są wywoływane zdarzenia w tle, na przykład gdy PWA otrzymuje powiadomienie push lub uruchamia się synchronizacja w tle. Możesz wtedy zaktualizować pamięć podręczną, a użytkownicy będą mieli dostęp do nowej wersji zasobu przy następnym uruchomieniu aplikacji.
Aktualizacja na żywo
Możesz też określić, czy aktualizacja ma zostać zastosowana, gdy aplikacja jest otwarta (aktywna) czy zamknięta. Po zamknięciu aplikacji, mimo że pobrała nowe zasoby, nie będzie wprowadzać żadnych zmian i przy następnym wczytaniu nowe wersje będą używane.
Oznacza to, że gdy tylko zasób zostanie zaktualizowany w pamięci podręcznej, PWA zastąpi zasób w bieżącym wczytywaniu. To złożone zadanie, którego nie omówimy w tym kursie. Narzędzia ułatwiające wdrożenie tej aktualizacji to livereload-js i CSSStyleSheet.replace() API do aktualizacji zasobów CSS.
Aktualizowanie skryptu service worker
Przeglądarka uruchamia algorytm aktualizacji, gdy skrypt service worker lub jego zależności ulegną zmianie. Przeglądarka wykrywa aktualizacje, porównując poszczególne bajty z plikami z pamięci podręcznej i zasobami pochodzącymi z sieci.
Następnie przeglądarka spróbuje zainstalować nową wersję skryptu service worker, a nowy skrypt będzie w stanie oczekiwania, zgodnie z opisem w rozdziałie o skryptach service worker. Nowa instalacja uruchomi zdarzenie install dla nowego skryptu service worker. Jeśli przechowujesz zasoby w pamięci podręcznej w tym module obsługi zdarzeń, zasoby zostaną również ponownie zapisane w pamięci podręcznej.
Wykrywanie zmian w mechanizmach Service Worker
Aby wykryć, że nowy skrypt service worker jest gotowy i zainstalowany, używamy zdarzenia updatefound z rejestracji tego skryptu. To zdarzenie jest uruchamiane, gdy rozpocznie się instalowanie nowego skryptu service worker. Musimy poczekać, aż stan zmieni się na installed za pomocą zdarzenia statechange. Zajrzyj do tego:
async function detectSWUpdate() {
const registration = await navigator.serviceWorker.ready;
registration.addEventListener("updatefound", event => {
const newSW = registration.installing;
newSW.addEventListener("statechange", event => {
if (newSW.state == "installed") {
// New service worker is installed, but waiting activation
}
});
})
}
Wymuś zastąpienie
Nowy skrypt service worker zostanie zainstalowany, ale domyślnie czeka na aktywację. Oczekiwanie zapobiega przejmowaniu przez mechanizm Service Worker starych klientów, które mogą być niezgodne z nową wersją.
Nowy skrypt service worker może pominąć okres oczekiwania i od razu rozpocząć aktywację, nawet jeśli nie jest to zalecane.
self.addEventListener("install", event => {
// forces a service worker to activate immediately
self.skipWaiting();
});
self.addEventListener("activate", event => {
// when this SW becomes activated, we claim all the opened clients
// they can be standalone PWA windows or browser tabs
event.waitUntil(clients.claim());
});
Zdarzenie controllerchange jest uruchamiane, gdy skrypt service worker kontrolujący bieżącą stronę zmienia się. Na przykład nowa instancja robocza została pominięta w oczekiwaniu i stanie się nową aktywną instancją roboczą.
navigator.serviceWorker.addEventListener("controllerchange", event => {
// The service worker controller has changed
});
Aktualizowanie metadanych
Możesz też zaktualizować metadane aplikacji, które są określane głównie w pliku manifestu aplikacji internetowej. Możesz na przykład zaktualizować ikonę, nazwę lub początkowy adres URL albo dodać nową funkcję, taką jak skróty do aplikacji. Co jednak stanie się ze wszystkimi użytkownikami, którzy zainstalowali już na swoich urządzeniach starą ikonę aplikacji? Jak i kiedy otrzymują zaktualizowaną wersję?
Odpowiedź zależy od platformy. Omówmy dostępne opcje.
Safari w przeglądarkach na iOS, iPadOS i Android
W przypadku tych platform jedynym sposobem na uzyskanie nowych metadanych pliku manifestu jest ponowne zainstalowanie aplikacji z przeglądarki.
Google Chrome na Androida z WebAPK
Gdy użytkownik zainstaluje Twoją aplikację PWA na Androidzie przy użyciu Google Chrome z aktywowanym WebAPK (w przypadku większości instalacji PWA w Chrome), aktualizacja zostanie wykryta i zastosowana na podstawie algorytmu. Szczegółowe informacje znajdziesz w tym artykule o zmianach w pliku manifestu.
Kilka dodatkowych uwag na temat tej procedury:
Jeśli użytkownik nie otworzy Twojej aplikacji PWA, jego pakiet WebAPK nie zostanie zaktualizowany. Jeśli serwer nie prześle pliku manifestu (pojawi się błąd 404), Chrome nie będzie sprawdzać dostępności aktualizacji przez co najmniej 30 dni, nawet jeśli użytkownik otworzy PWA.
Otwórz about:webapks w Chrome na urządzeniu z Androidem, aby sprawdzić stan flagi „wymagana aktualizacja” i poprosić o aktualizację. Więcej informacji o narzędziu do debugowania znajdziesz w rozdziale Narzędzia i debugowanie.
Samsung Internet na Androidzie z WebAPK
Procedura jest podobna do tej w Chrome. W takim przypadku, jeśli plik manifestu PWA wymaga aktualizacji, pakiet WebAPK zostanie zaktualizowany w ciągu najbliższych 24 godzin po wygenerowaniu zaktualizowanego pakietu WebAPK.
Google Chrome i Microsoft Edge na komputerze
Na komputerach po uruchomieniu PWA przeglądarka określa czas ostatniego sprawdzenia lokalnego pliku manifestu pod kątem zmian. Jeśli plik manifestu nie został sprawdzony od ostatniego uruchomienia przeglądarki lub nie był sprawdzany w ciągu ostatnich 24 godzin, przeglądarka wyśle żądanie sieciowe dotyczące pliku manifestu, a następnie porówna go z kopią lokalną.
Aktualizacja wybranych właściwości rozpocznie się po zamknięciu wszystkich okien.
Powiadamianie użytkownika
Niektóre strategie aktualizacji wymagają ponownego załadowania lub nowego nawigacji po klientach. Informuj użytkowników, że czeka na nich aktualizacja, ale daj mu szansę na zaktualizowanie strony w dogodnym momencie.
Możesz przekazać użytkownikowi tę informację na jeden z tych sposobów:
- Użyj interfejsu DOM lub canvas API, aby wyrenderować powiadomienie na ekranie.
- Użyj interfejsu Web Notification API. Ten interfejs API jest częścią uprawnień push służących do generowania powiadomień w systemie operacyjnym. Aby go używać, musisz poprosić o uprawnienia Web push, nawet jeśli nie korzystasz z protokołu przesyłania wiadomości push z serwera. Jest to jedyna opcja, jaką mamy w przypadku, gdy aplikacja PWA nie jest otwarta.
- Użyj interfejsu Badging API, aby pokazać, że aktualizacje są dostępne w ikonie zainstalowanej aplikacji PWA.
.
Więcej informacji o interfejsie API Badging
Interfejs Badging API pozwala oznaczyć ikonę aplikacji PWA numerem plakietki lub kropką plakietki w zgodnych przeglądarkach. Kropka z plakietką to niewielki znaczek na ikonie Zainstalowane rozszerzenie informujące, że coś czeka w aplikacji.
Aby ustawić numer plakietki, musisz wywołać setAppBadge(count) w obiekcie navigator. Możesz to zrobić z poziomu okna lub kontekstu skryptu service worker, gdy wiesz, że pojawiła się aktualizacja powiadamiająca użytkownika.
let unreadCount = 125;
navigator.setAppBadge(unreadCount);
Aby usunąć plakietkę, wywołaj metodę clearAppBadge() dla tego samego obiektu:
navigator.clearAppBadge();
Zasoby
- Cykl życia mechanizmów Service Worker
- Jak Chrome obsługuje aktualizacje pliku manifestu aplikacji internetowej
- Synchronizowanie i aktualizowanie aplikacji PWA w tle
- Więcej możliwości w trybie offline dzięki interfejsowi Periodic Background Sync API
- Interfejs API push
- Omówienie powiadomień push
- Oznaczanie ikon aplikacji
- Pole robocze 4: wdrażanie procesu odświeżania wersji do aktualizacji za pomocą modułu okna roboczego