Użytkownicy oczekują, że aplikacje będą działać niezawodnie przy powolnych lub niestabilnych połączeniach sieciowych, a nawet offline. Oczekują, że treści, z którymi ostatnio wchodzili, 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 powiadomi, zamiast tego, że ulega awarii lub się zawiesza. Chce, by wszystko odbywało się jak najszybciej. Jak widać w milisekundach zyskują miliony, nawet skrócenie czasu wczytywania o 0,1 sekundy może zwiększyć liczbę konwersji nawet o 10%. Skrypty service worker pozwalają spełniać oczekiwania użytkowników dzięki progresywnej aplikacji internetowej (PWA).
Gdy aplikacja żąda zasobu objętego zakresem skryptu service worker, przechwytuje on żądanie i działa jako sieciowy serwer proxy, nawet jeśli użytkownik jest offline. Następnie może zdecydować, czy udostępnić zasób z pamięci podręcznej za pomocą interfejsu Cache Storage API, udostępnić go z sieci tak, jakby nie było żadnego aktywnego skryptu service worker, czy utworzyć go za pomocą algorytmu lokalnego. Zapewnia to wysoką jakość obsługi, taką jak w przypadku aplikacji platformy, nawet gdy jest ona offline.
Rejestrowanie skryptu service worker
Zanim skrypt service worker przejmie kontrolę nad stroną, musi zostać zarejestrowany w aplikacji PWA. Oznacza to, że przy pierwszym otwarciu przez użytkownika Twojej aplikacji PWA wszystkie żądania sieciowe są przesyłane bezpośrednio na Twój serwer, ponieważ mechanizm Service Worker nie ma jeszcze kontroli nad Twoimi stronami.
Gdy sprawdzisz, czy przeglądarka obsługuje interfejs Service Worker API, Twoja aplikacja PWA może zarejestrować skrypt service worker. Po załadowaniu skrypt service worker łączy się między Twoją 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 ma stan „Activated” (Aktywny). Więcej informacji znajdziesz w artykule Cykl życia. W przeglądarce Firefox może on mieć stan „Uruchomiono” lub „Zatrzymano”.
W przeglądarce Safari:
- Kliknij Develop (Programowanie) > Service Workers (Skrypty service worker).
- W tym menu poszukaj pozycji z bieżącym źródłem. Kliknięcie tego wpisu spowoduje otwarcie 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 sterować dowolną nawigacją na ścieżce my-pwa, taką jak example.com/my-pwa/demos/. Skrypty service worker mogą kontrolować tylko elementy (strony, instancje robocze, zbiorczo „klienci”) w swoim zakresie.
Ten zakres dotyczy kart przeglądarki i okien PWA.
Na każdy zakres dozwolony jest tylko jeden skrypt service worker. Gdy skrypt service worker jest aktywny i uruchomiony, zwykle jest dostępna tylko jedna instancja niezależnie od liczby klientów (okna PWA lub kart przeglądarki) w pamięci.
Safari udostępnia bardziej złożone zarządzanie zakresem (zwane partycjami), które wpływa na sposób działania zakresów z międzydomenowymi elementami iframe. Więcej informacji o wdrażaniu WebKit znajdziesz w poście na blogu tej usługi.
Lifecycle
Mechanizmy Service Worker mają cykl życia, który określa sposób ich instalacji, niezależnie od instalacji PWA.
Cykl życia skryptu service worker rozpoczyna się od jego zarejestrowania. Przeglądarka spróbuje pobrać i przeanalizować plik skryptu service worker. Jeśli analiza się powiedzie, wywoływane jest zdarzenie install skryptu service worker. 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 mechanizm Service Worker musi zostać aktywowany, aby mógł kontrolować swoje klienty, w tym PWA. Gdy skrypt service worker jest gotowy do kontrolowania swoich klientów, uruchamia się zdarzenie activate. Domyślnie aktywowany skrypt service worker nie może zarządzać stroną, na której została zarejestrowana, do czasu kolejnego otwarcia tej strony przez ponowne załadowanie strony lub ponowne otwarcie aplikacji 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 skrypt service worker steruje klientem, a nowa wersja pliku skryptu service worker z serwera jest inna niż bajty.
Po udanej instalacji nowy skrypt service worker czeka na aktywację, dopóki stary skrypt service worker nie steruje już żadnymi klientami. Ten stan jest nazywany „oczekiwaniem” i gwarantuje, że przeglądarka będzie dbać 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ć za pomocą bieżącego skryptu, a następnie wrócić, aby dać nowemu mechanizmowi kontroli. Więcej informacji znajdziesz w artykule Cykl życia mechanizmów Service Worker.
Okres ważności skryptu service worker
Zainstalowany i zarejestrowany skrypt service worker może zarządzać wszystkimi żądaniami sieciowymi w swoim zakresie. Działa w osobnym wątku, a aktywacja i zakończenie steruje przeglądarka, dzięki czemu może działać nawet przed otwarciem lub po zamknięciu aplikacji PWA. Skrypty service worker działają we własnym wątku, ale stan w pamięci może nie być utrzymywany między uruchomieniami skryptu service worker między uruchomieniami skryptu service worker, dlatego upewnij się, że wszystko, co chcesz wykorzystać w każdym uruchomieniu, jest dostępne w IndexedDB lub w innej pamięci trwałej.
Skrypt service worker nie jest jeszcze uruchomiony, gdy wysyła w jego zakresie żądanie sieciowe lub gdy odbierze zdarzenie aktywujące, takie jak okresowa synchronizacja w tle lub komunikat push.
Skrypty service worker są zatrzymywane, jeśli były nieaktywne przez kilka sekund lub były zbyt długo zajęte. Czas ten różni się w zależności od przeglądarki. Jeśli skrypt service worker został zakończony i wystąpi zdarzenie powodujące jego uruchomienie, zostanie uruchomiona ponownie.
Możliwości
Zarejestrowany i aktywny skrypt service worker używa wątku z zupełnie innym cyklem życia wykonania niż główny wątek PWA. Domyślnie jednak sam plik skryptu service worker nie działa. Nie przechowuje on żadnych zasobów w pamięci podręcznej ani nie udostępnia żadnych zasobów. Tym właśnie musi się zająć Twój kod. W kolejnych rozdziałach dowiesz się, jak to zrobić.
Możliwości skryptu service worker nie dotyczą tylko serwera proxy czy obsługi żądań HTTP. Dostępne są też inne funkcje, takie jak uruchamianie kodu w tle, internetowe powiadomienia push i przetwarzanie płatności. Omówimy te możliwości w sekcji Możliwości.