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 tekniklerini de kapsar.

Örnek projeyi tanıma

Örnek projedeki bu codelab ile 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 desteklenip desteklenmediğini kontrol ettikten sonra koşullu olarak çağırmak en iyi uygulamadır.navigator.serviceWorker

İ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, service-worker.js öğesine aşağıdaki kodu ekleyin. Bu kod, çeşitli etkinliklere yanıt olarak Geliştirici Araçları konsoluna mesajları 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 Service Workers 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.

• Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından Tam Ekran'a bası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, solar-donkey.glitch.me web uygulaması için service-worker.js kaynak URL'sine sahip bir hizmet çalışanının şu anda etkinleştirilmiş ve çalışıyor olduğunu gösterir. Ayrıca, şu anda hizmet çalışanı tarafından kontrol edilen bir istemci (açık sekme) olduğunu da belirtir.

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 davranışında eskisinden temel bir fark varsa (ör. web uygulamanızın eski sürümleriyle uyumlu olmayan kaynaklarla yanıt veren bir fetch işleyici) bu fark, kullanıcı web uygulamanızın önceki tüm örneklerini kapatana kadar geçerli olmaz.

Ö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 iyi şeyleri uygulamaya başlamak için iyi bir konumdasınız.