Bu sayfa, Cloud Translation API ile çevrilmiştir.

Bir hizmet çalışanının hayatı

Hizmet çalışanlarının yaşam döngülerini anlamadan ne yaptıklarını bilmek oldukça zordur. İç işleyişi opak, hatta rastgele bile görünebilir. Diğer tarayıcı API'lerinde olduğu gibi Service Worker'ların davranışlarının da iyi tanımlandığı, çevrimdışı uygulamaları mümkün kıldığınızda aynı zamanda kullanıcı deneyimini kesintiye uğratmadan güncellemeleri kolaylaştırmaktadır.

Workbox'a geçmeden önce, Workbox'ın mantıklı çalışması için Service Worker'ın yaşam döngüsünü anlamak önemlidir.

Terimleri tanımlama

Service Worker yaşam döngüsüne girmeden önce bu yaşam döngüsünün işleyiş şekliyle ilgili bazı terimler tanımlamakta fayda var.

Kontrol ve kapsam

Kontrol fikri, Service Worker'ların nasıl çalıştığını anlamak açısından kritik öneme sahiptir. Service Worker tarafından denetlendiği sayfa, hizmet çalışanının kendi adına ağ isteklerine müdahale etmesine olanak tanıyan bir sayfadır. Hizmet çalışanı mevcuttur ve belirli bir kapsamda sayfa için çalışabilir.

Kapsam

Hizmet çalışanının kapsamı, web sunucusundaki konumuna göre belirlenir. Bir hizmet çalışanı /subdir/index.html adresinde ve /subdir/sw.js adresinde bulunan bir sayfada çalışıyorsa hizmet çalışanının kapsamı /subdir/. Kapsam kavramının nasıl uygulandığını görmek için şu örneğe göz atın:

Şuraya git: https://service-worker-scope-viewer.glitch.me/subdir/index.html. Sayfayı kontrol eden hizmet çalışanı olmadığını belirten bir mesaj gösterilir. Ancak bu sayfa https://service-worker-scope-viewer.glitch.me/subdir/sw.js alanından bir hizmet çalışanı kaydeder.
Sayfayı tekrar yükleyin. Service Worker kaydedildiği ve şu anda etkin olduğu için kontrol eder. Service Worker'ın kapsamını içeren bir form görünür ve URL'si görünür hale gelir. Not: Sayfayı yeniden yüklemenin kapsamla ilgisi yoktur. hizmet çalışanı yaşam döngüsüne bağlıdır. Bu konu daha sonra açıklanacaktır.
Şimdi https://service-worker-scope-viewer.glitch.me/index.html adresine gidin. Bu kaynakta bir hizmet çalışanı kayıtlı olsa da hâlâ geçerli bir hizmet çalışanı olmadığını belirten bir mesaj var. Bunun nedeni, bu sayfanın kayıtlı hizmet çalışanının kapsamında yer almamasıdır.

Kapsam, hizmet çalışanının kontrol ettiği sayfaları sınırlar. Bu örnekte, /subdir/sw.js üzerinden yüklenen hizmet çalışanı yalnızca /subdir/ veya onun alt ağacında bulunan sayfaları kontrol edebilir.

Yukarıda kapsam oluşturmanın varsayılan olarak işleyiş şekli şöyledir: Ancak izin verilen maksimum kapsam, Service-Worker-Allowed yanıt başlığı, geri bildirim vermenin yanı sıra register yöntemine scope seçeneği.

Hizmet çalışanı kapsamını bir kaynağın alt kümesiyle sınırlamak için çok iyi bir neden yoksa Kapsamı olabildiğince geniş olması için web sunucusunun kök dizininden bir hizmet çalışanı yükleyin. Service-Worker-Allowed başlığıyla ilgili endişelenmenize gerek yok. Bu şekilde herkes için çok daha basit.

Müşteri

Service Worker'ın bir sayfayı kontrol ettiği söylendiğinde aslında bir istemci kontrol ediliyor demektir. İstemci, URL'si söz konusu hizmet çalışanının kapsamına giren herhangi bir açık sayfadır. Bunlar daha ayrıntılı olarak WindowClient örnekleridir.

Yeni bir hizmet çalışanının yaşam döngüsü

Service Worker'ın bir sayfayı kontrol edebilmesi için ve deyim yerindeyse, öncelikle o hale gelmesi gerekir. Etkin bir hizmet çalışanı olmayan bir web sitesine yepyeni bir Service Worker dağıtıldığında ne olacağıyla başlayalım.

Kayıt

Kayıt, hizmet çalışanı yaşam döngüsünün ilk adımıdır:

<!-- In index.html, for example: -->
<script>
  // Don't register the service worker
  // until the page has fully loaded
  window.addEventListener('load', () => {
    // Is service worker available?
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js').then(() => {
        console.log('Service worker registered!');
      }).catch((error) => {
        console.warn('Error registering service worker:');
        console.warn(error);
      });
    }
  });
</script>

Bu kod, ana iş parçacığında çalışır ve şunları yapar:

Kullanıcının bir web sitesini ilk ziyareti, kayıtlı bir hizmet çalışanı olmadan gerçekleştiğinden kaydetmeden önce sayfanın tamamen yüklenmesini bekleyin. Bu sayede, hizmet çalışanı herhangi bir şeyi önbelleğe alırsa bant genişliği çakışması önlenir.
Hizmet çalışanı iyi desteklense de, hızlı kontrol, desteklenmediği tarayıcılarda hatalardan kaçınmanıza yardımcı olur.
Sayfa tamamen yüklendiğinde ve hizmet çalışanı destekleniyorsa /sw.js öğesini kaydedin.

Anlaşılması gereken bazı önemli noktalar şunlardır:

Service Worker'lar: yalnızca HTTPS veya localhost üzerinden kullanılabilir.
Bir hizmet çalışanının içeriği söz dizimi hataları içeriyorsa kayıt başarısız olur ve hizmet çalışanı silinir.
Hatırlatma: Service Worker'lar bir kapsam dahilinde çalışır. Burada kapsam, kök dizinden yüklendiği için kaynağın tamamıdır.
Kayıt başladığında hizmet çalışanı durumu 'installing' olarak ayarlanır.

Kayıt işlemi tamamlandıktan sonra yükleme işlemi başlar.

Kurulum

Bir hizmet çalışanı, Kayıttan sonra install etkinliği. install, hizmet çalışanı başına yalnızca bir kez çağrılır ve güncellenene kadar tekrar tetiklenmez. install etkinliği için bir geri çağırma, çalışanın kapsamına addEventListener ile kaydedilebilir:

// /sw.js
self.addEventListener('install', (event) => {
  const cacheKey = 'MyFancyCacheName_v1';

  event.waitUntil(caches.open(cacheKey).then((cache) => {
    // Add all the assets in the array to the 'MyFancyCacheName_v1'
    // `Cache` instance for later use.
    return cache.addAll([
      '/css/global.bc7b80b7.css',
      '/css/home.fe5d0b23.css',
      '/js/home.d3cc4ba4.js',
      '/js/jquery.43ca4933.js'
    ]);
  }));
});

Bu işlem yeni bir Cache örneği oluşturur ve öğeleri önbelleğe alır. Daha sonraki videolarda, önbelleğin önlenmesinden bahsetmek için birçok fırsatımız olacak. Şimdi proje yöneticisinin event.waitUntil. event.waitUntil bir sözü kabul eder. ve söz edilene kadar bekler. Bu örnekte, söz konusu vaat iki eşzamansız şey yapar:

'MyFancyCache_v1' adlı yeni bir Cache örneği oluşturur.
Önbellek oluşturulduktan sonra bir dizi öğe URL'si, eşzamansız özelliği kullanılarak önbelleğe alınır addAll yöntemini kullanın.

event.waitUntil için verilen taahhütler geçerliyse yükleme başarısız olur. reddedildi. Böyle bir durumda hizmet çalışanı silinir.

Vaatler doğrulanırsa yükleme başarılı olur ve hizmet çalışanının durumu 'installed' olarak değişir ve sonra etkinleşir.

Etkinleştirme

Kayıt ve yükleme başarılı olursa hizmet çalışanı etkinleştirilir ve durumu 'activating' olur Hizmet çalışanının hesabında etkinleştirme sırasında activate etkinlik. Bu etkinlikte tipik bir görev, eski önbellekleri ayıklamak, Ancak yepyeni bir hizmet çalışanı için o anla ilgisi yok. ve Service Worker güncellemeleri söz konusu olduğunda kapsamı genişletilecektir.

Yeni hizmet çalışanları için activate, install başarılı olduktan hemen sonra etkinleşir. Etkinleştirme tamamlandığında hizmet çalışanının durumu 'activated' olur. Varsayılan olarak yeni hizmet çalışanı bir sonraki gezinmeye veya sayfa yenilenene kadar sayfayı kontrol etmeye başlamaz.

Service Worker güncellemelerini işleme

İlk Service Worker dağıtıldıktan sonra muhtemelen daha sonra güncellenmesi gerekir. Örneğin, isteği işleme veya önceden önbelleğe alma mantığında değişiklikler olursa güncelleme gerekebilir.

Güncelleme olduğunda

Tarayıcılar, şu durumlarda hizmet çalışanı için güncelleme olup olmadığını kontrol eder:

Kullanıcı, hizmet çalışanının kapsamındaki bir sayfaya gider.
navigator.serviceWorker.register() öğesinin, şu anda yüklü olan Service Worker'dan farklı bir URL ile çağrılması gerekir. Ancak hizmet çalışanının URL'sini değiştirmeyin.
navigator.serviceWorker.register() yüklü hizmet çalışanıyla aynı URL ile çağrıldığında farklı bir kapsamda. Mümkünse kapsamı bir kaynağın kökünde tutarak bundan kaçının.
'push' veya 'sync' gibi etkinlikler olduğunda son 24 saat içinde tetiklenmiştir, ancak henüz bu etkinlikler için endişelenmenize gerek yoktur.

Güncellemeler nasıl olur?

Tarayıcının bir Service Worker'ı ne zaman güncellediğini bilmek, Ama "nasıl" sorusu da geçerli. Service Worker'ın URL'sinin veya kapsamının değişmediği varsayıldığında Şu anda yüklü olan bir hizmet çalışanı, yalnızca içeriği değiştiyse yeni bir sürüme güncelleme yapar.

Tarayıcılar değişiklikleri iki şekilde algılar:

tarafından istenen komut dosyalarında yapılan tek tek bayt değişiklikleri importScripts (geçerliyse).
Service Worker'ın üst düzey kodunda yapılan değişiklikler Bu, tarayıcının oluşturduğu parmak izini etkiler.

Tarayıcı burada çok fazla iş halleder. Tarayıcının, bir Service Worker'ın içeriğindeki değişiklikleri güvenilir şekilde algılayabilmesi için gereken tüm özelliklere sahip olması için HTTP önbelleğine kodu tutmasını söylemeyin ve dosya adını değiştirmeyin. Tarayıcı, bir hizmet çalışanının kapsamındaki yeni bir sayfada gezinme olduğunda güncelleme kontrollerini otomatik olarak gerçekleştirir.

Güncelleme kontrollerini manuel olarak tetikleme

Güncellemeler söz konusu olduğunda kayıt mantığı genellikle değişmemelidir. Ancak tek istisna, web sitesindeki oturumların uzun sürmesi olabilir. Bu durum, tek sayfalık uygulamalarda görülebilir. navigasyon istekleri nadirdir, Uygulama genellikle uygulamanın yaşam döngüsünün başında bir gezinme isteğiyle karşılaşır. Bu tür durumlarda ana ileti dizisinde manuel güncelleme tetiklenebilir:

navigator.serviceWorker.ready.then((registration) => {
  registration.update();
});

Geleneksel web sitelerinde kullanıcı oturumlarının uzun sürmediği durumlara manuel güncellemeleri tetiklemek muhtemelen gerekmez.

Kurulum

Statik öğeler oluşturmak için paketleyici kullanırken bu öğelerin adlarında karmalar bulunur, framework.3defa9d2.js gibi. Bu öğelerden bazılarının daha sonra çevrimdışı erişim için önbelleğe alındığını varsayalım. Bunun için, güncellenen öğeleri önbelleğe almak üzere Service Worker güncellemesi gerekir:

self.addEventListener('install', (event) => {
  const cacheKey = 'MyFancyCacheName_v2';

  event.waitUntil(caches.open(cacheKey).then((cache) => {
    // Add all the assets in the array to the 'MyFancyCacheName_v2'
    // `Cache` instance for later use.
    return cache.addAll([
      '/css/global.ced4aef2.css',
      '/css/home.cbe409ad.css',
      '/js/home.109defa4.js',
      '/js/jquery.38caf32d.js'
    ]);
  }));
});

Önceki install etkinlik örneğinden iki şey farklıdır:

'MyFancyCacheName_v2' anahtarıyla yeni bir Cache örneği oluşturuldu.
Önceden önbelleğe alınmış öğe adları değişti.

ziyaret edin.

Not: Not: Cache örneğini yönetmek zordur. Bu, Workbox'ı kullanmak için .

Güncellenen bir Service Worker'ın önceki çalışanla birlikte yüklendiğini hatırlatmak isteriz. Bu, açık sayfaların kontrolünün eski hizmet çalışanının elinde olmaya devam edeceği anlamına gelir. bekleme durumuna geçer.

Varsayılan olarak, hiçbir istemci eski istemci tarafından kontrol edilmediğinde yeni hizmet çalışanı etkinleştirilir. Bu durum, ilgili web sitesinin tüm açık sekmeleri kapatıldığında meydana gelir.

Etkinleştirme

Güncellenmiş bir hizmet çalışanı yüklendiğinde ve bekleme aşaması sona erdiğinde etkinleşir ve eski hizmet çalışanı silinir. Güncellenmiş bir hizmet çalışanının activate etkinliğinde gerçekleştirilecek yaygın bir görev, eski önbellekleri ayıklamaktır. Şu e-posta adresine sahip tüm açık Cache örneklerinin anahtarlarını alarak eski önbellekleri kaldırın: caches.keys ve tanımlı bir izin verilenler listesinde olmayan önbellekleri caches.delete:

self.addEventListener('activate', (event) => {
  // Specify allowed cache keys
  const cacheAllowList = ['MyFancyCacheName_v2'];

  // Get all the currently active `Cache` instances.
  event.waitUntil(caches.keys().then((keys) => {
    // Delete all caches that aren't in the allow list:
    return Promise.all(keys.map((key) => {
      if (!cacheAllowList.includes(key)) {
        return caches.delete(key);
      }
    }));
  }));
});

Eski önbellekler kendi kendine düzenlenmez. Bunu kendimiz yapmamız gerekiyor. Aksi takdirde depolama kotalarına dikkat edin. İlk hizmet çalışanındaki 'MyFancyCacheName_v1' güncel olmadığı için önbellek izin verilenler listesi, 'MyFancyCacheName_v2' değerini belirtecek şekilde güncellenir. Bu işlem, farklı ada sahip önbellekleri siler.

activate etkinliği, eski önbellek kaldırıldıktan sonra tamamlanacaktır. Bu noktada, yeni hizmet çalışanı sayfanın kontrolünü devralacaktır. nihayet eskisini değiştirin!

Yaşam döngüsü hiç bitmez

Service Worker dağıtımını ve güncellemelerini yönetmek için Workbox'ın kullanılıp kullanılmadığı, Service Worker API doğrudan kullanılıyorsa hizmet çalışanının yaşam döngüsünü anlamak için ödeme yapar. Bu anlayışla, Service Worker davranışlarının gizemli olmaktan çok mantıklı görünmesi gerekir.

Konuyu daha ayrıntılı bir şekilde incelemek isteyenler, incelemeye değer Jake Archibald tarafından yazılan bu makaleyi inceleyin. Hizmet yaşam döngüsü boyunca tüm dansın nasıl ilerlediği konusunda tonlarca incelik vardır. ancak bu bilgi kullanılabilir ve Workbox kullanılırken bu bilgi büyük fayda sağlayacaktır.