Service workers

Service workers - są mechanizmem wprowadzonym do najnowszych przeglądarek internetowych, które definiują sposób zachowania aplikacji w przypadku utraty połączenia z Internetem. Jest to rozwiązanie mające na celu zapewnienie dostępu offline do aplikacji internetowych. Poprzednim podobnym rozwiązaniem był AppCache. Service Workers to skrypt napisany w JavaScript, który umożliwia pełną kontrolę nad pobieraniem zasobów z określonej domeny. Od czasu swojego wprowadzenia, skrypt ten jest domyślnie obsługiwany przez przeglądarki Chrome. Jest uruchamiany oddzielnie od głównego wątku przeglądarki, co umożliwia obsługę powiadomień w trybie "push", natychmiastową synchronizację danych w tle, przechowywanie w pamięci podręcznej oraz buforowanie. Ponadto, Service Workers wpływa na otrzymywanie scentralizowanych aktualizacji.

Zastosowanie

Service Workers są wykorzystywane do zapewnienia progresywnym aplikacjom webowym wysokiej wydajności oraz dobrej współpracy z natywnymi aplikacjami mobilnymi, przy minimalnym zużyciu miejsca na dysku, aktualizacjach w czasie rzeczywistym i lepszej widoczności tradycyjnych aplikacji sieciowych w wyszukiwarkach internetowych.

Cykl życia

Cykl życia Service Workers jest najbardziej skomplikowaną jego częścią. Jeśli zostanie odpowiednio zaplanowany, umożliwia dostarczanie użytkownikom niezauważalnych aktualizacji.

Jeśli zdefiniujemy ścieżkę na /sw.js, to wszystkie akcje Service Worker wykonywane są w ramach zdarzeń (eventów): install, activate, fetch. tzn. w pliku /sw.js).

Oto przykładowy kod:

self.addEventListener('install', function(event) {
  // Zdarzenie wywoływane po zarejestrowaniu Service Workera
});

self.addEventListener('activate', function(event) {
  // Zdarzenie wywoływane po aktualizacji pliku Service Workera
});

self.addEventListener('fetch', function(event) {
  // Zdarzenie wywoływane podczas próby pobrania zasobu
});

Instalacja

Zdarzenie instalacji - jest pierwszym eventem, który otrzymuje Service Workers i występuje tylko raz - na początku. Polecenie przekazane do installEvent.waitUntil() definiuje czas trwania i status instalacji. Mechanizm nie obsługuje żadnych innych zdarzeń, dopóki instalacja nie zostanie zakończona pomyślnie i Service Worker nie stanie się aktywny. Domyślnie, strona nie przejdzie przez skrypt Service Workera, chyba że żądanie strony zostanie przez niego obsłużone. W takim przypadku konieczne jest odświeżenie strony, aby zobaczyć efekty działania Service Workera.

Zazwyczaj w zdarzeniu "install" wypełnia się pamięć podręczną podstawowymi danymi.

Aktywacja

W zdarzeniu "activate" dokonuje się wszelkich zmian w pamięci podręcznej, takich jak usunięcie niepotrzebnych zasobów.

Pobieranie zasobów

Zdarzenie "fetch" jest wywoływane za każdym razem, gdy próbuje się pobrać zasób. To ostatnie zdarzenie jest wywoływane przy każdej próbie pobrania zasobu, niezależnie od tego, czy aplikacja jest w trybie offline czy online.

Rejestracja Service Workera

Podczas pierwszej wizyty użytkownika na stronie internetowej, przeglądarka nie ma jeszcze zainstalowanego Service Workera. Aby to zrobić, developer musi zdefiniować moment rejestracji Service Workera w taki sposób, aby priorytetowo trafił do przeglądarki użytkownika i zawierał minimalny zestaw informacji potrzebnych do wyświetlenia interaktywnej strony. Wszystkie zasoby strony, które mogą spowolnić proces odpowiedzi, są uważane za niekorzystne dla szybkiej implementacji aplikacji.

Typowe rozwiązanie polega na opóźnieniu rejestracji Service Workera do momentu załadowania strony przez użycie kodu:

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

Jeśli aplikacja korzysta z jakiejś platformy programistycznej, która wykonuje dodatkowe czynności po załadowaniu strony, warto znaleźć specyficzne zdarzenie dla tego frameworka, które sygnalizuje, kiedy te czynności zostaną wykonane. Należy ustalić optymalny moment uruchomienia Service Workera w tle, aby zbytnio nie spowolnić strony.

Podczas kolejnej wizyty nie ma znaczenia, kiedy wywołany zostanie navigator.serviceWorker.register() oraz czy w ogóle to nastąpi. Jeśli nie zmieni się adresu URL Service Workera, rejestracja nie będzie działać podczas kolejnych wizyt – ponieważ skrypt został już zarejestrowany wcześniej.

Bezpieczeństwo

Service Workers mają duże możliwości ingerencji w aplikację, ale wiąże się to również z ryzykiem ataku typu man-in-the-middle, zwłaszcza gdy są udostępniane przez mniej bezpieczny protokół HTTP. Istnieje jednak wyjątek - dla lokalnego hosta (localhost) nie występuje to utrudnienie, co pozwala na przeprowadzanie testów.

Można również podjąć dodatkowe działania, takie jak modyfikacja konfiguracji serwera, która polega na odrzucaniu wszystkich żądań zawierających nagłówek "Service-Worker: script".

Źródła

1. Website Style - Service Worker
2. Google Developers - Introduction to Service Workers