Bu codelab'de, web uygulamanızdan bir 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 tekniklerine de değindik.
Örnek projeyi tanıyın
Örnek projede bu codelab ile en alakalı dosyalar şunlardır:
register-sw.jsalanı boş olarak başlar ancak hizmet çalışanını kaydetmek için kullanılan kodu içerir. Zaten projeninindex.htmletiketinin içindeki bir<script>etiketi ile yükleniyor.service-worker.jsde benzer şekilde boş. Bu projenin Service Worker'ını içerecek dosyadır.
Service Worker kayıt kodunu ekleyin
Bir hizmet çalışanı (mevcut service-worker.js dosyası gibi boş olsa bile) ilk olarak kaydedilmediği sürece kullanılmaz. Bu işlemi şu numarayı arayarak yapabilirsiniz:
navigator.serviceWorker.register(
'/service-worker.js'
)
register-sw.js dosyanızın içinde bulabilirsiniz.
Ancak, bu kodu eklemeden önce dikkate almanız gereken birkaç nokta vardır.
Öncelikle, her tarayıcı Service Worker'ı 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 Service Worker'ı 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 öğeleri indirmek, tarayıcınızın mevcut web sayfasını görüntülemek için kullanabileceği değerli kaynakları kullanabilir. Bu paraziti önlemeye yardımcı olmak için, tarayıcı geçerli sayfayı oluşturmayı bitirene kadar bir hizmet çalışanının kaydını ertelemek iyi bir uygulamadır. Bunu yaklaşık olarak bulmanın kolay bir yolu da window.load etkinliği tetiklenene kadar beklemektir.
Bu iki noktayı bir araya getirerek, 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');
});
}
Service Worker günlük kaydı kodu ekleyin
service-worker.js dosyanız, normalde Service Worker uygulamanızın tüm mantığını kullanır. Web uygulamanızın tüm isteklerini karşılamaya hazır, kusursuz şekilde tasarlanmış bir hizmet çalışanı oluşturmak için Service Worker yaşam döngüsü etkinliklerini, Cache Storage API'sini ve web uygulamanızın ağ trafiğiyle ilgili bilgileri bir arada kullanırsınız.
Ama hepsi bu kadar. Bu aşamada, çeşitli Service Worker etkinliklerini gözlemlemeye ve Chrome'un Geliştirici Araçları'nı kullanarak Service Worker'ınızın durumunun hatalarını ayıklamaya alışmaya odaklanılır.
Bu amaçla, service-worker.js alanına aşağıdaki kodu ekleyin. Bu işlem, çeşitli etkinliklere yanıt olarak mesajları Geliştirici Araçları konsoluna 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 şimdi örnek projenizin Live sürümünü ziyaret edebilir ve Service Worker'ı iş başında görebilirsiniz.
- Siteyi önizlemek için Uygulamayı Göster'e, 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.
Service Worker'ın yüklenmiş ve etkinleştirildiğini gösteren aşağıdaki günlük mesajlarına benzer bir sonuç görürsünüz:
Sonra Uygulamalar sekmesine gidin ve Hizmet Çalışanları panelini seçin. Aşağıdakine benzer bir sonuç görürsünüz:
Bu, solar-donkey.glitch.me web uygulaması için kaynak URL'si service-worker.js olan bir Service Worker'ın şu anda etkinleştirilmiş ve çalışan olduğunu size bildirir. Ayrıca şu anda Service Worker tarafından kontrol edilen bir istemci (açık sekme) olduğunu da belirtir.
Hata ayıklama amacıyla, mevcut olarak kayıtlı olan hizmet çalışanı üzerinde değişiklik yapmak için bu paneldeki Unregister veya stop gibi bağlantıları kullanabilirsiniz.
Service Worker güncelleme akışını tetikleyin
Service Worker'larla uygulama geliştirirken anlaşılması gereken temel kavramlardan biri, güncelleme akışıdır.
Kullanıcılarınız, hizmet çalışanı kaydeden bir web uygulamasını ziyaret ettikten sonra yerel tarayıcılarında yüklü olan mevcut service-worker.js kopyasına ait kodu alır. 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ı kapsamındaki bir URL'ye döndüğünde, tarayıcı otomatik olarak en son service-worker.js bilgisini ister ve değişiklikleri kontrol eder. Service Worker komut dosyasındaki herhangi bir fark varsa yeni Service Worker yükleme, etkinleştirme ve sonunda kontrolü ele alma fırsatına sahip olur.
Projenizin kod düzenleyiciye 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, geleneksel proje yöneticilerinin
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 (Canlı) sürümüne dönün ve DevTools Application (Uygulama) sekmesi açık olacak şekilde sayfayı yeniden yükleyin. Aşağıdakine benzer bir sonuç görürsünüz:
Bu şekilde, Service Worker'ınızın bu noktada yüklü olan iki sürümü vardır. Daha önce etkinleştirilmiş olan önceki sürüm çalışmakta olup geçerli sayfanın kontrolünü elinde tutmaktadır. Service Worker'ın güncellenmiş sürümü hemen aşağıda listelenmiştir. Bu tablo waiting durumundadır ve eski Service Worker tarafından kontrol edilen tüm açık sekmeler kapatılana kadar beklemeye devam eder.
Bu varsayılan davranış, yeni Service Worker'ınızın davranışında eskisine göre temel bir farklılık olması durumunda (web uygulamanızın eski sürümleriyle uyumlu olmayan kaynaklarla yanıt veren fetch işleyici gibi) kullanıcı web uygulamanızın önceki tüm örneklerini kapatana kadar bu durumun geçerli olmayacağını garanti eder.
Konuyu özetleme
Chrome Geliştirici Araçları'nı kullanarak Service Worker'ı kaydetme ve hizmet çalışanı davranışını gözlemleme sürecini artık rahatça görebilirsiniz.
Artık, önbelleğe alma stratejilerini ve web uygulamanızın hem güvenilir hem de güvenilir bir şekilde hızlı yüklenmesine yardımcı olacak tüm yararlı özellikleri uygulamaya başlamak için iyi bir konumdasınız.