Service Worker'larla çalışma

Jeff Posnick

Bu codelab'de, web uygulamanızdan nasıl hizmet çalışanı kaydedeceğiniz ve davranışını gözlemlemek için Chrome Geliştirici Araçları'nı nasıl kullanacağınız gösterilmektedir. Ayrıca, hizmet işçileriyle çalışırken işinize yarayabilecek bazı hata ayıklama teknikleri de ele alınmaktadır.

Örnek projeyi tanıyın

Örnek projedeki bu kod laboratuvarıyla en alakalı dosyalar şunlardır:

• register-sw.js başlangıçta boştur ancak hizmet çalışanını kaydettirmek için kullanılan kodu içerir. Projenin index.html içinde bir <script> etiketi aracılığıyla zaten yükleniyor.
• service-worker.js de benzer şekilde boştur. Bu projenin hizmet çalışanını barındıran dosyadır.

Hizmet çalışanı kayıt kodunu ekleme

Bir hizmet çalışanı (mevcut service-worker.js dosyası gibi boş olanlar bile) önce kaydedilmezse kullanılmaz. Bunu şu numaraları arayarak yapabilirsiniz:

navigator.serviceWorker.register(
  '/service-worker.js'
)

register-sw.js dosyanızdaki

Ancak bu kodu eklemeden önce dikkate almanız gereken birkaç nokta var.

Öncelikle, hizmet işçilerini her tarayıcı desteklemez. Bu durum özellikle tarayıcıların otomatik olarak güncellenmeyen eski sürümleri için geçerlidir. Bu nedenle, navigator.serviceWorker desteklenip desteklenmediğini kontrol ettikten sonra navigator.serviceWorker.register() işlevini koşullu olarak çağırmanız önerilir.

İkinci olarak, bir hizmet çalışanı kaydettiğinizde tarayıcı, service-worker.js dosyanızdaki kodu çalıştırır ve hizmet çalışanınızın install ve activate etkinlik işleyicilerindeki koda bağlı olarak önbellekleri doldurmak için URL'leri indirmeye başlayabilir.

Ek kod çalıştırmak ve öğe indirmek, tarayıcınızın mevcut web sayfasını görüntülemek için kullanabileceği değerli kaynakları kullanabilir. Bu müdahaleyi önlemek için, tarayıcı mevcut sayfayı oluşturmayı tamamlayana kadar bir hizmet çalışanını kaydetmeyi ertelemek iyi bir uygulamadır. Bu süreyi tahmin etmenin kolay bir yolu, window.load etkinliğinin tetiklenmesini beklemektir.

Bu iki noktayı göz önünde bulundurarak, genel amaçlı hizmet çalışanı kayıt kodunu register-sw.js dosyanıza ekleyin:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js');
  });
}

Hizmet çalışanı günlük kaydı kodu ekleme

service-worker.js dosyanız, hizmet çalışanı uygulamanızın tüm mantığının normalde yerleştirileceği yerdir. Web uygulamanızın tüm isteklerini işlemeye hazır, mükemmel şekilde tasarlanmış bir hizmet çalışanı oluşturmak için hizmet çalışanı yaşam döngüsü etkinliklerini, Cache Storage API'yi ve web uygulamanızın ağ trafiği hakkındaki bilgileri kullanırsınız.

Ancak… bu konuyu daha sonra öğreneceksiniz. Bu aşamada, çeşitli hizmet çalışanı etkinliklerini gözlemlemek ve hizmet çalışanınızın durumunda hata ayıklama yapmak için Chrome'un DevTools'unu kullanma konusunda kendinizi rahat hissetmeniz hedeflenir.

Bu amaçla, service-worker.js öğesine aşağıdaki kodu ekleyin. Bu kod, çeşitli etkinliklere yanıt olarak mesajları Geliştirici Araçları Konsolu'na kaydeder (ancak başka bir işlem yapmaz):

self.addEventListener('install', (event) => {
  console.log('Inside the install handler:', event);
});

self.addEventListener('activate', (event) => {
  console.log('Inside the activate handler:', event);
});

self.addEventListener(fetch, (event) => {
  console.log('Inside the fetch handler:', event);
});

