Użytkownicy oczekują, że aplikacje będą uruchamiać się w przypadku powolnych lub niestabilnych połączeń sieciowych nawet wtedy, gdy są offline. Oczekują, że treści, z którymi ostatnio wchodzili w interakcję, takie jak utwory multimedialne, bilety i plany podróży, będą dostępne i użyteczne. Gdy żądanie nie jest możliwe, oczekuje, że aplikacja je wyśle, a nie komunikat o niepowodzeniu lub awarii. Z kolei użytkownicy chcieliby zrobić to szybko. Jak widać w tym badaniu milisekundy dają miliony, nawet skrócenie czasu wczytywania o 0,1 sekundy może zwiększyć liczbę konwersji nawet o 10%. Podsumowując: użytkownicy oczekują, że aplikacje PWA będą niezawodne, dlatego stosujemy mechanizmy Service Worker.
Skrypty service worker
Gdy aplikacja żąda zasobu objętego zakresem skryptu service worker, w tym także, gdy użytkownik jest offline, to skrypt przechwytuje żądanie, działając jako sieciowy serwer proxy. Następnie może zdecydować, czy udostępniać zasób z pamięci podręcznej przez interfejs Cache Storage API, z sieci, tak jak miałoby to miejsce bez skryptu service worker, czy też utworzyć go za pomocą algorytmu lokalnego. Dzięki temu możesz oferować podobne wrażenia z aplikacji platformy, a nawet całkowicie offline.
Rejestrowanie skryptu service worker
Zanim skrypt service worker przejmie kontrolę nad Twoją stroną, musisz zarejestrować ją w PWA. Oznacza to, że gdy użytkownik pierwszy raz korzysta z Twojej aplikacji PWA, żądania sieciowe będą kierowane bezpośrednio na Twój serwer, ponieważ skrypt service worker nie ma jeszcze kontroli nad Twoimi stronami.
Gdy sprawdzisz, czy przeglądarka obsługuje interfejs Service Worker API, możesz zarejestrować skrypt PWA. Po wczytaniu skrypt service worker konfiguruje sklep między aplikacją PWA a siecią, przechwytując żądania i udostępniając odpowiednie odpowiedzi.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("/serviceworker.js");
}
Sprawdzanie, czy skrypt service worker jest zarejestrowany
Aby sprawdzić, czy skrypt service worker jest zarejestrowany, użyj narzędzi dla programistów w ulubionej przeglądarce.
W przeglądarkach opartych na przeglądarce Firefox i Chromium (Microsoft Edge, Google Chrome lub Samsung Internet):
- Otwórz narzędzia dla programistów i kliknij kartę Aplikacja.
- W panelu po lewej stronie wybierz Service Workers.
- Sprawdź, czy adres URL skryptu skryptu service worker wyświetla się ze stanem „Activated” (Aktywny). (Co oznacza ten stan w sekcji Cykl życia w tym rozdziale). W przeglądarce Firefox może to być stan „Uruchomiono” lub „Zatrzymano”.
W przeglądarce Safari:
- Kliknij kolejno menu Develop (Programowanie) i podmenu Service Workers.
- Sprawdź, czy w menu podrzędnym jest widoczny wpis z bieżącym pochodzeniem. Otwiera inspektora nad kontekstem skryptu service worker.
Zakres
Folder, w którym znajduje się skrypt service worker, określa jego zakres. Skrypt service worker znajdujący się pod adresem example.com/my-pwa/sw.js może kontrolować dowolną nawigację na ścieżce my-pwa lub poniżej, na przykład example.com/my-pwa/demos/. Skrypty service worker mogą kontrolować jedynie elementy (strony, instancje robocze, zbiorczo „klienty”) w swoim zakresie. Zakres dotyczy kart przeglądarki i okien PWA.
Dozwolony jest tylko 1 skrypt service worker na zakres. Gdy instancja jest aktywna i uruchomiona, zwykle jest dostępna tylko jedna instancja niezależnie od liczby klientów w pamięci (takich jak okna PWA lub karty przeglądarki).
Safari udostępnia bardziej złożone zarządzanie zakresem (tzw. partycje), co wpływa na działanie zakresów w przypadku międzydomenowych elementów iframe. Więcej informacji o implementacji WebKit znajdziesz w poście na blogu.
Lifecycle
Mechanizmy Service Worker mają cykl życia, który określa sposób ich instalacji. Jest on odrębny od instalacji PWA.
Cykl życia skryptu service worker rozpoczyna się od jego zarejestrowania. Przeglądarka próbuje pobrać i przeanalizować plik skryptu service worker. Jeśli analizowanie się powiedzie, wywoływane jest jego zdarzenie install. Zdarzenie install uruchamia się tylko raz.
Instalacja skryptu service worker odbywa się w trybie cichym, bez pytania użytkownika o zgodę, nawet jeśli użytkownik nie zainstaluje PWA. Interfejs Service Worker API jest dostępny nawet na platformach, które nie obsługują instalacji PWA, takich jak Safari i Firefox na komputerach.
Po instalacji skrypt service worker nie kontroluje jeszcze swoich klientów, w tym PWA. Najpierw musisz je aktywować. Gdy skrypt service worker będzie gotowy do kontrolowania swoich klientów, zdarzenie activate zostanie uruchomione. Nie oznacza to jednak, że strona, na której został zarejestrowany skrypt service worker, będzie zarządzana. Domyślnie skrypt service worker nie przejmie kontroli do czasu kolejnego wyświetlenia tej strony (z powodu ponownego załadowania strony lub ponownego otwarcia PWA).
Możesz nasłuchiwać zdarzeń w zakresie globalnym skryptu service worker za pomocą obiektu self.
serviceworker.js
// This code executes in its own worker or thread
self.addEventListener("install", event => {
console.log("Service worker installed");
});
self.addEventListener("activate", event => {
console.log("Service worker activated");
});
Aktualizowanie skryptu service worker
Skrypty service worker są aktualizowane, gdy przeglądarka wykryje, że obecnie kontrolują one klienta, a nowa wersja (z Twojego serwera) tego samego pliku różni się bajtami.
Po udanej instalacji nowy skrypt service worker będzie czekać na aktywację, aż istniejący (stary) skrypt service worker nie będzie już sterował żadnymi klientami. Ten stan jest nazywany „oczekiwaniem” i pozwala przeglądarka zadbać o to, aby w danym momencie działała tylko jedna wersja skryptu service worker. Odświeżenie strony lub ponowne otwarcie PWA nie spowoduje, że nowy skrypt service worker przejmie kontrolę. Użytkownik musi zamknąć wszystkie karty i okna lub je opuścić, używając bieżącego skryptu service worker, a następnie wrócić do poprzedniej strony. Dopiero wtedy nowy skrypt service worker przejmie kontrolę. Więcej informacji znajdziesz w tym artykule o cyklu życia mechanizmów Service Worker.
Okres ważności skryptu service worker
Po zainstalowaniu i zarejestrowaniu skrypt service worker może zarządzać wszystkimi żądaniami sieciowymi w swoim zakresie. Działa w osobnym wątku, a jego aktywacja i zamykanie zależą od przeglądarki. Dzięki temu będzie ona działać nawet przed otwarciem aplikacji PWA lub po niej. Chociaż mechanizmy Service Worker działają we własnym wątku, nie ma gwarancji, że stan pamięci będzie trwały pomiędzy uruchomieniami skryptu service worker, dlatego upewnij się, że wszystkie elementy, których chcesz używać przy każdym uruchomieniu, są dostępne w IndexedDB lub innej pamięci trwałej.
Skrypt service worker nie jest jeszcze uruchomiony, gdy zostanie wysłane żądanie sieciowe z jego zakresu lub po odebraniu zdarzenia aktywującego, takiego jak okresowa synchronizacja w tle lub komunikat push.
Skrypty service worker nie działają w nieskończoność. Mimo że dokładne czasy różnią się w zależności od przeglądarek, mechanizmy Service Worker są zatrzymywane, jeśli były nieaktywne przez kilka sekund lub były zbyt długo zajęte. Jeśli skrypt service worker został zakończony i wystąpi zdarzenie powodujące jego uruchomienie, zostanie uruchomiony ponownie.
Możliwości
Z zarejestrowanym i aktywnym skryptem service worker masz wątek z całkowicie innym cyklem życia wykonywania niż główny w PWA. Domyślnie jednak plik skryptu service worker nie działa. Nie zapisuje w pamięci podręcznej ani nie obsługuje żadnych zasobów, ponieważ musi to robić Twój kod. W kolejnych rozdziałach dowiesz się, jak to zrobić.
Skrypty service worker nie obsługują tylko serwerów proxy i żądań HTTP. Dostępne są też inne funkcje do innych celów, takich jak uruchamianie kodu w tle, powiadomienia web push i przetwarzanie płatności. Omówimy te możliwości w rozdziale dotyczącym możliwości.