Kullanıcılar, uygulamaların yavaş veya kararsız ağ bağlantılarında ya da çevrimdışı olarak güvenilir bir şekilde başlatılmasını bekler. En son etkileşimde bulundukları içeriklerin (ör. medya parçaları veya biletler ve seyahat planları) kullanılabilir olmasını ve kullanılabilmesini beklerler. İstek mümkün olmadığında uygulamanın sessizce başarısız olması veya kilitlenmesi yerine durumu bildirmesini beklerler. Ayrıca tüm bunların hızlı bir şekilde gerçekleşmesini istiyorlar. Milisaniyeler milyonlar kazandırır başlıklı makalede de görebileceğiniz gibi, yükleme sürelerinde 0,1 saniyelik bir iyileştirme bile dönüşümü %10'a kadar artırabilir. Hizmet çalışanları, 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ın kapsamına giren bir kaynak istediğinde hizmet çalışanı, kullanıcı çevrimdışı olsa bile isteği yakalar ve ağ proxy'si olarak hareket eder. Ardından, Cache Storage API'yi kullanarak kaynağı önbellekten mi, etkin bir hizmet çalışanı yokmuş gibi ağdan mı yayınlayacağına yoksa yerel bir algoritmadan mı oluşturacağına karar verebilir. Bu sayede, uygulamanız çevrimdışı olsa bile platform uygulaması gibi yüksek kaliteli bir deneyim sunabilirsiniz.
Hizmet çalışanı kaydetme
Bir hizmet çalışanı sayfanızın kontrolünü ele almadan önce PWA'nız için kaydedilmesi gerekir. Bu nedenle, bir kullanıcı PWA'nızı ilk kez açtığında hizmet çalışanı henüz sayfalarınızı kontrol etmediği için tüm ağ istekleri doğrudan sunucunuza gider.
Tarayıcının Service Worker API'yi destekleyip desteklemediğini kontrol ettikten sonra PWA'nız bir Service Worker kaydedebilir. Yüklendikten sonra hizmet çalışanı, PWA'nız ile ağ arasına yerleşir, istekleri yakalar ve karşılık gelen yanıtları sunar.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("/serviceworker.js");
}
Bir hizmet çalışanının kaydedilip kaydedilmediğini doğrulama
Bir hizmet çalışanının kaydedilip kaydedilmediğini doğrulamak için en sevdiğiniz tarayıcıdaki geliştirici araçlarını kullanın.
Firefox ve Chromium tabanlı tarayıcılarda (Microsoft Edge, Google Chrome veya Samsung Internet):
- Geliştirici araçlarını açın ve Uygulama sekmesini tıklayın.
- Sol bölmede Service Workers'ı (Servis Çalışanları) seçin.
- Service worker'ın komut dosyası URL'sinin "Etkinleştirildi" durumuyla göründüğünü kontrol edin. (Daha fazla bilgi için Yaşam döngüsü başlıklı makaleyi inceleyin.) Firefox'ta durum "Çalışıyor" veya "Durduruldu" olabilir.
Safari'de:
- Geliştir > Service Workers'ı tıklayın.
- Bu menüde mevcut kaynakla ilgili bir giriş olup olmadığını kontrol edin. Bu girişi tıkladığınızda, hizmet çalışanın bağlamı üzerinde bir denetçi açılır.
Kapsam
Hizmet çalışanınızın bulunduğu klasör, kapsamını belirler. example.com/my-pwa/sw.js konumunda bulunan bir hizmet çalışanı, example.com/my-pwa/demos/ gibi my-pwa yolunda veya bu yolun altında yapılan tüm gezinme işlemlerini 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 hizmet çalışanı etkin ve çalışırken, bellekte kaç istemci (PWA pencereleri veya tarayıcı sekmeleri) olursa olsun genellikle yalnızca bir örnek kullanılabilir.
Safari'de, kapsamların alanlar arası iFrame'lerle çalışma şeklini etkileyen, bölümler olarak bilinen daha karmaşık bir kapsam yönetimi vardır. WebKit'in uygulanması hakkında daha fazla bilgi edinmek için blog yayınlarına göz atın.
Yaşam döngüsü
Service worker'ların, PWA yüklemenizden ayrı olarak nasıl yükleneceklerini belirleyen bir yaşam döngüsü vardır.
Hizmet çalışanı yaşam döngüsü, hizmet çalışanının kaydedilmesiyle başlar. Tarayıcı daha sonra hizmet çalışanı dosyasını indirmeye ve ayrıştırmaya çalışır. Ayrıştırma başarılı olursa hizmet çalışanının install etkinliği tetiklenir. install etkinliği yalnızca bir kez tetiklenir.
Hizmet çalışanı yüklemesi, kullanıcının izni olmadan sessizce gerçekleşir. Kullanıcı PWA'yı yüklemese bile bu durum geçerlidir. Service Worker API, masaüstü cihazlarda Safari ve Firefox gibi PWA yüklemesini desteklemeyen platformlarda bile kullanılabilir.
Yükleme işleminden sonra, hizmet çalışanının istemcilerini (PWA'nız dahil) kontrol edebilmesi için etkinleştirilmesi gerekir. Service worker, istemcilerini kontrol etmeye hazır olduğunda activate etkinliği tetiklenir. Ancak varsayılan olarak, etkinleştirilmiş bir hizmet çalışanı, sayfayı yeniden yükleyerek veya PWA'yı yeniden açarak sayfaya bir sonraki gidişinize 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");
});
Service worker'ı güncelleme
Tarayıcı, istemciyi kontrol eden hizmet çalışanı ile sunucudaki hizmet çalışanı 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ükleme işleminden sonra yeni hizmet çalışanı, eski hizmet çalışanı artık hiçbir istemciyi kontrol etmeyene kadar etkinleştirilmeyi bekler. Bu duruma "bekleme" adı verilir ve tarayıcı, hizmet çalışanınızın yalnızca bir sürümünün aynı anda çalışmasını bu şekilde sağlar.
Sayfanın yenilenmesi veya PWA'nın yeniden açılması, yeni hizmet çalışanının kontrolü ele geçirmesini sağlamaz. Kullanıcı, mevcut hizmet çalışanıyla kullanılan tüm sekmeleri ve pencereleri kapatmalı veya bunlardan uzaklaşmalı, ardından yeni hizmet çalışanına kontrolü vermek için geri dönmelidir. Daha fazla bilgi için Service worker yaşam döngüsü başlıklı makaleyi inceleyin.
Hizmet çalışanı ömrü
Yüklenmiş ve kaydedilmiş bir hizmet çalışanı, kapsamı içindeki 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 sayede, PWA'nız açılmadan önce veya kapandıktan sonra bile çalışabilir. Service worker'lar kendi iş parçacıklarında çalışır ancak bellek içi durum, service worker'ın her çalıştırılması arasında kalıcı olmayabilir. Bu nedenle, her çalıştırmada yeniden kullanmak istediğiniz her şeyin IndexedDB'de veya başka bir kalıcı depolama alanında kullanılabilir olduğundan emin olun.
Henüz çalışmıyorsa bir hizmet çalışanı, kapsamına bir ağ isteği gönderildiğinde veya periyodik arka plan senkronizasyonu ya da push mesajı gibi tetikleyici bir etkinlik aldığında başlatılır.
Hizmet çalışanları birkaç saniye boyunca boşta kalırsa veya çok uzun süre meşgul olursa sonlandırılır. Bu işlem için gereken süre tarayıcıya göre değişir. Bir hizmet çalışanı sonlandırıldıysa ve başlatılmasını sağlayacak bir etkinlik gerçekleşirse 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 hizmet çalışanı dosyasının kendisi herhangi bir davranışa sahip değildir. Kaynakları önbelleğe almaz veya sunmaz. Bunlar, kodunuzun yapması gereken işlemlerdir. Nasıl yapılacağını sonraki bölümlerde öğreneceksiniz.
Service worker'ın özellikleri yalnızca HTTP isteklerini proxy veya sunma ile sınırlı değildir. Arka planda kod yürütme, web push bildirimleri ve ödeme işleme gibi diğer amaçlar için bu özelliklerin üzerine başka özellikler de eklenebilir. Bu eklemeleri Özellikler bölümünde ele alacağız.