Geliştirici Araçları'ndaki Hizmet Çalışanları panelini tanıma

Kodu register-sw.js ve service-worker.js dosyalarına eklediğinize göre, örnek projenizin canlı sürümünü ziyaret edip hizmet çalışanının işleyişini gözlemlemenin zamanı geldi.

• Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a basın.
• Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
• Konsol sekmesini tıklayın.

Hizmet çalışanının yüklü ve etkinleştirildiğini gösteren aşağıdaki gibi günlük mesajları görürsünüz:

Ardından Uygulamalar sekmesini ziyaret edin ve Hizmet Çalışanları panelini seçin. Aşağıdakine benzer bir şey görürsünüz:

Bu, solar-donkey.glitch.me web uygulaması için service-worker.js kaynak URL'sine sahip ve şu anda etkin ve çalışan bir hizmet çalışanı olduğunu gösterir. Ayrıca, şu anda hizmet çalışanı tarafından kontrol edilen bir istemci (açık sekme) olduğunu da gösterir.

Hata ayıklama amacıyla, şu anda kayıtlı olan hizmet çalışanında değişiklik yapmak için bu paneldeki bağlantıları (ör. Unregister veya stop) kullanabilirsiniz.

Hizmet çalışanı güncelleme akışını tetikleme

Hizmet işçileriyle geliştirme yaparken anlaşılması gereken temel kavramlardan biri güncelleme akışı fikridir.

Kullanıcılarınız, servis çalışanı kaydeden bir web uygulamasını ziyaret ettikten sonra yerel tarayıcılarına service-worker.js'ın mevcut kopyasının kodu yüklenir. Peki web sunucunuzda depolanan service-worker.js sürümünde güncelleme yaptığınızda ne olur?

Tekrar gelen bir ziyaretçi, bir hizmet çalışanının kapsamındaki bir URL'ye döndüğünde tarayıcı otomatik olarak en son service-worker.js'yi ister ve değişiklikler olup olmadığını kontrol eder. Hizmet çalışanı komut dosyasında farklı bir şey varsa yeni hizmet çalışanı yükleme, etkinleştirme ve sonunda kontrolü ele alma şansı elde eder.

Projenizin kod düzenleyicisine geri dönüp kodda herhangi bir değişiklik yaparak bu güncelleme akışını simüle edebilirsiniz. Hızlı bir değişiklik olarak

self.addEventListener('install', (event) => {
  console.log('Inside the install handler:', event);
});

ile

self.addEventListener('install', (event) => {
  console.log('Inside the UPDATED install handler:', event);
});

Bu değişikliği yaptıktan sonra örnek uygulamanızın Canlı sürümüne dönün ve DevTools Uygulama sekmesi açıkken sayfayı yeniden yükleyin. Aşağıdakine benzer bir ekran görürsünüz:

Bu, şu anda hizmet işleyicinizin iki sürümünün yüklü olduğunu gösterir. Daha önce etkinleştirilmiş olan önceki sürüm çalışıyor ve mevcut sayfanın kontrolünü elinde tutuyor. Hizmet çalışanının güncellenmiş sürümü hemen aşağıda listelenmiştir. waiting durumundadır ve eski hizmet çalışanı tarafından kontrol edilen tüm açık sekmeler kapanana kadar beklemeye devam eder.

Bu varsayılan davranış, yeni hizmet işleyicinizin davranışında eski hizmet işleyicinizle temel bir fark varsa (ör. web uygulamanızın eski sürümleriyle uyumlu olmayan kaynaklarla yanıt veren bir fetch işleyici) kullanıcı web uygulamanızın önceki tüm örneklerini kapatana kadar yeni hizmet işleyicinin etkinleşmemesini sağlar.

Özet

Artık bir hizmet çalışanı kaydetme ve Chrome'un Geliştirici Araçları'nı kullanarak hizmet çalışanının davranışını gözlemleme konusunda rahat olmalısınız.

Artık web uygulamanızın hem güvenilir hem de hızlı bir şekilde yüklenmesine yardımcı olacak önbelleğe alma stratejilerini ve diğer tüm iyi özellikleri uygulamaya başlamak için iyi bir konumdasınız.