Service Worker'larla çalışma

Jeff Posnick

Bu codelab'de, web uygulamanız içinden hizmet çalışanının nasıl kaydedileceği ve davranışını gözlemlemek için Chrome Geliştirici Araçları'nın nasıl kullanılacağı gösterilmektedir. Ayrıca, Service Worker'larla çalışırken faydalı bulabileceğiniz bazı hata ayıklama teknikleri de ele alınmaktadır.

Örnek projeyi tanıyın

Örnek projede bu codelab'le en alakalı dosyalar şunlardır:

• register-sw.js boş olarak başlar ancak hizmet çalışanını kaydetmek için kullanılan kodu içerir. Şu anda projenin index.html içindeki bir <script> etiketi aracılığıyla zaten yüklüdür.
• service-worker.js de benzer şekilde boş. Bu projede hizmet çalışanını içerecek dosyadır.

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

Bir hizmet çalışanı (geçerli service-worker.js dosyası gibi boş bir dosya olsa bile) önce kaydedilmediği sürece kullanılmaz. Bunun için telefon araması yaparak şunları yapabilirsiniz:

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

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

Ancak bu kodu eklemeden önce göz önünde bulundurmanız gereken birkaç nokta vardır.

Öncelikle, 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() öğesini koşullu olarak çağırmak en iyi uygulamadır.

İ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 önbelleği 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ı harcayabilir. Bu müdahaleyi önlemeye yardımcı olmak için tarayıcı geçerli sayfayı oluşturmayı tamamlayana kadar bir hizmet çalışanı kaydını ertelemek iyi bir uygulamadır. Bu değere yaklaşık olarak yaklaşmanın kolay bir yolu, window.load etkinliği tetiklenene kadar beklemektir.

Bu iki noktayı bir araya getirdikten sonra, register-sw.js dosyanıza şu genel amaçlı hizmet çalışanı kayıt kodunu ekleyin:

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

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

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 hepsini daha sonra öğrenmek isteriz. Bu aşamada, çeşitli Service Worker etkinliklerini gözlemlemeye ve hizmet çalışanınızın durumundaki hataları ayıklamak için Chrome'un Geliştirici Araçları'nı kullanmaya odaklanmaya odaklanır.

Bu amaçla, aşağıdaki kodu service-worker.js öğesine ekleyin. Bu kod, çeşitli etkinliklere yanıt olarak (ancak pek fazla işlem yapmayacak) mesajları Geliştirici Araçları konsoluna kaydeder:

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ıyın

Kodu register-sw.js ve service-worker.js dosyalarına eklediğinize göre, örnek projenizin Canlı sürümünü ziyaret edebilir ve hizmet çalışanının nasıl çalıştığını görebilirsiniz.

• 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.

Service Worker'ın yüklendiğini ve etkinleştirildiğini gösteren aşağıdaki günlük mesajları gibi bir şey 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 e-posta, solar-donkey.glitch.me web uygulaması için şu anda etkin ve çalışır durumda olan service-worker.js kaynak URL'sine sahip bir hizmet çalışanı olduğunu belirtir. Ayrıca, şu anda hizmet çalışanı tarafından kontrol edilen bir istemcinin (açık sekme) olduğunu da belirtir.

Şu anda kayıtlı olan hizmet çalışanı üzerinde hata ayıklama amacıyla değişiklik yapmak için bu paneldeki Unregister veya stop gibi bağlantıları kullanabilirsiniz.

Hizmet çalışanı 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, hizmet çalışanı kaydeden bir web uygulamasını ziyaret ettikten sonra yerel tarayıcılarında yüklü olan service-worker.js ürününün mevcut kopyasının kodunu görür. Peki, web sunucunuzda depolanan service-worker.js sürümünde güncelleme yaptığınızda ne olur?

Tekrar gelen ziyaretçi, Service Worker kapsamındaki bir URL'ye geri döndüğünde, tarayıcı otomatik olarak en son service-worker.js öğesini ister ve değişiklikleri kontrol eder. Service Worker komut dosyasındaki herhangi bir değişiklik farklıysa yeni Service Worker yükleme, etkinleştirme ve sonunda kontrolü ele alma fırsatı 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ıca yapılan bir değişiklik, projenin kapsamını

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

ve

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

Bu değişikliği yaptıktan sonra örnek uygulamanızın Live sürümüne dönün ve Geliştirici Araçları Uygulama sekmesi açık durumdayken sayfayı yeniden yükleyin. Aşağıdakine benzer bir şey görürsünüz:

Bu, hizmet çalışanınızın bu noktada yüklü iki sürümünün 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. Bu kod waiting durumundadır ve eski hizmet çalışanı tarafından kontrol edilen tüm açık sekmeler kapatılana kadar beklemeye devam eder.

Bu varsayılan davranış, yeni hizmet çalışanınızın davranışlarıyla eskisine kıyasla temel bir farklılık taşıması durumunda (ör. web uygulamanızın eski sürümleriyle uyumlu olmayan kaynaklarla yanıt veren fetch işleyicisi), bir kullanıcı web uygulamanızın önceki tüm örneklerini kapatana kadar etkinleşmeyecektir.

Özet

Chrome'un Geliştirici Araçları'nı kullanarak hizmet çalışanı kaydetme ve hizmet çalışanının davranışını gözlemleme işlemlerini rahatça yapabilirsiniz.

Ö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.