Kullanıcılar, uygulamaların yavaş veya kesintili ağ bağlantılarında veya çevrimdışıyken bile 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 isteğin mümkün olmadığı durumlarda, kullanıcı, uygulamanın sessizce başarısız olarak veya çökmek yerine bunu size bildirmesini bekler. Kullanıcılar da tüm bunları hızlı bir şekilde yapmak ister. Bu çalışmada görebileceğiniz gibi Milisaniyeler milyonlar kazanıyor, yükleme sürelerinde 0,1 saniyelik bir iyileştirme bile dönüşümleri %10'a varan oranlarda artırabilir. Kısacası, kullanıcılar PWA'ların güvenilir olmasını bekler. Bu nedenle bizde Service Worker var.
Merhaba hizmet çalışanları
Bir uygulama, kullanıcının çevrimdışı olduğu zamanlar da dahil olmak üzere hizmet çalışanı kapsamı kapsamındaki bir kaynağı istediğinde, hizmet çalışanı ağ proxy'si gibi davranarak isteğe müdahale eder. Ardından, kaynağı Cache Storage API'si aracılığıyla önbellekten mi, normalde bir hizmet çalışanı olmadığında olduğu gibi ağdan mı sunacağına, yoksa yerel bir algoritmayla mı oluşturacağına karar verebilir. Bu sayede platform uygulamalarındakine benzer bir deneyim sunabilir, hatta tamamen çevrimdışı çalışabilir.
Service Worker kaydı
Service Worker'ın sayfanızın kontrolünü ele geçirmesi için öncelikle sayfanın PWA'nıza (Progresif Web Uygulaması) kayıtlı olması gerekir. Bu, bir kullanıcı PWA'nıza ilk geldiğinde, Service Worker henüz sayfalarınızın kontrolünde olmadığından ağ istekleri doğrudan sunucunuza gider.
Tarayıcının Service Worker API'yi destekleyip desteklemediğini kontrol ettikten sonra PWA'nız bir hizmet çalışanı kaydedebilir. Yüklendiğinde hizmet çalışanı, PWA'nız ile ağ arasında alışveriş merkezi kurarak isteklere müdahale eder ve ilgili 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 hizmet çalışanının kayıtlı olup olmadığını doğrulamak için favori tarayıcınızda 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çı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. (Bu durumun yaşam döngüsü bölümünde bu durumun ne anlama geldiğini öğreneceksiniz). Firefox'ta durum "Çalışıyor" veya "Durduruldu" olabilir.
Safari'de:
- Geliştir menüsünü, ardından Hizmet Çalışanları alt menüsünü tıklayın.
- Geçerli kaynağa sahip bir girişin alt menüde görünüp görünmediğini kontrol edin. Hizmet çalışanının bağlamı üzerinde bir denetleyici açar.
Kapsam
Hizmet çalışanınızın bulunduğu klasör, kapsamını belirler. example.com/my-pwa/sw.js adresinde yaşayan bir hizmet çalışanı, my-pwa yolunda veya daha altındaki herhangi bir gezinmeyi (ör. example.com/my-pwa/demos/) kontrol edebilir. Service Worker'lar, yalnızca kapsamlarındaki öğeleri (sayfalar, çalışanlar, toplu olarak "istemciler") kontrol edebilir. Kapsam, tarayıcı sekmeleri ve PWA pencereleri için geçerlidir.
Kapsam başına yalnızca bir hizmet çalışanına izin verilir. Etkin ve çalışır durumda olduğunda, bellekte kaç istemci olursa olsun (PWA pencereleri veya tarayıcı sekmeleri gibi) genellikle yalnızca bir örnek kullanılabilir.
Safari'de, alanlar arası iframe'leriniz varsa kapsamların çalışma şeklini etkileyen ve bölümlendirme olarak bilinen daha karmaşık kapsam yönetimi bulunur. WebKit'in uygulanması hakkında daha fazla bilgi edinmek için ilgili blog yayınını okuyun.
Yaşam döngüsü
Service Worker'ların nasıl yükleneceğini belirleyen bir yaşam döngüsü vardır. Bu, PWA yüklemenizden ayrıdı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. Ayrıştırma başarılı olursa install etkinliği tetiklenir. install etkinliği yalnızca bir kez etkinleşir.
Kullanıcı PWA'yı yüklemese bile Service Worker yüklemesi, kullanıcı izni gerekmeden sessizce gerçekleştirilir. Service Worker API'yi masaüstü cihazlarda Safari ve Firefox gibi PWA yüklemeyi desteklemeyen platformlarda da kullanabilirsiniz.
Yükleme sonrasında Service Worker henüz PWA'nız dahil olmak üzere istemcilerinin kontrolünde değildir. Öncelikle bu hesabın etkinleştirilmesi gerekir. Service Worker istemcilerini kontrol etmeye hazır olduğunda activate etkinliği tetiklenir. Ancak bu, hizmet çalışanının kaydedildiği sayfanın yönetileceği anlamına gelmez. Varsayılan olarak Service Worker, siz ilgili sayfaya tekrar gidene kadar (sayfanın yeniden yüklenmesi veya PWA'nın yeniden açılması nedeniyle) kontrolü ele almaz.
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 şu anda kontrol eden hizmet çalışanı ile aynı dosyanın yeni (sunucunuzdan) 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ı, mevcut (eski) hizmet çalışanı artık herhangi bir istemciyi kontrol edene kadar etkinleştirilmek için bekler. Bu duruma "bekleniyor" denir ve tarayıcı, Service Worker'ı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ının geçerli hizmet çalışanını kullanarak tüm sekmeleri ve pencereleri kapatması veya kapatması ve ardından geri gitmesi gerekir. Ancak bu şekilde yeni hizmet çalışanı kontrolü ele geçirecektir. Daha fazla bilgi için bu Service Worker yaşam döngüsü makalesini inceleyin.
Hizmet çalışanı yaşam süresi
Hizmet çalışanı yüklenip kaydedildikten sonra kendi kapsamındaki tüm ağ isteklerini yönetebilir. Kendi iş parçacığında çalışır, etkinleştirme ve sonlandırma tarayıcı tarafından kontrol edilir. Bu sayede, PWA'nız açılmadan önce veya açıldıktan sonra bile çalışır. Service Worker'lar kendi iş parçacıklarında çalışır ancak Service Worker çalıştırmaları arasında bellek içi durumun devam edeceğinin garantisi yoktur. Bu nedenle, her çalıştırmada 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ı içinde bir ağ isteği istendiğinde veya düzenli arka plan senkronizasyonu ya da push mesajı gibi tetikleyici bir etkinlik alındığında bir hizmet çalışanı çalışmaya başlar.
Service Worker'lar süresiz olarak devreye girmez. Tam zamanlamalar tarayıcılar arasında farklılık gösterse de Service Worker'lar birkaç saniye boyunca boşta kalırsa veya çok uzun süre meşgulse sonlandırılır. Bir Service Worker sonlandırılırsa ve onu başlatacak bir etkinlik olursa hizmet yeniden başlatılır.
Özellikler
Kayıtlı ve etkin bir hizmet çalışanı ile PWA'nızdaki ana yaşam döngüsünden tamamen farklı bir yürütme yaşam döngüsüne sahip bir iş parçanız olur. Ancak varsayılan olarak hizmet çalışanı dosyasının davranışı yoktur. Bu işin kodunuzla yapılması gerektiğinden, hiçbir kaynağı önbelleğe almaz veya sunmaz. Bunu nasıl yapacağınızı 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 başka özellikler de kullanılabilir. Bu eklemeleri özellikler bölümünde ele alacağız.