HTML'den Service Worker Kaydı

Hizmet çalışanı, herhangi bir sayfadan ayrı olarak arka planda çalışan ve kendi kapsamındaki ağ isteklerini araya girerek yöneten bir JavaScript dosyasıdır. Önbelleğe alma yoluyla çevrimdışı desteği, anlık bildirimleri, arka plan eşitlemesini ve daha hızlı tekrar yüklemelerini sağlar.

Çalışanı bir sayfa betiğinden kaydedin: navigator.serviceWorker.register("/sw.js"). Tarayıcı /sw.js dosyasını getirir, ayrıştırır, yükleme olayını çalıştırır ve kaydın kapsamındaki istekleri araya girerek yönetmeye başlar.

Eski tarayıcılar hizmet çalışanlarını desteklemez. register çağrısından önce her zaman "serviceWorker" in navigator ile özellik algılaması yapın; aksi takdirde API'yi desteklemeyen tarayıcılarda çağrı hata verir. Polyfill kullanmak uygulanabilir değildir; hizmet çalışanları tarayıcı düzeyinde tümleşme gerektirdiğinden polyfill ile sağlanamaz.

Kapsam, çalışanın denetlediği yol ön ekidir. Varsayılan olarak kapsam, çalışan dosyasının bulunduğu dizindir: /sw.js, / altındaki tüm URL'leri denetler. Farklı bir dosya konumundan daha derin kapsamlı bir çalışan kaydetmek için kapsam seçeneğini ayarlayın ve Service-Worker-Allowed üstbilgisini sunun.

Varsayılan kapsamının tüm siteyi kapsaması için sw.js dosyasını uygulamanın köküne (/sw.js) yerleştirin. Daha derin yollar (/app/sw.js), kapsamı /app/ ve altıyla sınırlar; genellikle istediğiniz şey bu değildir.

Kritik oluşturma sırasında bant genişliği için rekabeti önlemek üzere çalışanı sayfa yüklendikten sonra kaydedin: window.addEventListener("load", () => navigator.serviceWorker.register("/sw.js")). PWA özellikleri ilk ziyareti geciktirmeden sonraki ziyaretlerde devreye girer.

Tarayıcı güncellenmiş bir sw.js dosyasını otomatik olarak kontrol eder (genellikle 24 saatte bir ve çoğu sayfa yüklemesinde). Dosya içeriği değiştiyse yeni çalışan indirilir, yüklenir ve mevcut tüm sekmeler kapanana kadar "bekliyor" durumunda bekler; ardından etkinleşir.

registration.update() elle bir güncelleme denetimi başlatır. Yeni sw.js içindeki self.skipWaiting(), sekmelerin kapanmasını beklemeden hemen etkinleşir. "Her zaman en yeni çalışanı çalıştır" davranışı için ikisini birleştirin; bunun karşılığında oturum ortasında yeniden getirme yapılabilir.

registration.unregister() çalışanı kaldırır. Hatalı bir çalışan sitenizi bozuyorsa geliştirme sırasında kullanışlıdır. Chrome DevTools'ta Application → Service Workers bölümü, hata ayıklama sırasında aynı amaçla kullanılabilecek bir "Kaydı kaldır" düğmesi sunar.

Bir çalışanı HTTP üzerinden (HTTPS olmadan) kaydetmek sessizce başarısız olur; hizmet çalışanları güvenli bir kaynak gerektirir (HTTPS veya geliştirme için localhost). Kayıt etkili olmuyorsa konsolda "Bir SSL sertifikası hatası oluştu" iletisini kontrol edin.

Çalışanın DOM erişimi yoktur. İletileri aktarmak için sayfada navigator.serviceWorker.controller.postMessage(), çalışanda ise self.addEventListener("message", handler) kullanın (ve tersini de yapın). Bu yaklaşım önbellek geçersizleştirme, sürüm denetimleri ve özel olaylar için kullanışlıdır.

İlk ziyarette çalışan yüklenir ve sayfaları ancak sayfa yeniden yüklendikten sonra denetlemeye başlar. İlk gezinmeyi hemen denetlemek için etkinleştirme olayında self.clients.claim() çağrısını yapın; bu, çevrimdışı öncelikli uygulamalar için kullanışlıdır.

Hizmet çalışanları neden HTTPS (veya localhost) üzerinden sunulmalıdır?

Hizmet çalışanlarını özellik algılamasından sonra, sayfa JS'sinden navigator.serviceWorker.register("/sw.js") ile kaydedin. Tam kapsam için sw.js dosyasını uygulamanın köküne yerleştirin. Kritik oluşturmayla rekabet etmemesi için yükleme sırasında kaydedin. Güncellemeler düzenli aralıklarla otomatik olarak denetlenir; registration.update veya skipWaiting ile zorlayabilirsiniz. Kötü amaçlı çalışan eklenmesini önlemek için HTTPS gereklidir.