Zaktualizuj

Opublikowano progresywną aplikację internetową. Niektórzy użytkownicy używają jej w przeglądarce, a inni instalują na swoich urządzeniach. Ważne jest, aby podczas aktualizowania aplikacji stosować sprawdzone metody, które pozwolą uniknąć pułapek.

Możesz aktualizować:

  • Dane aplikacji.
  • Zasoby są już zapisane w pamięci podręcznej urządzeń.
  • Plik service worker lub jego zależności.
  • Metadane pliku manifestu.

Przyjrzyjmy się teraz sprawdzonym metodom dotyczącym każdego z tych elementów.

Aktualizuję dane

Aby zaktualizować dane, takie jak dane przechowywane w IndexedDB, możesz użyć narzędzi takich jak Fetch, WebRTC czy WebSockets API. Jeśli aplikacja obsługuje funkcje offline, pamiętaj o aktualizowaniu danych, które obsługują 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 są te opcje:

  • Synchronizacja w tle: zapisuje nieudane żądania i ponawia ich ponowienie przy użyciu synchronizacji z skryptu service worker.
  • Okresowa synchronizacja w tle z internetem: synchronizuje dane okresowo w tle, o określonych porach, dzięki czemu aplikacja może dostarczyć zaktualizowane dane nawet wtedy, gdy użytkownik jeszcze jej nie uruchomił.
  • Pobieranie w tle: pobieranie dużych plików nawet po zamknięciu progresywnej aplikacji internetowej.
  • Web push: wysyła wiadomość z serwera, która wybudza skrypt service worker i powiadamia użytkownika. Jest to potocznie nazywane „powiadomieniem push”. Ten interfejs API wymaga zgody użytkownika.

Wszystkie te interfejsy API są wykonywane z kontekstu skryptu service worker. Obecnie są one dostępne tylko w przeglądarkach opartych na Chromium, systemach operacyjnych Android i komputerach. Gdy używasz jednego z tych interfejsów API, możesz uruchomić kod w wątku skryptu service worker. na przykład do pobierania danych z serwera i aktualizowania danych IndexedDB.

Aktualizuję zasoby

Aktualizacja zasobów obejmuje wszelkie zmiany w plikach używanych do renderowania interfejsu aplikacji, np. w kodzie HTML, CSS, JavaScript i obrazach. Może to być na przykład zmiana logiki aplikacji, obraz, który jest częścią interfejsu, lub arkusz stylów CSS.

Aktualizowanie wzorców

Oto kilka typowych wzorców obsługi aktualizacji aplikacji, ale proces ten możesz zawsze dostosować do własnych potrzeb:

  • Pełna aktualizacja: każda zmiana, nawet niewielka, powoduje zastąpienie całej zawartości pamięci podręcznej. Ten wzorzec symuluje sposób obsługi aktualizacji przez aplikacje na konkretnych urządzeniach oraz zwiększa zużycie przepustowości i czasu.
  • Aktualizacja ze zmienionymi zasobami: w pamięci podręcznej są zastępowane tylko te zasoby, które zostały zmienione od ostatniej aktualizacji. Często implementuje się je za pomocą biblioteki takiej jak Workbox. Polega to na utworzeniu listy plików w pamięci podręcznej, reprezentacji skrótu pliku oraz sygnaturach czasowych. Mając te informacje, mechanizm Service Worker porównuje listę z zasobami w pamięci podręcznej i decyduje, które z nich zaktualizować.
  • Pojedyncze zasoby są aktualizowane: każdy zasób jest aktualizowany pojedynczo w przypadku zmian. Strategia „Nieaktualne podczas ponownej weryfikacji” opisana w rozdziale dotyczącym wyświetlania reklam to przykład metody aktualizowania zasobów pojedynczo.

Kiedy aktualizować

