użytkownicy oczekują, że aplikacje będą się uruchamiać niezawodnie przy wolnych lub niestabilnych połączeniach sieciowych; nawet offline. Oczekują treści, z którymi ostatnio weszli w interakcję, takie jak ścieżki multimedialne, bilety i plany podróży – muszą one być dostępne i użyteczne. Gdy prośba nie jest dostępna, użytkownik oczekuje, że poinformuje go o tym aplikacja, a nie bez Twojej wiedzy. Chce, żeby wszystko odbyło się szybko. Jako jak w milisekundach, jak miliony ludzi, nawet skrócenie czasu wczytywania o 0,1 sekundy może zwiększyć liczbę konwersji nawet o 10%. Skrypty Service Worker to narzędzie, które umożliwia progresywną aplikację internetową (PWA) użytkowników z oczekiwaniami.
Gdy aplikacja żąda zasobu objętego zakresem skryptu service worker, mechanizm Service Worker przechwytuje żądanie i działa jako sieciowy serwer proxy, nawet jeśli Użytkownik jest offline. Następnie może zdecydować, czy powinien udostępniać zasób z buforować przy użyciu interfejsu Cache Storage API, udostępniać ją z sieci tak, jakby nie było aktywny skrypt service worker albo utwórz go na podstawie lokalnego algorytmu. Dzięki temu możesz: zapewniają użytkownikom wrażenia wysokiej jakości, jak w przypadku aplikacji platformowych, Aplikacja jest offline.
Rejestrowanie skryptu service worker
Zanim skrypt service worker przejmie kontrolę nad Twoją stroną, musisz zarejestrować się w usłudze Twoją progresywną aplikację internetową. Oznacza to, że przy pierwszym uruchomieniu aplikacji PWA przez użytkownika cała jej sieć bezpośrednio do serwera, ponieważ mechanizm Service Worker nie ma i kontrolę nad swoimi stronami.
Po sprawdzeniu, czy przeglądarka obsługuje interfejs Service Worker API, aplikacja PWA może zarejestrować skrypt service worker. Po wczytaniu skrypt service worker się konfiguruje. między PWA a siecią, przechwytując żądania i udostępniając odpowiadające odpowiedziom.
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ądarki.
w Firefoksie i przeglądarkach opartych na 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 jest widoczny ze stanem „Aktywowano”. (Więcej informacji znajdziesz w artykule Cykl życia). W przeglądarce Firefox może mieć stan „Uruchomiono”, lub „Zatrzymano”.
W przeglądarce Safari:
- Kliknij Programowanie > Skrypty Service Workers.
- Poszukaj w tym menu wpisu z bieżącym punktem początkowym. Kliknięcie tego wpisu otwiera inspektora nad kontekstem skryptu service worker.
Zakres
Folder, w którym znajduje się skrypt service worker, określa jego zakres. Skrypt service worker
mieszkające pod adresem example.com/my-pwa/sw.js, może kontrolować dowolną nawigację na poziomie lub poniżej
ścieżkę my-pwa, na przykład example.com/my-pwa/demos/. Skrypty service worker mogą
kontrolować wyłącznie elementy w swoim zakresie (strony, instancje robocze, łącznie „klientami”).
Ten zakres dotyczy kart przeglądarki i okien PWA.
Dozwolony jest tylko 1 skrypt service worker na zakres. Gdy skrypt service worker jest aktywny i są uruchomione, zwykle dostępna jest tylko jedna instancja bez względu na liczbę klientów (okna PWA lub karty przeglądarki) są w pamięci.
Safari zarządza bardziej złożonymi zakresami (zwanymi partycjami), co wpływa na sposób Zakresy działają z międzydomenowymi elementami iframe. Aby dowiedzieć się więcej o usłudze WebKit Więcej informacji znajdziesz w poście na blogu tej firmy.
Lifecycle
Skrypty service worker określają sposób ich instalowania – oddzielnie po instalacji PWA.
Cykl życia skryptu service worker rozpoczyna się od zarejestrowania tego skryptu.
przeglądarka następnie spróbuje pobrać i przeanalizować plik skryptu service worker. W przypadku analizy
zostanie wywołane zdarzenie install skryptu service worker. Wydarzenie install
uruchamia się tylko raz.
Skrypt service worker jest przeprowadzany w trybie dyskretnym, bez konieczności uzyskania zgody użytkownika nawet jeśli użytkownik nie zainstaluje PWA. Interfejs Service Worker API jest dostępny nawet w przypadku platform, które nie obsługują instalacji PWA, takich jak Safari czy Firefox na komputerach.
Po instalacji skrypt service worker musi zostać aktywowany, aby można go było
kontrolę nad swoimi klientami, w tym Twoją progresywną aplikacją internetową. Gdy skrypt service worker jest gotowy do
nad swoimi klientami, uruchamia się zdarzenie activate. Domyślnie jednak
aktywowany skrypt service worker nie może zarządzać stroną, na której został zarejestrowany, do następnego
podczas przejścia na tę stronę przez jej ponowne załadowanie lub ponowne otwarcie PWA.
Możesz nasłuchiwać zdarzeń w globalnym zakresie skryptu service worker za pomocą self
obiekt:
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 taki skrypt kontrolowania klienta i nowej wersji pliku service worker z poziomu i serwery różnią się bajtami.
Po udanej instalacji nowy mechanizm Service Worker czeka na aktywację do poprzedni skrypt service worker nie kontroluje już żadnych klientów. Ten stan nazywamy „oczekiwanie”. Dzięki temu przeglądarka będzie zagwarantować, że tylko jedna wersja skrypt service worker jest uruchomiony w danym momencie.
Odświeżenie strony lub ponowne otwarcie PWA nie sprawi, że nowy skrypt service worker . Użytkownik musi zamknąć wszystkie karty i okna lub wyjść z nich za pomocą obecny skrypt service worker, a potem przejdź wstecz, aby udostępnić nowy skrypt service worker . Więcej informacji znajdziesz w artykule Cykl życia mechanizmów Service Worker.
Czas życia mechanizmów Service Worker
Zainstalowany i zarejestrowany skrypt service worker może zarządzać wszystkimi żądaniami sieciowymi w jej zakresie. Działa w osobnym wątku, z aktywacją i zakończeniem jest kontrolowane przez przeglądarkę, dzięki czemu może działać nawet przed otwarciem aplikacji PWA lub po jego zamknięciu. Skrypty service worker działają we własnym wątku, ale w stanie pamięci mogą nie pozostawać trwałe między uruchomieniami skryptu service worker, dlatego upewnij się, którego chcesz użyć w przypadku każdego uruchomienia, jest dostępna w IndexedDB pamięci trwałej.
Skrypt service worker jest uruchamiany przy każdym żądaniu sieciowym, jeśli jeszcze nie został uruchomiony. jest wysyłana w jej zakresie lub gdy otrzyma zdarzenie wyzwalające, np. okresowe synchronizacji w tle lub wiadomości push.
Skrypty service worker są zamykane, jeśli są nieaktywne przez kilka sekund lub mają zbyt dużo pracy. Czas ten może być różny w zależności od przeglądarki. Jeśli skrypt service worker został zakończony i wystąpiło zdarzenie, które powoduje jego uruchomienie, i uruchomi się ponownie.
Możliwości
Zarejestrowany i aktywny skrypt service worker używa wątku z zupełnie innym cyklu życia aplikacji z głównego wątku aplikacji PWA. Domyślnie jednak funkcja Sam plik mechanizmu Service Worker nie działa. Nie będzie zapisywać w pamięci podręcznej ani wyświetlać żadnych zasobów; to elementy, które musi wykonać Twój kod. W sekcji w kolejnych rozdziałach.
Możliwości Service Worker nie dotyczą tylko serwera proxy czy obsługi żądań HTTP. Oprócz niej dostępne są też inne funkcje do innych celów, np. działania w tle wykonywanie kodu, powiadomienia push i przetwarzanie płatności. Omówimy te dodatkowe funkcje w sekcji Możliwości.