Kullanıcılar, uygulamaların yavaş veya stabil olmayan ağ bağlantılarında veya çevrimdışıyken bile güvenilir bir şekilde başlamasını bekler. Kullanıcılar, medya kanalları, biletler ve seyahat planları gibi en son etkileşim kurdukları içeriklerin kullanılabilir ve kullanılabilir olmasını bekler. Bir istek mümkün olmadığında, uygulamanın sessiz bir şekilde başarısız olmak veya kilitlenmek yerine bunu size bildirmesini beklerler. Ve tüm bunların hızlı bir şekilde gerçekleştirilmesini istiyorlar. Milisaniyeler milyonlar kazandırıyor bölümünde görebileceğiniz gibi, yükleme sürelerinde 0,1 saniyelik bir iyileştirme bile dönüşümü %10'a varan oranlarda artırabilir. Service Worker'lar, Progresif Web Uygulamanızın (PWA) kullanıcılarınızın beklentilerini karşılamasını sağlayan araçtır.
Bir uygulama, hizmet çalışanı kapsamı kapsamındaki bir kaynağı istediğinde, hizmet çalışanı isteğe müdahale eder ve kullanıcı çevrimdışı olsa bile bir ağ proxy'si görevi görür. Ardından, kaynağı Cache Storage API'yi kullanarak önbellekten sunma, etkin hizmet çalışanı yokmuş gibi ağdan sunma veya yerel bir algoritma ile oluşturma arasında karar verebilir. Bu sayede, uygulamanız çevrimdışıyken bile platform uygulaması gibi yüksek kaliteli bir deneyim sunabilirsiniz.
Hizmet çalışanı kaydetme
Service Worker'ın sayfanızın kontrolünü ele alabilmesi için öncelikle sayfanın PWA'nıza (Progresif Web Uygulaması) kaydettirilmesi gerekir. Yani bir kullanıcı PWA'nızı ilk kez açtığında tüm ağ istekleri doğrudan sunucunuza gider. Bunun nedeni, Service Worker'ın henüz sayfalarınız üzerinde kontrol olmamasıdır.
Tarayıcının Service Worker API'yi destekleyip desteklemediğini kontrol ettikten sonra PWA'nız bir hizmet çalışanı kaydedebilir. Hizmet çalışanı yüklendikten sonra PWA'nız ile ağ arasında kurulumunu yaparak isteklere müdahale eder ve karşılık gelen yanıtları sunar.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("/serviceworker.js");
}
Bir hizmet çalışanının kayıtlı olup olmadığını doğrulama
Bir Service Worker'ın kayıtlı olup olmadığını doğrulamak için en sevdiğiniz tarayıcınızda geliştirici araçlarını kullanın.
Firefox ve Chromium tabanlı tarayıcılarda (Microsoft Edge, Google Chrome veya Samsung İnternet):
- Geliştirici araçlarını açıp Uygulama sekmesini tıklayın.
- Sol bölmede Service Workers'ı (Hizmet Çalışanları) seçin.
- Hizmet çalışanının komut dosyası URL'sinin "Etkinleştirildi" durumuyla göründüğünden emin olun. (Daha fazla bilgi için Yaşam döngüsü bölümüne bakın). Firefox'ta durum "Çalışıyor" veya "Durduruldu" olabilir.
Safari'de:
- Geliştir > Hizmet Çalışanları'nı tıklayın.
- Geçerli kaynağı içeren bir giriş için bu menüyü kontrol edin. Bu giriş tıklandığında hizmet çalışanının bağlamı üzerinde bir inceleyici açılır.
Kapsam
Hizmet çalışanınızın bulunduğu klasör, kapsamını belirler. example.com/my-pwa/sw.js adresinde bulunan bir hizmet çalışanı, my-pwa yolunda veya bu yol altındaki example.com/my-pwa/demos/ gibi gezinmeleri kontrol edebilir. Hizmet çalışanları, yalnızca kapsamlarındaki öğeleri (sayfalar, çalışanlar, toplu olarak "istemciler") kontrol edebilir.
Bu kapsam, tarayıcı sekmeleri ve PWA pencereleri için geçerlidir.
Kapsam başına yalnızca bir hizmet çalışanına izin verilir. Bir Service Worker etkin ve çalışır durumda olduğunda bellekte kaç istemci (PWA pencereleri veya tarayıcı sekmeleri) olursa olsun genellikle yalnızca bir örnek kullanılabilir.
Safari, bölümlendirme olarak bilinen ve kapsamların alanlar arası iframe'lerle çalışma şeklini etkileyen daha karmaşık kapsam yönetimine sahiptir. WebKit'in uygulaması hakkında daha fazla bilgi edinmek için blog yayınına bakın.
Yaşam döngüsü
Service Worker'ların, PWA yüklemenizden ayrı olarak nasıl yükleneceğini belirleyen bir yaşam döngüsü vardır.
Service Worker'ın yaşam döngüsü, Service Worker'ın kaydedilmesiyle başlar. Ardından tarayıcı, Service Worker dosyasını indirip ayrıştırmaya çalışır. Başarılı çözümler ayrıştırılırsa Service Worker'ın install etkinliği tetiklenir. install etkinliği yalnızca bir kez etkinleşir.
Kullanıcı PWA'yı yüklemese bile Service Worker'ın yüklenmesi, kullanıcı izni gerektirmeden sessizce gerçekleştirilir. Service Worker API, masaüstü cihazlarda Safari ve Firefox gibi PWA yüklemesini desteklemeyen platformlarda bile kullanılabilir.
Yükleme sonrasında, PWA'nız dahil olmak üzere istemcilerini kontrol edebilmesi için Service Worker'ın etkinleştirilmesi gerekir. Service Worker, istemcilerini kontrol etmeye hazır olduğunda activate etkinliği tetiklenir. Bununla birlikte, etkinleştirilmiş bir hizmet çalışanı varsayılan olarak, sayfayı yeniden yükleyerek veya PWA'yı yeniden açarak ilgili sayfaya tekrar gelene kadar kendisini kaydeden sayfayı yönetemez.
self nesnesini kullanarak hizmet çalışanının genel kapsamındaki etkinlikleri dinleyebilirsiniz:
serviceworker.js
// This code executes in its own worker or thread
self.addEventListener("install", event => {
console.log("Service worker installed");
});
self.addEventListener("activate", event => {
console.log("Service worker activated");
});
Hizmet çalışanı güncelleme
Tarayıcı, istemciyi kontrol eden Service Worker ile sunucudaki Service Worker dosyasının yeni sürümünün bayt olarak farklı olduğunu algıladığında hizmet çalışanları güncellenir.
Başarılı bir yüklemenin ardından yeni hizmet çalışanı, eski hizmet çalışanı herhangi bir istemciyi kontrol edene kadar etkinleştirilmek için bekler. Bu duruma "bekleniyor" denir ve tarayıcı, hizmet çalışanınızın aynı anda yalnızca bir sürümünün çalışmasını bu şekilde sağlar.
Bir sayfayı yenilemek veya PWA'yı yeniden açmak, yeni Service Worker'ın kontrolü ele almasına neden olmaz. Kullanıcı, mevcut Service Worker'ı kullanarak tüm sekmeleri ve pencereleri kapatmalı veya kapatmalı ve ardından geri dönerek yeni Service Worker'a kontrol vermelidir. Daha fazla bilgi için Hizmet çalışanının yaşam döngüsü başlıklı makaleyi inceleyin.
Hizmet çalışanı yaşam süresi
Yüklü ve kayıtlı bir hizmet çalışanı, kapsamındaki tüm ağ isteklerini yönetebilir. Kendi iş parçacığında çalışır, etkinleştirme ve sonlandırma işlemleri tarayıcı tarafından kontrol edilir. Bu da PWA'nız açılmadan önce veya kapatıldıktan sonra bile çalışmasına olanak tanır. Service Worker'lar kendi iş parçacıklarında çalışır ancak bir Service Worker çalıştırmaları arasında bellek içi durum devam etmeyebilir. Bu nedenle, her çalıştırma için yeniden kullanmak istediğiniz her şeyin IndexedDB veya başka bir kalıcı depolama alanında bulunduğundan emin olun.
Çalışmıyorsa hizmet çalışanı, kapsamında bir ağ isteği gönderildiğinde veya periyodik arka plan senkronizasyonu ya da push mesajı gibi tetikleyici bir etkinlik aldığında çalışmaya başlar.
Service Worker'lar birkaç saniye boyunca boşta kalırsa veya çok uzun süredir meşgulse sonlandırılır. Bunun için zamanlamaları tarayıcıya göre değişir. Bir Service Worker sonlandırılırsa ve onu başlatacak bir etkinlik oluşursa hizmet yeniden başlatılır.
Özellikler
Kayıtlı ve etkin bir hizmet çalışanı, PWA'nızın ana iş parçacığından tamamen farklı bir yürütme yaşam döngüsüne sahip bir iş parçacığı kullanır. Ancak varsayılan olarak Service Worker dosyasının herhangi bir davranışı yoktur. Hiçbir kaynağı önbelleğe almaz veya sunmaz. Bunlar, kodunuzun yapması gereken şeylerdir. Bunları sonraki bölümlerde öğreneceksiniz.
Service Worker'ın özellikleri yalnızca proxy veya HTTP istekleri sunmayla ilgili değildir. Arka plan kodu yürütme, web push bildirimleri ve işlem ödemeleri gibi başka amaçlar için de bu altyapının üzerinde başka özellikler de sunulur. Bu eklemeleri Özellikler bölümünde ele alacağız.