Rejestracja skryptu service worker

Sprawdzone metody ustawiania czasu rejestracji skryptu service worker.

Jeff Posnick

Usługa pracownicy może znacznie przyspieszyć ponowne korzystanie z Twojej aplikacji, ale kroków, aby zapewnić, że pierwsza instalacja mechanizmu Service Worker nie pogorszy podczas pierwszej wizyty.

Ogólnie odraczanie skryptu service worker rejestracja po załadowaniu strony początkowej zapewni najlepsze wrażenia zwłaszcza użytkownikom urządzeń mobilnych z wolniejszym połączeniem sieciowym.

Schemat powszechnej rejestracji

Jeśli zdarzyło Ci się czytać o mechanizmach Service Worker, pewnie znasz już zasadniczo podobne do tych:

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js');
}

Może się to wiązać z kilkoma instrukcjami console.log() lub kod wykrywającego aktualizację wcześniejszej rejestracji skryptu service worker jako sposób informując użytkowników o konieczności odświeżenia strony. To jednak tylko niewielkie różnice to kilka standardowych linijek kodu.

Czy navigator.serviceWorker.register ma jakieś niuanse? Czy są jakieś do sprawdzonych metod? Nie jest niczym dziwnym (biorąc pod uwagę, że ten artykuł nie kończy się tutaj), odpowiedź na oba pytania brzmi „tak!”.

Pierwsza wizyta użytkownika

Weźmy pod uwagę pierwszą wizytę użytkownika w aplikacji internetowej. Nie ma jeszcze skryptu service worker, a przeglądarka nie może z wyprzedzeniem wiedzieć, czy będzie dostępna usługa instancji roboczej.

Jako programista Twoim priorytetem powinno być dopilnowanie, by przeglądarka szybko uzyskuje minimalny zestaw niezbędnych zasobów niezbędnych do wyświetlenia stronę. Wszystko, co spowalnia uzyskanie odpowiedzi, jest wrogiem Pozwala też szybko przechodzić do interakcji.

Wyobraźmy sobie teraz, że podczas pobierania skryptów JavaScript lub obrazów, musi zostać wyrenderowana strona, przeglądarka decyduje o rozpoczęciu wątku w tle lub (dla zachowania zwięzłości zakładamy, że chodzi o wątek). Załóżmy, że nie korzystamy z komputera o dużych możliwościach, przez większość użytkowników na świecie urządzenia mobilne. Szybkie kręcenie ten dodatkowy wątek zwiększa rywalizację o czas pracy procesora i pamięć, którą można przeznaczyć na renderowanie interaktywnej strony internetowej.

Nieaktywny wątek w tle prawdopodobnie nie zmieni zasadniczej różnicy. Ale co jeśli wątek nie jest nieaktywny, ale zamiast tego decyduje, że się rozpocznie. pobierasz zasoby z sieci? Problemy z procesorem lub pamięcią należy przestać się martwić o ograniczoną przepustowość. na wiele urządzeń mobilnych. Przepustowość sieci jest cenna, więc nie podważaj jej zasobów krytycznych, pobierając zasoby dodatkowe w tym samym czasie.

Trzeba podkreślić, że utworzenie nowego wątku skryptu service worker do pobrania i buforowanie zasobów w tle może pomóc w zapewnieniu przy pierwszej wizycie użytkownika na stronie witrynie.

Ulepszanie stałego

Rozwiązaniem jest kontrolowanie uruchamiania skryptu service worker przez wybór czasu wywołania navigator.serviceWorker.register() Najprostszą zasadą jest opóźnienie rejestracja do load event uruchamia się window, czyli:

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js');
    });
}

Jednak właściwy moment na rozpoczęcie rejestracji skryptu Service Worker może zależeć od tego, działania aplikacji internetowej zaraz po jej wczytaniu. Na przykład konferencja Google I/O Aplikacja internetowa 2016 zawiera krótką animację przed przejściem do ekranu głównego. Nasz zespół znaleziłem ten kopnięcie wyłączenie rejestracji skryptu service worker podczas animacji może doprowadzić do zakłóceń. na niedrogich urządzeniach mobilnych. Zamiast dbać o wygodę użytkowników, staramy się opóźniony procesu rejestracji mechanizmu Service Worker po zakończeniu animacji, gdy najczęściej może nie odpowiadać na kilka sekund bezczynności.

Podobnie, jeśli aplikacja internetowa używa platformy, która przeprowadza dodatkową konfigurację po po załadowaniu strony poszukaj zdarzenia powiązanego z konkretną platformą, które sygnalizuje, udało się.

Kolejne wizyty

Do tej pory skupialiśmy się na pierwszej wizycie, ale co może zmienić Czy opóźniona rejestracja pracowników usługowych wiąże się z ponownymi wizytami w Twojej witrynie? Dla niektórych osób może to zaskoczyć, ale nie powinno to mieć żadnego wpływu.

