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. Zaten projenin index.html içinde bir <script> etiketi aracılığıyla yükleniyor.
• service-worker.js de benzer şekilde boş. 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. Telefon aramasıyla şu işlemleri yapabilirsiniz:

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

register-sw.js dosyanızdaki

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

İlk olarak, her tarayıcı Service Worker'ları 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

Normalde service-worker.js dosyanız, Service Worker uygulamanızın tüm mantığının geçerli olacağı yerdir. Web uygulamanızın tüm isteklerini karşılamaya hazır, mükemmel şekilde hazırlanmış bir hizmet çalışanı oluşturmak için Service Worker yaşam döngüsü etkinliklerini, Cache Storage API'yi ve web uygulamanızın ağ trafiği hakkındaki bilgileri bir arada kullanırsınız.

Ama...bunların hepsi daha sonra öğreneceğiniz şeyler. 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 basın. Ardından, Tam ekran düğmesine basın.
• Geliştirici Araçları'nı açmak için "Control+Üst Karakter+J" (veya Mac'te "Command+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 günlük mesajlarına benzer bir mesaj görürsünüz:

Ardından Uygulamalar sekmesini ziyaret edin ve Hizmet Çalışanları panelini seçin. Aşağıdaki gibi bir sonuç görmeniz gerekir:

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, hizmet çalışanı tarafından kontrol edilen bir müşterinin (açık sekme) bulunduğ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. Zaten etkinleştirilmiş olan önceki sürüm çalışmaktadır ve mevcut sayfanın kontrolündedir. 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.

Önbelleğe alma stratejilerini ve web uygulamanızın hem güvenilir hem de hızlı bir şekilde yüklenmesini sağlayacak tüm faydalı özellikleri uygulamaya başlamak için iyi bir konumdasınız.