Service Worker

Okunuşu: sörvis vörkır

Güncellendi 30 Eylül 20262 dk okuma

Kısaca

Service worker, tarayıcının arka planda, sayfadan ayrı çalıştırdığı, ağ isteklerini yakalayıp çevrimdışı kullanımı ve push mesajlarını sağlayan betiktir.

Service worker nedir?

Service worker, tarayıcının herhangi bir web sayfasından ayrı olarak arka planda çalıştırdığı özel bir JavaScript dosyasıdır. Web uygulamanızla ağ arasında programlanabilir bir proxy gibi durur: sayfanın HTML, betik, görsel veya API verisi için yaptığı her istek onun üzerinden geçebilir ve service worker yanıtı önbellekten mi vereceğine, ağa mı gideceğine, yoksa ikisini birleştireceğine karar verir.

Bir sayfa service worker'ı navigator.serviceWorker.register() ile kaydeder; tarayıcı da onu yükleme (installing), bekleme (waiting) ve etkinleşme (activating) yaşam döngüsünden geçirir. Worker, önemli dosyaları genellikle önceden önbelleğe aldığı install, istekleri işlediği fetch ve bildirim gösterebildiği push gibi olaylara tepki verir. Service worker'ların DOM'a erişimi yoktur, yalnızca HTTPS üzerinden (geliştirme sırasında localhost'ta da) çalışır, boştayken tarayıcı tarafından durdurulur ve yeni bir olay geldiğinde yeniden başlatılır.

Postanızı eleyen bir asistan düşünün: bazı mektuplar hemen bir dosya dolabından yanıtlanır, yalnızca geri kalanı size iletilir. Service worker'lar aşamalı web uygulamalarının (PWA) temel teknolojisidir; çevrimdışı sayfaları, daha hızlı tekrar ziyaretleri, arka planda eşzamanlamayı ve web push bildirimlerini mümkün kılar.

Service worker sıklıkla web worker ile karıştırılır. İkisi de JavaScript'i ana iş parçacığının dışında çalıştırır; ancak web worker tek bir sayfaya aittir ve ağır hesaplamalar için kullanılırken, service worker kapsamındaki (scope) her sayfayı denetler, ağ trafiğini yakalar ve sekme kapatıldıktan sonra da çalışmaya devam edebilir. Hatalı bir service worker eski dosyaları sunmaya devam edebileceğinden güncellemeler dikkat gerektirir; örneğin önbellek adlarını sürümlemek ve yeni worker etkinleştiğinde eski önbellekleri silmek gibi.

Önemli noktalar

Service worker, bir sitenin ağ isteklerini yakalayabilen arka plan betiğidir.
Çevrimdışı desteği, önbellek stratejilerini, push bildirimlerini ve arka planda eşzamanlamayı mümkün kılar.
DOM'a erişimi yoktur ve localhost dışında HTTPS gerektirir.
Sayfaları denetlemeden önce yükleme, bekleme ve etkinleşme aşamalarından geçer.
Web worker'ın aksine yalnızca bir sayfayı değil, kapsamındaki her sayfayı denetler.

Örnek

Önce önbelleğe bakan bir service workerjavascript

// main.js: register the service worker
navigator.serviceWorker.register("/sw.js");

// sw.js: pre-cache key files, then answer requests from the cache first
self.addEventListener("install", (event) => {
  event.waitUntil(caches.open("v1").then((c) => c.addAll(["/", "/app.css"])));
});

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => cached || fetch(event.request))
  );
});

Sık sorulan sorular

Service worker ile web worker arasındaki fark nedir?

Web worker, tek bir sayfa için ağır JavaScript işlerini arka planda çalıştırır. Service worker ise kapsamındaki her sayfa için ağ proxy'si gibi davranır, istekleri önbellekten yanıtlayabilir ve site açık olmasa bile push mesajları alabilir.

Service worker'lar çevrimdışı çalışır mı?

Evet, asıl kullanım alanlarından biri budur. Service worker bir sayfanın ihtiyaç duyduğu dosyaları önbelleğe aldıktan sonra bunları ağ bağlantısı olmadan sunabilir; böylece site çevrimdışıyken de yüklenir.

Service worker'ım neden güncellenmiyor?

Yeni bir service worker yüklenir ama eskisinin denetlediği tüm sekmeler kapanana kadar bekler; bu yüzden basit bir yenileme çoğu zaman yetmez. Yeni worker'da self.skipWaiting() çağırmak onu hemen etkinleştirir; tarayıcı geliştirici araçları da test için yenilemede güncelleme seçeneği sunar.

İlgili sayfalar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin