Service Worker

Service Worker to skrypt działający w tle, zarejestrowany w przeglądarce, który działa niezależnie od otwartej strony internetowej. Może przechwytywać żądania sieciowe, buforować dane offline i — co najważniejsze dla marketingu — odbierać przychodzące zdarzenia push i wyświetlać powiadomienia nawet gdy karta przeglądarki jest zamknięta.

Co to jest Service Worker?

Service Worker to skrypt JavaScript zarejestrowany w przeglądarce, który działa jako worker całkowicie oddzielony od strony internetowej. Podczas gdy normalna strona kończy działanie po zamknięciu karty, Service Worker nadal działa w tle — nawet bez żadnych otwartych kart. Jest techniczną podstawą nowoczesnych Progressive Web Apps (PWA) i jedyną możliwością odbierania powiadomień push w przeglądarce.

Service Workery zostały wprowadzone przez Google w 2014 roku i są dziś obsługiwane przez wszystkie nowoczesne przeglądarki (Chrome, Edge, Firefox, Safari, Samsung Internet, Opera). Zastępują starsze i wycofane API Application Cache.

Cykl życia Service Workera

  1. Rejestracja: Strona wywołuje navigator.serviceWorker.register('/sw.js'). Przeglądarka pobiera skrypt i parsuje go.
  2. Instalacja: Service Worker uruchamia zdarzenie install. Zazwyczaj tutaj następuje wstępne buforowanie zasobów.
  3. Aktywacja: Po pomyślnej instalacji przeglądarka aktywuje Service Workera. Stare wersje są wyłączane, jeśli są obecne.
  4. Bezczynność / Aktywny: Service Worker odpoczywa w tle i jest budzony tylko gdy dotrze zdarzenie (push, sync, fetch).
  5. Zakończenie: Przeglądarki mogą w każdej chwili zakończyć nieaktywne Service Workery, aby oszczędzić pamięć. Przy kolejnym zdarzeniu worker jest uruchamiany ponownie.

Service Worker i powiadomienia push

Dla powiadomień browser-push, Service Worker jest obowiązkowy: jest jedynym odbiorcą zdarzenia push. Gdy tylko zaszyfrowana wiadomość push dotrze z serwisu push, przeglądarka budzi Service Workera i dostarcza zdarzenie:

self.addEventListener('push', event => {
  const data = event.data.json();
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: data.icon,
      badge: data.badge,
      data: { url: data.url }
    })
  );
});

self.addEventListener('notificationclick', event => {
  event.notification.close();
  event.waitUntil(
    clients.openWindow(event.notification.data.url)
  );
});

Powiadomienie systemowe pojawia się nawet gdy karta przeglądarki jest zamknięta. Gdy użytkownik w nie kliknie, przeglądarka otwiera docelowy URL.

Funkcjonalność offline i buforowanie

Drugą główną funkcją Service Workera jest przechwytywanie żądań sieciowych przez zdarzenie fetch. Pozwala to na używanie stron internetowych offline (wzorzec PWA) przez buforowanie statycznych zasobów i odpowiedzi API. Dla stron MŚP bez ambicji aplikacyjnych push jest głównym przypadkiem użycia; funkcje PWA są opcjonalne.

Wymaganie HTTPS i zakres

Service Workery działają wyłącznie przez HTTPS (wyjątek: localhost dla celów deweloperskich). Service Worker może przechwytywać tylko żądania w swoim scope — domyślnie w ścieżce swojego pliku. Service Worker zarejestrowany pod /sw.js obejmuje całą domenę; ten zarejestrowany pod /blog/sw.js obejmuje tylko /blog/*.

Debugowanie

Chrome DevTools udostępnia przegląd wszystkich zarejestrowanych workerów w zakładce 'Application → Service Workers' ze statusem, źródłem, testem push i ręcznym wyrejestrowaniem. Firefox ma podobną zakładkę pod about:debugging. Zdarzenia push można symulować z poziomu DevTools bez faktycznego wysyłania wiadomości.

Best practice dla MŚP

  • Jeden plik Service Workera na domenę. Różne workery dla różnych ścieżek szybko prowadzą do niespójnego zachowania.
  • Unikaj wersjonowania w nazwie pliku. Service Workery są identyfikowane przez przeglądarkę po URL; przy sufiksach wersji każda aktualizacja wymaga ponownej rejestracji. Lepiej wersjonować zawartość pliku (np. stała const SW_VERSION = '1.4').
  • Zawsze implementuj handler kliknięcia powiadomienia, w przeciwnym razie kliknięcie powiadomienia nic nie otwiera i użytkownik jest sfrustrowany.
  • Odnawianie subskrypcji: Przeglądarki mogą unieważniać subskrypcje bez ostrzeżenia. Sprawdzaj przy kolejnej wizycie na stronie i w razie potrzeby ponownie rejestruj.

Service Worker z SendSeven

SendSeven dostarcza wstępnie skonfigurowany Service Worker dla kanału browser-push, który obsługuje kompletny cykl życia push (subskrypcja, odbiór, kliknięcie, wypisanie). Wdrożenie wymaga jednej linii kodu — nie jest potrzebna własna konfiguracja JavaScript. Kto chce własnych dostosowań, otrzymuje kod źródłowy Service Workera i może go rozwidlić. Każda wiadomość push jest dostarczana zaszyfrowana przez Web Push API — zgodnie z RODO, hosting w UE, umowa DPA zgodnie z art. 28 RODO.