Zarejestrowany skrypt service worker przechodzi przez install oraz Cykl życia activate zdarzeń. Po aktywowaniu skryptu service worker może on obsługiwać zdarzenia fetch dla dowolnych kolejnych wizyt w aplikacji internetowej. Skrypt service worker uruchamia się przed dla dowolnych stron wchodzących w jej zakres. Ma to sens, na ten temat. Jeśli istniejący skrypt service worker nie był jeszcze uruchomiony przed odwiedzający stronę, nie mógłby zrealizować żadnych zdarzeń fetch dla żądań nawigacji.

Gdy jest aktywny skrypt service worker, nie ma znaczenia, kiedy zadzwonisz navigator.serviceWorker.register(), a nawet bez względu na to, czy nazywasz ją w ogóle. Jeśli nie zmienisz adresu URL skryptu service worker, navigator.serviceWorker.register() to w praktyce no-op podczas kolejnych wizyt. Kiedy to jest nieistotne.

Powody wcześniejszej rejestracji

Czy są jakieś sytuacje, w których mechanizm Service Worker zostanie zarejestrowany ma sens? Przychodzi mi na myśl, że mechanizm Service Worker używa clients.claim() przejęcie kontroli nad stroną podczas pierwszej wizyty, a skrypt service worker agresywnie wykonuje środowisko wykonawcze zapisywanie w pamięci podręcznej w ramach modułu obsługi fetch. Wtedy dochodzi do jak najszybciej aktywując skrypt service worker, aby spróbować zapełnia pamięci podręczne środowiska wykonawczego zasobami, które mogą się później przydać. Jeśli należy do tej kategorii, warto zrobić krok w tył, aby sprawdź, czy moduł obsługi install skryptu service worker nie żąda które konkurują o przepustowość z żądaniami strony głównej.

Testowanie różnych funkcji

Doskonałym sposobem symulacji pierwszej wizyty jest otwarcie aplikacji internetowej w Chrome Tryb incognito okno, i spójrz na ruch sieciowy w interfejsie Chrome Narzędzia deweloperskie. Jako sieć programisty, prawdopodobnie ponownie wczytujesz lokalną instancję swojej aplikacji internetowej kilkadziesiąt razy dziennie. Gdy w Twojej witrynie jest już i w pełni zapełnione pamięci podręczne, nie są identyczne nowego użytkownika, a potencjalny problem można łatwo zignorować.

Oto przykład ilustrujący różnicę w czasie rejestracji marki. Oba zrzuty ekranu są wykonywane podczas odwiedzania przykładowego aplikacji w Tryb incognito z wykorzystaniem ograniczania przepustowości sieci w celu symulacji wolnego połączenia.

Zrzut ekranu powyżej odzwierciedla ruch w sieci po zmodyfikowaniu próbki , aby jak najszybciej przeprowadzić rejestrację skryptu service worker. Możesz zobaczyć, żądań wstępnego buforowania (wpisy z kołem zębatym pochodzące z modułu obsługi install skryptu service worker) z żądaniami innych zasobów niezbędnych do wyświetlenia strony.

Na zrzucie ekranu powyżej rejestracja skryptu service worker została opóźniona do strona została wczytana. Możesz zobaczyć, że żądania wstępnego buforowania rozpoczynają się dopiero zasoby zostały pobrane z sieci, co eliminuje rywalizację o połączenia internetowego. Ponieważ niektóre elementy wstępnie buforowane są już w pamięci podręcznej HTTP przeglądarki – elementy z atrybutem (from disk cache) w kolumnie Rozmiar. kolumny – możemy zapełnić pamięć podręczną skryptu service worker bez konieczności z sieci komórkowej.

Dodatkowe punkty za wykonanie tego typu testu na niskobudżetowym urządzeniu rzeczywistej sieci komórkowej. Możesz skorzystać z oferowanego przez Chrome zdalnego debugowania możliwości podłącz telefon z Androidem do komputera przez USB i upewnij się, że które testy odzwierciedlają rzeczywiste wrażenia wielu z Twoich użytkowników.

Podsumowanie

Podsumowując, warto zadbać o jak najlepsze wrażenia użytkowników podczas pierwszej wizyty. która powinna być priorytetem. Opóźniam rejestrację mechanizmu usługowego do po wczytanie strony podczas pierwszej wizyty może to potwierdzić. Nadal otrzymasz wszystkie korzyści związane z usługodawcami w przypadku kolejnych wizyt.

Prosty sposób na opóźnienie początkowego wdrożenia skryptu service worker rejestracji do czasu załadowania pierwszej strony należy użyć następującego kodu:

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js');
    });
}