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.jsalanı 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.htmlservice-worker.jsde 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.