Service Worker Nedir?

Sayfa ile ağ arasında programlanabilir bir katman

Bir service worker kaydedildikten sonra, kapsamındaki her sayfanın yaptığı istekler (HTML, CSS, görsel, API çağrıları) önce onun fetch olayından geçer. Kod bu noktada isteği olduğu gibi ağa iletebilir, önbellekteki bir yanıtı döndürebilir ya da tamamen yeni bir yanıt üretebilir. Kısacası tarayıcının içine yerleştirilmiş, sizin yazdığınız küçük bir vekil sunucudur.

Ayrı bir iş parçacığında çalıştığı için sayfanın ana iş parçacığını meşgul etmez; buna karşılık DOM'a, window nesnesine ve localStorage'a erişemez. Sayfayla iletişim mesajlar (postMessage) üzerinden yürür. İstekleri yakalayıp değiştirebilme gücü nedeniyle tarayıcılar service worker'ları yalnızca güvenli bağlamda, yani HTTPS üzerinde çalıştırır; geliştirme kolaylığı için localhost istisnadır.

// Sayfadaki kayıt kodu
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js");
}

Buradaki özellik kontrolü önemlidir: desteklemeyen ortamda site normal şekilde çalışmaya devam eder, service worker yalnızca bir iyileştirme katmanı olarak eklenir.

Yaşam döngüsü: install, waiting, activate

1. install: Yeni bir service worker indirildiğinde bir kez tetiklenir. Çevrimdışı için gereken dosyalar genellikle bu adımda önbelleğe alınır.
2. waiting: Daha önce kurulmuş bir sürüm açık sekmeleri kontrol ediyorsa yeni sürüm bekler. Aynı sitenin iki sekmesinin iki farklı kod sürümüyle çalışmasını önlemek için, eski sürümün kontrol ettiği tüm sekmeler kapanana kadar devreye girmez.
3. activate: Yeni sürüm kontrolü devraldığında tetiklenir; eski önbellekleri silmek için doğru yer burasıdır.

Tarayıcı, sayfaya gidildiğinde ve en geç 24 saatte bir service worker dosyasını kontrol eder; dosya tek bir bayt bile farklıysa yeni sürüm olarak kurar. self.skipWaiting() beklemeyi atlatır, clients.claim() açık sayfaları hemen kontrol altına alır. İkisi birlikte kullanıldığında, eski HTML ile yüklenmiş bir sayfanın yeni service worker'dan farklı sürümde dosyalar alması gibi tutarsızlıklar ortaya çıkabilir.

Cache Storage ve önbellekleme stratejileri

Service worker'ın kullandığı Cache Storage, tarayıcı önbelleğinden ayrı bir depodur ve HTTP başlıklarına göre kendiliğinden temizlenmez: ne saklanacağına, ne zaman güncelleneceğine ve ne zaman silineceğine kod karar verir.

const SURUM = "statik-v3";

self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(SURUM).then((c) => c.addAll(["/cevrimdisi.html", "/css/site.css"]))
  );
});

self.addEventListener("activate", (event) => {
  event.waitUntil(
    caches.keys().then((adlar) =>
      Promise.all(adlar.filter((a) => a !== SURUM).map((a) => caches.delete(a)))
    )
  );
});

self.addEventListener("fetch", (event) => {
  if (event.request.mode !== "navigate") return;
  event.respondWith(
    fetch(event.request).catch(() => caches.match("/cevrimdisi.html"))
  );
});

Bu örnekte sayfa istekleri önce ağdan denenir, bağlantı yoksa önceden saklanmış bir çevrimdışı sayfa gösterilir. Yaygın stratejiler şunlardır: önce önbellek (sürümlenmiş statik dosyalar için), önce ağ (güncelliğin önemli olduğu HTML ve API yanıtları için) ve stale-while-revalidate (önbellekteki kopyayı hemen gösterip arka planda yenisini almak).

Kapsam (scope) kuralları

Bir service worker varsayılan olarak yalnızca dosyanın bulunduğu dizin ve altını kontrol edebilir. /js/sw.js adresindeki bir dosya /js/ altındaki sayfaları yönetir, ana sayfayı yönetemez. Kapsamı genişletmek için sunucunun Service-Worker-Allowed başlığını göndermesi gerekir; en sade çözüm dosyayı kök dizine koymaktır. Kapsam ayrıca kaynakla (origin) sınırlıdır: başka bir alan adındaki dosya kaydedilemez.

Kullanıcıyı eski sürümde bırakan hatalar

• HTML'i önce önbellek stratejisiyle sunmak: Yeni yayın yapıldığında kullanıcılar eski sayfayı görmeye devam eder; düzeltme ancak service worker güncellenip devreye girdiğinde ulaşır.
• Service worker dosyasının kendisini uzun süre önbelleğe almak: Tarayıcılar güncelleme kontrolünde HTTP önbelleğini büyük ölçüde atlasa da sw.js için kısa ömürlü veya no-cache başlıkları kullanmak güvenli bir alışkanlıktır.
• Kaldırma planı yapmamak: Service worker'dan vazgeçmek için dosyayı silmek yetmez; mevcut kayıtları kaldıran bir sürüm yayımlanmalıdır.

Chrome'da Application panelindeki Service workers bölümü kayıtları, durumlarını ve Cache Storage içeriğini gösterir. Çevrimdışı çalışma ve yüklenebilirlik bir araya geldiğinde ortaya çıkan uygulama modeli PWA maddesinde, yaşam döngüsünün tüm ayrıntıları ise MDN'in service worker rehberinde anlatılıyor.