Warto też znaleźć odpowiedni czas na sprawdzenie dostępności aktualizacji i ich zastosowanie. Możliwości są następujące:

  • Po wybudzeniu skryptu service worker. W tej chwili nie ma zdarzenia do nasłuchiwania, ale po wybudzeniu przeglądarka uruchomi dowolny kod w globalnym zakresie skryptu service worker.
  • W kontekście okna głównego aplikacji PWA, po załadowaniu strony przez przeglądarkę, aby uniknąć spowolnienia ładowania aplikacji.
  • Po wywołaniu zdarzeń w tle, na przykład gdy aplikacja PWA otrzyma powiadomienie push lub uruchomi się synchronizacja w tle. Możesz wtedy zaktualizować pamięć podręczną. Dzięki temu użytkownicy, którzy następnym razem otworzą aplikację, będą mieli dostęp do nowej wersji zasobu.
.

Aktualizacja na żywo

Możesz też wybrać, czy aktualizacja ma być stosowana, gdy aplikacja jest otwarta (opublikowana) czy zamknięta. Mimo że aplikacja ma pobrane nowe zasoby, nie spowoduje to żadnych zmian i przy następnym wczytaniu będzie korzystać z nowych wersji.

W wyniku aktualizacji na żywo, gdy tylko zasób zostanie zaktualizowany w pamięci podręcznej, aplikacja PWA zastępuje go w bieżącym wczytywaniu. To złożone zadanie, które nie zostało omówione w tym kursie. Narzędzia, które pomagają w implementacji tej aktualizacji, to livereload-js oraz CSSStyleSheet.replace() API do aktualizacji zasobów CSS.

Aktualizuję skrypt service worker

Przeglądarka aktywuje algorytm aktualizacji, gdy zmieni się skrypt service worker lub jego zależności. Przeglądarka wykrywa aktualizacje, porównując bajty między plikami w pamięci podręcznej a zasobami pochodzącymi z sieci.

Następnie przeglądarka spróbuje zainstalować nową wersję skryptu service worker w stanie oczekiwania, zgodnie z opisem w rozdziale o skryptach roboczych. Nowa instalacja uruchomi zdarzenie install dla nowego skryptu service worker. Jeśli w tym module obsługi zdarzeń przechowujesz zasoby w pamięci podręcznej, zasoby są również zapisywane ponownie.

.

Wykrywanie zmian skryptu service worker

Aby wykryć, że nowy skrypt service worker jest gotowy i zainstalowany, używamy zdarzenia updatefound z rejestracji tego skryptu. To zdarzenie jest wywoływane po rozpoczęciu instalacji nowego skryptu service worker. Musimy poczekać, aż jego stan zmieni się na installed za pomocą zdarzenia statechange. zobacz:

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 mechanizm Service Worker zostanie zainstalowany, ale domyślnie oczekuje na aktywację. Z powodu oczekiwania nowy skrypt service worker nie przejmie starych klientów, które mogą być niezgodne z nową wersją.

Mimo że nie jest to zalecane, nowy skrypt service worker może pominąć ten okres oczekiwania i od razu rozpocząć aktywację.

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 zmieni się skrypt service worker kontrolujący bieżącą stronę. Na przykład nowa instancja robocza pominęła czekanie i została 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ą ustawione głównie w manifeście aplikacji internetowej. Możesz na przykład zaktualizować ikonę, nazwę lub początkowy adres URL aplikacji albo dodać nową funkcję, taką jak skróty do aplikacji. Ale co się stanie z użytkownikami, którzy zainstalowali już aplikację ze starą ikoną na swoich urządzeniach? Jak i kiedy otrzymają zaktualizowaną wersję?

Odpowiedź zależy od platformy. Omówmy dostępne opcje.

Safari w przeglądarkach na iOS, iPadOS i Androida.

Na tych platformach jedynym sposobem na uzyskanie nowych metadanych pliku manifestu jest ponowne zainstalowanie aplikacji z poziomu przeglądarki.

Google Chrome na Androida z WebAPK

Jeśli użytkownik zainstaluje PWA na Androidzie przy użyciu przeglądarki Google Chrome z aktywną aplikacją WebAPK (w przypadku większości instalacji takich aplikacji), aktualizacja zostanie wykryta i zastosowana zgodnie z algorytmem. Zapoznaj się ze szczegółami w tym artykule na temat zmian w plikach manifestu.

Kilka dodatkowych uwag na temat tej procedury:

Jeśli użytkownik nie otworzy Twojej aplikacji PWA, jej pakiet WebAPK nie zostanie zaktualizowany. Jeśli serwer nie odpowie z plikiem 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 aplikację PWA.

Otwórz about:webapks w Chrome na Androida, aby sprawdzić stan „Wymagana aktualizacja” flagę i poproś o aktualizację. Więcej informacji o tym narzędziu do debugowania znajdziesz w sekcji Narzędzia i debugowanie.

Samsung Internet na Androidzie z WebAPK,

Proces ten jest podobny do wersji Chrome. W takim przypadku, jeśli plik manifestu PWA wymaga aktualizacji, w ciągu następnych 24 godzin pakiet WebAPK zostanie zaktualizowany w sieci Wi-Fi po dostosowaniu zaktualizowanego pakietu WebAPK.

Google Chrome i Microsoft Edge na komputerze

Na komputerach po uruchomieniu PWA przeglądarka określa czas ostatniego sprawdzenia zmian w lokalnym pliku manifestu. Jeśli plik manifestu nie został sprawdzony od ostatniego uruchomienia lub nie został sprawdzony w ciągu ostatnich 24 godzin, przeglądarka wysyła żądanie sieciowe na ten plik, a następnie porównuje go z kopią lokalną.

Zaktualizowanie wybranych właściwości powoduje rozpoczęcie aktualizacji po zamknięciu wszystkich okien.

Powiadamianie użytkownika

Niektóre strategie aktualizowania wymagają odświeżenia strony lub wprowadzenia nowych elementów nawigacyjnych klientów. Możesz poinformować użytkownika o dostępnej aktualizacji, ale dać mu możliwość zaktualizowania strony w dogodnym dla siebie czasie.

Użytkownik może to zrobić na 2 sposoby:

  • Używaj DOM lub canvas API, aby wyświetlać powiadomienie na ekranie.
  • używaj interfejsu Web Notification API. Ten interfejs API jest częścią uprawnień push do generowania powiadomień w systemie operacyjnym. Aby z niej korzystać, musisz poprosić o pozwolenie na jej użycie, nawet jeśli nie korzystasz z protokołu komunikatów push z serwera. To jedyna opcja dostępna, jeśli aplikacja PWA nie jest otwarta.
  • Użyj Badging API, aby pokazać, że aktualizacje są dostępne w ikonie zainstalowanej aplikacji PWA.

Powiadomienie o aktualizacji wyświetlane w DOM..

Więcej informacji o interfejsie Badging API

Badging API pozwala oznaczyć ikonę PWA numerem plakietki lub kropką plakietki w zgodnych przeglądarkach. Plakietka z plakietką to mała ikona w obrębie ikony zainstalowanej aplikacji, która informuje, że w aplikacji czeka na Ciebie coś nowego.

Przykład Twittera z 8 powiadomieniami i inną aplikacją z plakietką typu flagi.

Aby ustawić numer plakietki, musisz wywołać setAppBadge(count) w obiekcie navigator. Możesz to zrobić w kontekście okna lub skryptu service worker, jeśli wiesz, że dostępna jest aktualizacja, aby powiadomić użytkownika.

let unreadCount = 125;
navigator.setAppBadge(unreadCount);

Aby usunąć plakietkę, wywołaj funkcję clearAppBadge() w tym samym obiekcie:

navigator.clearAppBadge();

Zasoby