Kullanıcılar, yavaş veya kesintili ağ bağlantılarında uygulamaların güvenilir bir şekilde başlamasını beklerler. çevrimdışıyken bile. En son etkileşim kurdukları içeriği, medya parçaları veya biletler ve seyahat planları gibi mevcut ve kullanılabilir durumda olmaları gerekir. Bir istek mümkün olmadığında, kullanıcı bunun yerine uygulamanın istekte bulunmasını bekler. veya çökmesi anlamına gelir. Tüm bunların hızla gerçekleşmesini istiyorlar. Farklı Milisaniyeler milyonlar kazandırıyor bölümünde Yükleme sürelerinde 0,1 saniyelik bir iyileşme bile dönüşümü %10'a kadar artırabilir. Service Worker'lar, progresif web uygulamanızın (PWA) kullanıcılarınızın emin olmanız gerekir.
Bir uygulama, hizmet çalışanının kapsamı kapsamına giren bir kaynak istediğinde hizmet çalışanı isteği durdurur ve ağ proxy'si görevi görür. Kullanıcı çevrimdışı. Sonra da o kaynağı müşterinin kullandığı Önbellek Depolama API'sını kullanarak önbellek, hiçbir sorun yokmuş gibi ağdan veya yerel bir algoritma kullanarak oluşturabilirsiniz. Bu şekilde şunları yapabilirsiniz: bir platform uygulaması gibi yüksek kaliteli bir deneyim sunsanız bile, Uygulama çevrimdışı.
Hizmet çalışanı kaydedin
Bir hizmet çalışanı sayfanızın kontrolünü ele geçirebilmek için önce sayfanızın en iyi uygulamaları paylaşacağız. Yani bir kullanıcı PWA'nızı ilk kez açtığında tüm ağ isteği doğrudan sunucunuza gider çünkü hizmet çalışanı sayfalar üzerinde kontrol sahibi olun.
Tarayıcının Service Worker API'yi destekleyip desteklemediğini kontrol ettikten sonra PWA'nız hizmet çalışanı kaydetme Yüklendikten sonra Service Worker kendini kurar ağ arasında bağlantı kurarak, isteklerine müdahale ederek karşılık gelen yanıtlar.
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 en sevdiğiniz tarayıcı.
Firefox ve Chromium tabanlı tarayıcılarda (Microsoft Edge, Google Chrome veya Samsung İnternet):
- Geliştirici araçlarını açın, ardından Uygulama sekmesini tıklayın.
- Sol bölmede Hizmet Çalışanları'nı seçin.
- Hizmet çalışanının komut dosyası URL'sinin durumla birlikte görünüp görünmediğini kontrol edin "Etkinleştirildi". (Daha fazla bilgi için Yaşam döngüsü konusuna bakın). Firefox'ta durum "Çalışıyor" olabilir. veya "Durduruldu".
Safari'de:
- Geliştir'i tıklayın > Hizmet Çalışanları.
- Mevcut kaynağı içeren bir giriş için bu menüyü kontrol edin. Bu girişi tıkladığınızda Service Worker'ın bağlamı üzerinde bir denetleyici açar.
Kapsam
Hizmet çalışanınızın bulunduğu klasör, öğenin kapsamını belirler. Hizmet çalışanı
example.com/my-pwa/sw.js üzerinde bulunan, şurada veya altında tüm gezinmeyi kontrol edebilir:
my-pwa yolunu izleyin (örneğin, example.com/my-pwa/demos/). Service Worker'lar şunları yapabilir:
yalnızca kapsamlarındaki öğeleri (sayfalar, çalışanlar, toplu olarak "müşteriler") kontrol eder.
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 olduğunda ve çalışırken, genellikle bir örneğin kaç istemci olduğuna bakılmaksızın (PWA pencereleri veya tarayıcı sekmeleri) bellektedir.
Safari'de, bölümler olarak bilinen daha karmaşık kapsam yönetimi vardır. kapsamlar, alanlar arası iframe'lerle çalışır. WebKit hakkında daha fazla bilgi edinmek için kendi blog yayınını inceleyin.
Yaşam döngüsü
Service Worker'lar, nasıl yüklendiklerini ayrı ayrı belirten bir yaşam döngüsüne sahiptir bazı temel işlemler vardır.
Hizmet çalışanının yaşam döngüsü, hizmet çalışanının kaydedilmesiyle başlar. İlgili içeriği oluşturmak için kullanılan
tarayıcı, hizmet çalışanı dosyasını indirip ayrıştırmaya çalışıyor. Ayrıştırılıyorsa
başarılı olursa hizmet çalışanının install etkinliği tetiklenir. install etkinliği
yalnızca bir kez tetiklenir.
Service Worker'lar, kullanıcı izni gerekmeden sessizce ve sessiz bir şekilde yüklenir. kullanıcı PWA'yı yüklemese bile. Service Worker API kullanıma sunuldu Safari ve Chrome gibi PWA yüklemesini desteklemeyen platformlarda bile Masaüstü cihazlarda Firefox.
Yükleme tamamlandıktan sonra, hizmet çalışanının etkinleştirilmesi için
ve PWA'nız da dahil olmak üzere tüm müşterilerini kontrol edebilir. Service Worker hazır olduğunda
istemcilerini kontrol ettiğinde activate etkinliği tetiklenir. Ancak varsayılan olarak
Etkinleştirilen hizmet çalışanı, kaydı yapan sayfayı sonrakine kadar yönetemez.
sayfayı yeniden yükleyerek veya PWA'yı yeniden açarak bu sayfaya gittiğinizde.
self kullanarak Service Worker'ın global kapsamındaki etkinlikleri dinleyebilirsiniz.
nesne:
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ı, hizmet çalışanının Service Worker dosyasının yeni sürümünü ve yeni sürümünü otomatik olarak kontrol etmek için farklı baytlardan oluşur.
Başarılı bir yükleme sonrasında yeni hizmet çalışanı, etkinleştirilmek üzere eski hizmet çalışanı artık hiçbir istemciyi kontrol edemez. Bu eyalet "beklemede" olduğunu varsayalım. Tarayıcı bu şekilde, yalnızca tek bir hizmet çalışanıdır.
Bir sayfayı yenilemek veya PWA'yı yeniden açmak yeni Service Worker'ın ve kontrol etmesi gerekir. Kullanıcı tüm sekmeleri ve pencereleri geçerli hizmet çalışanına gidin ve ardından yeni hizmet çalışanına ve kontrol etmesi gerekir. Daha fazla bilgi için Hizmet çalışanı yaşam döngüsü sayfasına göz atın.
Hizmet çalışanı yaşam süresi
Yüklü ve kayıtlı bir hizmet çalışanı tüm ağ isteklerini yönetebilir müzakere tekniği de eklediniz. Etkinleştirme ve sonlandırma yoluyla kendi iş parçacığında çalışır tarayıcı tarafından kontrol edilir. Böylece PWA'nız açılmadan veya takip etmeniz gerekir. Hizmet çalışanları kendi iş parçacıklarında çalışır ancak bellek içi durumundadır hizmet çalışanı çalıştırmaları arasında kalıcı hale gelmeyebilir. Bu nedenle, çalışırken her çalıştırma için tekrar kullanmak istiyorsanız IndexedDB veya başka bir sürümde mevcut kalıcı depolama alanıdır.
Çalışmayan bir hizmet çalışanı, ağ isteği olduğunda başlatılır gönderildiğinde veya örneğin, periyodik olarak ya da tekrarlanan arka plan senkronizasyonu veya push mesajı.
Service Worker'lar, birkaç saniye boyunca boşta kalırsa veya uzun süredir meşguller. Bu işlemin zamanları tarayıcıya göre değişir. hizmet çalışanı feshedildiğinde işlemi başlatacak bir etkinlik gerçekleşirse yeniden başlatılır.
İşlemler
Kayıtlı ve etkin bir hizmet çalışanı, tamamen farklı bir iş parçacığı kullanarak ana iş parçacığındaki yürütme yaşam döngüsünü izleyin. Ancak varsayılan olarak hizmet çalışanı dosyasının kendisi herhangi bir davranış göstermez. Herhangi bir öğeyi önbelleğe almaz veya kaynaklar; kodunuzun yapması gerekenlerdir. Bunu nasıl yapacağınızı diğer bölümlere de ulaşabilirsiniz.
Hizmet çalışanının özellikleri yalnızca proxy veya HTTP istekleri sunma ile ilgili değildir. Bunun üzerine başka amaçlar için kullanılabilir (örneğin, arka plan web push bildirimlerini ve ödemeleri işlemeyi içerir. Bu videoda ise Özellikler'e dahil edilir.