Service Worker'larla çalışma

Jeff Posnick

Bu codelab'de, web uygulamanızdan bir hizmet çalışanı kaydetmeyi ve davranışını gözlemlemek için Chrome Geliştirici Araçları'nı kullanmayı öğreneceksiniz. Ayrıca, hizmet çalışanlarıyla uğraşırken yararlı bulabileceğiniz bazı hata ayıklama teknikleri de ele alınmaktadır.

Örnek projeyi tanıma

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

• register-sw.js başlangıçta boştur ancak hizmet çalışanını kaydetmek için kullanılan kodu içerir. Projenin index.html bölümündeki bir <script> etiketiyle zaten yükleniyor.
• service-worker.js da benzer şekilde boş. Bu, projenin hizmet çalışanını içerecek dosyadır.

Service worker kaydı kodunu ekleyin.

Bir hizmet çalışanı (mevcut service-worker.js dosyası gibi boş olanlar bile) önce kaydedilmedikçe kullanılmaz. Bu işlemi şu numarayı arayarak yapabilirsiniz:

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

register-sw.js dosyanızın içinde

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

Öncelikle, her tarayıcı hizmet çalışanlarını desteklemez. Bu durum, özellikle otomatik olarak güncellenmeyen tarayıcıların eski sürümleri için geçerlidir. Bu nedenle, navigator.serviceWorker.register() işlevinin navigator.serviceWorker desteklenip desteklenmediğini kontrol ettikten sonra koşullu olarak çağrılması en iyi uygulamadır.

İkincisi, 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ı tüketebilir. Bu müdahaleyi önlemek için tarayıcı geçerli sayfayı oluşturmayı bitirene kadar hizmet çalışanı kaydını geciktirmek iyi bir uygulamadır. Bunu yaklaşık olarak hesaplamanın kolay bir yolu, window.load etkinliğinin tetiklenmesini beklemektir.

Bu iki noktayı bir araya getirerek register-sw.js dosyanıza şu genel amaçlı hizmet çalışanı kaydı kodunu ekleyin:

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

Bazı hizmet çalışanı günlük kaydı kodları ekleme

service-worker.js dosyanız, hizmet çalışanı uygulamanızla ilgili tüm mantığın normalde yerleştirildiği yerdir. Hizmet çalışanı yaşam döngüsü etkinliklerinin, Cache Storage API'nin ve web uygulamanızın ağ trafiğiyle ilgili bilgilerin bir kombinasyonunu kullanarak web uygulamanızın tüm isteklerini işlemeye hazır, mükemmel bir hizmet çalışanı oluşturursunuz.

Ancak… bunları daha sonra öğreneceğiz. Bu aşamada, çeşitli hizmet çalışanı etkinliklerini gözlemlemeye ve hizmet çalışanınızın durumunu hata ayıklamak için Chrome'un Geliştirici Araçları'nı kullanmaya alışmaya odaklanılır.

Bu amaçla, çeşitli etkinliklere yanıt olarak mesajları Geliştirici Araçları konsoluna kaydedecek (ancak başka bir işlem yapmayacak) aşağıdaki kodu service-worker.js'ya ekleyin:

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ı paneli hakkında bilgi edinme

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ı çalışırken gözlemlemenin zamanı geldi.

• Sayfayı tarayıcınızda açın.
• Geliştirici Araçları'nı açmak için `Control+Shift+J` (veya Mac'te `Command+Option+J`) tuşlarına basın.
• Konsol sekmesini tıklayın.

Aşağıdaki gibi günlük mesajları görürsünüz. Bu mesajlar, hizmet çalışanının yüklendiğini ve etkinleştirildiğini gösterir:

Ardından Uygulamalar sekmesini ziyaret edin ve Service Workers panelini seçin. Aşağıdakine benzer bir ifade görürsünüz:

Bu, web uygulaması için şu anda etkinleştirilmiş ve çalışan, kaynak URL'si service-worker.js olan bir service worker 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.

Service worker güncelleme akışını tetikleme

Service worker'larla geliştirme yaparken anlaşılması gereken temel kavramlardan biri güncelleme akışı fikridir.

Kullanıcılarınız bir hizmet çalışanı kaydeden bir web uygulamasını ziyaret ettikten sonra, yerel tarayıcılarına yüklenen service-worker.js uygulamasının mevcut kopyasının koduyla karşılaşır. Ancak web sunucunuzda depolanan service-worker.js sürümünde güncellemeler yaptığınızda ne olur?

Tekrar gelen bir ziyaretçi, bir hizmet çalışanı kapsamındaki bir URL'ye döndüğünde tarayıcı otomatik olarak en son service-worker.js isteğinde bulunur ve değişiklik olup olmadığını kontrol eder. Service worker komut dosyasında farklı bir şey varsa yeni service worker yüklenip etkinleştirilir ve sonunda kontrolü ele alır.

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 Geliştirici Araçları Uygulama sekmesi açıkken sayfayı yeniden yükleyin. Aşağıdakine benzer bir şey görmeniz gerekir:

Bu, şu anda iki sürüm service worker'ınızın yüklü olduğunu gösterir. Daha önce etkinleştirilmiş olan önceki sürüm çalışıyor ve mevcut sayfayı kontrol ediyor. Güncellenen hizmet çalışanı sürümü hemen aşağıda listelenmiştir. Bu durum, waiting durumundadır ve eski hizmet çalışanı tarafından kontrol edilen açık sekmelerin tümü kapatılana kadar beklemeye devam eder.

Bu varsayılan davranış, yeni hizmet çalışanınızın eski hizmet çalışanınızdan temel bir davranış farklılığı (ör. web uygulamanızın eski sürümleriyle uyumsuz kaynaklarla yanıt veren bir fetch işleyici) olması durumunda, bir kullanıcı web uygulamanızın önceki tüm örneklerini kapatana kadar etkinleşmemesini sağlar.

Özet

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

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