Czy zastanawiałeś się kiedyś, jak niektóre strony internetowe wydają się działać, nawet gdy jesteś offline? Sekret jest prosty: te strony internetowe mają pracowników usług.
Service Worker to kluczowa technologia, która kryje się za wieloma natywnymi, podobnymi do aplikacji funkcjami nowoczesnych aplikacji internetowych.
Kim są pracownicy usług?
Pracownicy serwisu są wyspecjalizowanym typem Pracownicy sieci JavaScript. Service worker to plik JavaScript, który działa trochę jak serwer proxy. Przechwytuje wychodzące żądania sieciowe z Twojej aplikacji, umożliwiając tworzenie niestandardowych odpowiedzi. Możesz na przykład udostępniać użytkownikowi pliki z pamięci podręcznej, gdy jest on w trybie offline.
Service Workery umożliwiają również dodawanie funkcji, takich jak synchronizacja w tle, do aplikacji internetowych.
Dlaczego pracownicy usług?
Twórcy stron internetowych od dawna starają się rozszerzać możliwości swoich aplikacji. Zanim pojawili się pracownicy serwisu, można było skorzystać z różnych rozwiązań, aby było to możliwe. Szczególnie godny uwagi był AppCache, dzięki któremu zasoby pamięci podręcznej były wygodne. Niestety miał problemy, które sprawiły, że było to niepraktyczne rozwiązanie dla większości aplikacji.
AppCache wydawał się dobrym pomysłem, ponieważ pozwalał na bardzo łatwe określenie zasobów do buforowania. Jednak przyjął wiele założeń dotyczących tego, co próbujesz zrobić, a następnie strasznie się zepsuł, gdy Twoja aplikacja nie spełniała dokładnie tych założeń. Przeczytaj Jake Archibald's (niestety zatytułowany, ale dobrze napisany) Pamięć podręczna aplikacji to douchebag po więcej szczegółów. (Źródło: MDN)
Service Workery to aktualna próba zmniejszenia ograniczeń aplikacji internetowych, bez wad technologii takich jak AppCache.
Przypadki użycia dla Service Workers
Więc na co dokładnie pozwalają ci pracownicy usług? Service Workery umożliwiają dodawanie do aplikacji sieci Web funkcji charakterystycznych dla aplikacji natywnych. Mogą również zapewnić normalne działanie na urządzeniach, które nie obsługują pracowników serwisu. Takie aplikacje są czasami nazywane Progresywne aplikacje internetowe (PWA).
Oto niektóre funkcje, które umożliwiają service workery:
- Umożliwienie użytkownikowi dalszego korzystania z aplikacji (lub przynajmniej jej części), gdy nie ma już połączenia z internetem. Service Workery osiągają to, obsługując buforowane zasoby w odpowiedzi na żądania.
- W przeglądarkach opartych na Chromium, Service Worker jest jednym z wymagań, aby można było zainstalować aplikację internetową.
- Service Workery są niezbędne, aby Twoja aplikacja internetowa mogła zaimplementować powiadomienia push.
Cykl życia pracownika usługi
Pracownicy usług mogą kontrolować żądania dotyczące całej witryny lub tylko części jej stron. Określona strona sieci Web może mieć tylko jednego aktywnego Service Worker, a wszystkie Service Workery mają cykl życia oparty na zdarzeniach. Cykl życia pracownika usługi ogólnie wygląda tak:
- Rejestracja i pobranie pracownika. Życie pracownika usługi rozpoczyna się w momencie zarejestrowania go przez plik JavaScript. Jeśli rejestracja się powiedzie, service worker pobiera, a następnie zaczyna działać w specjalnym wątku.
- Po załadowaniu strony kontrolowanej przez Service Worker, Service Worker otrzymuje zdarzenie „install”. Jest to zawsze pierwsze zdarzenie odbierane przez Service Worker i możesz skonfigurować nasłuchiwanie tego zdarzenia w ramach procesu roboczego. Zdarzenie „install” jest zwykle używane do pobierania i/lub buforowania wszelkich zasobów, których potrzebuje Service Worker.
- Po zakończeniu instalacji Service Worker otrzymuje zdarzenie „aktywuj”. To zdarzenie umożliwia pracownikowi wyczyszczenie nadmiarowych zasobów używanych przez poprzednich pracowników usługi. Jeśli aktualizujesz pracownika serwisu, zdarzenie aktywacji zostanie uruchomione tylko wtedy, gdy będzie to bezpieczne. Dzieje się tak, gdy nie ma załadowanych stron, które nadal korzystają ze starej wersji Service Workera.
- Następnie pracownik serwisu ma pełną kontrolę nad wszystkimi stronami, które zostały załadowane po pomyślnej rejestracji.
- Ostatnią fazą cyklu życia jest nadmiarowość, która występuje, gdy pracownik serwisu zostanie usunięty lub zastąpiony nowszą wersją.
Jak korzystać z Service Workerów w JavaScript
Interfejs API Service Workera (MDN) udostępnia interfejs, który umożliwia tworzenie i interakcję z pracownikami usług w języku JavaScript.
Service Workery zajmują się głównie żądaniami sieci i innymi zdarzeniami asynchronicznymi. W rezultacie interfejs Service Worker API intensywnie wykorzystuje Obietnice i programowanie asynchroniczne.
Aby utworzyć pracownika serwisu, pierwszą rzeczą, którą musisz zrobić, to zadzwonić do nawigator.serviceWorker.register() metoda. Oto jak to może wyglądać:
jeśli ('ServiceWorker' w nawigatorze) {
navigator.serviceWorker.register('/sw.js').then(funkcjonować(rejestracja){
konsola.log('Rejestracja pracownika serwisu powiodła się:', rejestracja);
}).catch((błąd) => { konsola.log('Rejestracja pracownika usługi nie powiodła się:', błąd); });
} w przeciwnym razie {
konsola.log('Pracownicy serwisu nie są obsługiwani.');
}
Najbardziej zewnętrzny blok if wykonuje wykrywanie cech. Zapewnia to, że kod związany z Service Workerem będzie działał tylko w przeglądarkach obsługujących Service Worker.
Następnie kod wywołuje Zarejestruj się metoda. Przekazuje mu ścieżkę do pracownika serwisu (względem pochodzenia witryny), aby go zarejestrować i pobrać. The Zarejestruj się Metoda przyjmuje również opcjonalny parametr o nazwie scope, którego można użyć do ograniczenia stron kontrolowanych przez pracownika. Service Workery domyślnie kontrolują wszystkie strony aplikacji. The Zarejestruj się Metoda zwraca Promise, który wskazuje, czy rejestracja powiodła się.
Jeśli obietnica zostanie rozwiązana, pracownik serwisu zarejestrował się pomyślnie. Kod następnie drukuje na konsoli obiekt reprezentujący zarejestrowanego pracownika serwisu.
Jeśli proces rejestracji się nie powiedzie, kod przechwyci błąd i zarejestruje go w konsoli.
Oto uproszczony przykład tego, jak może wyglądać sam Service Worker:
self.addEventListener('zainstalować', (zdarzenie) => {
event.waitUntil(NowyObietnica((rozwiąż, odrzuć) => {
konsola.log("robienie ustawień")
rozstrzygać()
}))
konsola.log("Pracownik serwisu zakończył instalację")
})self.addEventListener('Aktywuj', (zdarzenie) => {
event.waitUntil(NowyObietnica((rozwiąż, odrzuć) => {
konsola.log("robienie sprzątania!")
rozstrzygać()
}))
konsola.log('aktywacja zakończona!')
})
self.addEventListener('aportować', (zdarzenie) => {
konsola.log("Przechwycone żądanie", wydarzenie)
});
Ten pracownik usługi demonstracyjnej ma trzy detektory zdarzeń, zarejestrowane przeciwko sobie. Ma jeden na zdarzenie „zainstaluj”, „aktywuj” i „pobierz”.
W pierwszych dwóch słuchaczach kod używa Poczekaj, aż metoda. Ta metoda akceptuje obietnicę. Jego zadaniem jest upewnienie się, że pracownik serwisu poczeka na rozwiązanie lub odrzucenie obietnicy przed przejściem do następnego wydarzenia.
Odbiornik pobierania jest uruchamiany za każdym razem, gdy wysyłane jest żądanie dotyczące zasobu kontrolowanego przez Service Worker.
Zasoby kontrolowane przez pracownika usługi obejmują wszystkie kontrolowane przez niego strony, a także wszelkie zasoby, do których odwołują się te strony.
Ulepsz swoje aplikacje internetowe za pomocą Service Workers
Serviceworkers to szczególny rodzaj webworkerów, który służy wyjątkowemu celowi. Siedzą przed żądaniami sieci, aby włączyć funkcje, takie jak dostęp do aplikacji w trybie offline. Korzystanie z usług Service Worker w aplikacji internetowej może znacznie poprawić komfort jej użytkowania. Za pomocą interfejsu Service Worker API można tworzyć procesy robocze i komunikować się z nimi.