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 projede bu codelab'le en alakalı dosyalar şunlardır:

• register-sw.js alanı boş olarak başlar ancak kullanılan kodu içerir. hizmet çalışanını kaydetmesini isteyin. Zaten <script> aracılığıyla yükleniyor etiketinin içine yerleştirin.index.html
• service-worker.js de benzer şekilde boş. Bu dosya, hizmet çalışanı olur.

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

Hizmet çalışanı (mevcut service-worker.js dosyası gibi boş bir çalışan bile) kullanılmadığı sürece kullanılmaz kayıtlı tıklayın. 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. hesap.

Birincisi, her tarayıcıda destekler hizmet çalışanları. Bu durum özellikle, tarayıcılarınızın otomatik olarak güncellenmez. Bu nedenle, navigator.serviceWorker desteklenip desteklenmediğini kontrol ettikten sonra navigator.serviceWorker.register() işlevini koşullu olarak çağırmanız en iyi uygulamadır.

İkinci olarak, bir hizmet çalışanı kaydettiğinizde tarayıcı service-worker.js dosyası oluşturur ve doldurulacak URL'leri indirmeye başlayabilir hizmet çalışanınızın kodundaki koda bağlı olarak, install ve activate etkinlik işleyicileri gibi.

Ek kod çalıştırmak ve öğeleri indirmek ve tarayıcınızın mevcut bilgileri görüntülemek için kullanabileceği değerli kaynaklar web sayfası. Bu müdahaleyi önlemek için, tarayıcı mevcut sayfayı oluşturmayı tamamlayana kadar bir hizmet çalışanını kaydetmeyi ertelemeniz önerilir. Buna yaklaşmanın kolay bir yolu, window.load etkinlik tetiklendi.

Bu iki noktayı bir araya getirdiğimizde, 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 ekleyin

Service Worker'ınız için tüm mantık, service-worker.js dosyanıza eklenir devam edebilir. Service Worker'ın bir karmasını kullanırsınız yaşam döngüsü etkinliklerini "the" Önbellek Depolama API'si, web uygulamanızın ağ trafiği hakkında sahip olduğunuz bilgileri ve bilgileri de hizmet çalışanı, web uygulamanızın tüm isteklerini işlemeye hazır.

Ancak… bu konuyu daha sonra öğreneceksiniz. Bu aşamada odak noktası gözlemlemektir. çeşitli hizmet çalışanı etkinlikleri ve Chrome'un Geliştirici Araçları'nı kullanmaya alışmak durumundaki hataları ayıklayın.

Bu amaçla, aşağıdaki kodu service-worker.js öğesine ekleyin. Bu kod, yanıt olarak geliştirici Araçları konsoluna gönderilen mesajlar (ancak başka):

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 hizmetlerine eklediğinize göre örnek projenizin Canlı sürümünü ziyaret edin ve hizmet çalışanıdır.

• 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 "Control+Üst Karakter+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
• Konsol sekmesini tıklayın.

Aşağıdaki günlük mesajlarına benzer bir sonuç görürsünüz: hizmet çalışanının yüklendiğini ve etkinleştirildiğini gösteren resim:

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

Bu işlem, kaynak URL'si şu olan bir Service Worker olduğunu belirtir: solar-donkey.glitch.me web uygulaması için şu anda service-worker.js etkin ve çalışır durumda olmalıdır. Ayrıca, hizmet çalışanı tarafından kontrol edilen bir müşterinin (açık sekme) bulunduğunu da gösterir.

Aşağıdakileri yapmak için bu paneldeki Unregister veya stop gibi bağlantıları kullanabilirsiniz: Hata ayıklama amacıyla, şu anda kayıtlı olan hizmet çalışanı üzerinde yapılan değişiklikler

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

Service Worker'larla geliştirme yaparken anlaşılması gereken temel kavramlardan biri fikri güncelleyin.

Kullanıcılarınız hizmet çalışanı kaydeden bir web uygulamasını ziyaret ettikten sonra cihazında yüklü olan mevcut service-worker.js kopyasının kodunu yerel tarayıcı. Peki, uygulamanızın veya oyununuzun service-worker.js dosyası mı var?

Tekrar gelen ziyaretçi, hizmet çalışanı kapsamındaki bir URL'ye döndüğünde tarayıcı otomatik olarak son service-worker.js sürümünü ister ve olup olmadığını kontrol edin. Service Worker komut dosyasındaki herhangi bir şey farklıysa yeni Service Worker ise uygulamayı kurma, etkinleştirme ve ve nihayetinde kontrolü ele geçiriyorum.

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

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. Burada şuna benzer bir şey:

Bu, hizmet çalışanınızın şurada yüklü iki sürümünün olduğunu gösterir: puan. 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ü listelenir hemen aşağıdaki bölümden. Bu oturum waiting eyalet, ve komut dosyası tarafından kontrol edilen tüm açık sekmeler açılana kadar eski hizmet çalışanı kapatıldı.

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 uygulamaya başlamak için iyi bir konumdasınız. Böylece web uygulamanızın hem güvenilir hem de güvenilir bir şekilde yüklenmesini sağlayacak hızlıdır.