Hizmet çalışanı kaydı

Service Worker kaydınızı zamanlamayla ilgili en iyi uygulamalar.

Jeff Posnick

Hizmet çalışanlar web uygulamanıza yapılan yinelenen ziyaretleri anlamlı bir şekilde hızlandırabilir, ancak ilk yüklemesinin kötüleşmeyeceğinden emin olmak için ilk ziyaret deneyimi.

Genellikle, hizmet çalışanının kayıt yüklenene kadar kullanıcı için en iyi deneyimi (özellikle de ağ bağlantısı yavaş olan mobil cihazlardaki kullanıcılar)

Genel kayıt standart metni

Service Worker'lar hakkında bilgi aldıysanız muhtemelen karşılaşacağınız aşağıdakine büyük ölçüde benzer ortak metin:

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js');
}

Bu karara bazen birkaç console.log() ifadesi eşlik edebilir veya kod hizmet çalışanı kaydına yapılan güncellemeyi algılayan bir güncelleme, kullanıcılara sayfayı yenilemeleri konusunda bilgi vermek. Bunlar, zaman çizelgesiyle ilgili emin olmanız gerekir.

Peki, navigator.serviceWorker.register ile ilgili bir nüans var mı? Soru soranları izlenecek en iyi uygulamalar nelerdir? Beklendiği gibi (bu makale Burada) her ikisinin de yanıtı "evet!"

Kullanıcının ilk ziyareti

Bir kullanıcının bir web uygulamasını ilk ziyaretini ele alalım. Henüz hizmet çalışanı yoktur. ve tarayıcının bir hizmetin sunulup sunulmayacağını önceden bilmesi mümkün değildir. çalışan bir çalışanla sınırlıdır.

Geliştirici olarak önceliğiniz, tarayıcının hızlı bir şekilde bir kitle oluşturmak için gereken minimum kritik kaynağı sayfasını ziyaret edin. Bu yanıtların alınmasını yavaşlatan her şey hızlandırılmış etkileşim süresi.

Şimdi de diyelim ki bir kullanıcı JavaScript'i veya başka bir dosyayı tarayıcınız bir arka plan ileti dizisi başlatmaya karar verirse veya işlem (kısaca özetlemek için bunun bir ileti dizisi olduğunu varsayacağız). Diyelim ki kullandığınız makinenin performansı yetersizdir. yaygın olarak kullanılan bir mobil telefon. Dönen bu ekstra ileti dizisi, tarayıcınızın sunduğu CPU süresi ve bellekle ilgili harcayabilir.

Boşta bir arka plan ileti dizisinin önemli bir fark yaratma olasılığı düşüktür. Ama ne bu ileti dizisi boşta değilse, ancak bunun yerine, ileti dizisinde başlatılacağına ağdan kaynak indiriyor musunuz? CPU veya bellekle ilgili herhangi bir sorun rekabetin sınırlı bant genişliği konusunda endişelenmesi gerekir pek çok mobil cihazda kullanılabilir. Bant genişliği değerlidir, zarar vermeyin aynı anda ikincil kaynaklar indirerek kritik kaynakları da kullanabilirsiniz.

Bunların hepsi, veri indirme işlemi için yeni bir hizmet çalışanı iş parçacığı arka planda kaynak önbellek kullanımı, gönüllü veri sağlama amacınıza bir kullanıcı web sitenizi ilk kez ziyaret ettiğinde en kısa sürede etkileşime girebilecektir. girin.

Ortak şartları geliştirme

Çözüm, ne zaman çağrılacağını seçerek Service Worker'ın başlangıcını kontrol etmektir. navigator.serviceWorker.register() Genel kural olarak, müşterinin load event sonrasına kadar kayıt window tarihinde tetiklenecek, örneğin:

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

Ancak Service Worker kaydını başlatmak için doğru zaman web uygulamanızın yüklendikten hemen sonra ne yaptığına ilişkin veriler sunar. Örneğin, Google I/O 2016 web uygulamasında kısa bir animasyon bulunuyor ana ekrana geçmeden önce Ekibimiz tesadüfen hizmet çalışanı kaydının iptal edilmesi can sıkıcılığa neden olabilir ve eski teknolojiye sahip mobil cihazlarda. Kullanıcılara kötü bir deneyim yaşatmak yerine, rötarlı sonrasında, tarayıcının en çok izlendiği zamana kadar hizmet çalışanı kaydı boşta kalma birkaç saniye olabilir.

Benzer şekilde, web uygulamanız yüklendikten sonra, sayfanın yüklendiğini gösteren çerçeveye özel gerektiğini bileceksiniz.

Sonraki ziyaretler

Şimdiye kadarki ilk ziyaret deneyimine odaklandık, ancak bunun etkisi Gecikmeli hizmet çalışanı kaydı sitenize yinelenen ziyaretlerde oluyor mu? Bazı kişileri şaşırtmış olsa da hiçbir etkisi olmayacaktır.

Bir hizmet çalışanı kaydedildiğinde install üzerinden geçer ve activate yaşam döngüsü etkinlikler ile ilgili daha fazla bilgi edinin. Service Worker etkinleştirildiğinde tüm cihazlar için fetch etkinliklerini işleyebilir. web uygulamanıza yapılan sonraki ziyaretler. Service Worker,önceönce böyle bir istek olduğunu düşündüğünüzde, bu durumun hesap ekiplerinizle görüşün. Mevcut hizmet çalışanı ziyaret eden kullanıcıların fetch etkinlik gerçekleştirme gezinme istekleri.

Dolayısıyla, etkin bir Service Worker sağlandığında ne zaman navigator.serviceWorker.register() veya isteseniz de önerme. Service Worker komut dosyasının URL'sini değiştirmediğiniz sürece navigator.serviceWorker.register() etkili bir şekilde no-op'lar: Saat alakasızdır.

Erken kayıt yaptırmanız için nedenler

Hizmet çalışanınızı en kısa sürede kaydettirmenizin mantıklıdır. Aklınıza gelen ilk şey, servis çalışanınızın kullandığı clients.claim() ilk ziyarette sayfanın kontrolünü ele geçirmesine ve hizmet çalışanının çalışma zamanını agresif bir şekilde gösterir önbelleğe alma fetch işleyicisinin içinde. Böyle bir durumda, mümkün olduğunca hızlı aktif hale getirmek için bir avantaj olarak çalışma zamanı önbelleklerini daha sonra yararlı olabilecek kaynaklarla doldurmayı deneyin. Eğer bu kategoride yer alıyorsa bir adım geri çekilip hizmet çalışanınızın install işleyicisinin istekte bulunmadığından emin olun. ana sayfanın istekleriyle bant genişliği için mücadele eden kaynaklar

Özellikleri test etme

İlk ziyareti simüle etmenin harika bir yolu, web uygulamanızı Chrome'da Gizli pencere'yi tıklayın. ağ trafiğini görmek için Chrome'un Geliştirici Araçları. Web olarak web uygulamanızın yerel bir örneğini onlarca kez yeniden yüklersiniz. günde onlarca kez. Bununla birlikte, halihazırda mevcut bir ilgi olduğunda sitenizi yeniden ziyaret ederek hizmet çalışanı ve tamamen doldurulmuş önbelleklerle yeni bir karşı karşıya kalabilir ve potansiyel bir sorunu kolayca göz ardı etmek mümkündür.

Aşağıda, kayıt zamanlamasının anlatacağım. Bir örneği ziyaret ederken her iki ekran görüntüsü de alınır uygulamasında Yavaş bağlantıyı simüle etmek için ağ kısıtlama kullanan Gizli mod.

Yukarıdaki ekran görüntüsü, örnek değiştirildiğinde ağ trafiğini yansıtmaktadır hizmet çalışanı kaydını mümkün olan en kısa sürede gerçekleştirmek için gereken adımları atın. Böylece iki (önbelleğe alma istekleri) (dişli çark simge (hizmet çalışanının install işleyicisinden başlayarak) sayfayı görüntülemek için gereken diğer kaynaklara yönelik istekler serpiştirilmiş olarak gösterilir.

Yukarıdaki ekran görüntüsünde, hizmet çalışanı kaydı sayfa yüklendi. Önbelleğe alma isteklerinin tüm web sitesi testlerinde kaynakların ağdan getirildiğini ve böylece olası satışların, bant genişliği. Dahası, önbelleğe aldığımız öğelerden bazıları zaten tarayıcının HTTP önbelleği (Boyut bölümünde (from disk cache) bulunan öğeler) bulunduğu bir sayfaya giderek ağa tekrar yükleyin.

Bu tür testi gerçek, düşük kaliteli bir cihazdan, akıllı bir gerçek bir mobil ağ. Chrome'un uzaktan hata ayıklama özelliğinden yararlanabilirsiniz. özellikler USB aracılığıyla bir Android telefonu masaüstü makinenize bağlayın ve yaptığınız testler çoğu müşterinizin gerçek yaşam deneyimini yansıtır. yardımcı olur.

Sonuç

Özetlemek gerekirse, kullanıcılarınızın en iyi ilk ziyaret deneyimini yaşamalarını sağlamak için en yüksek öncelik olmalıdır. Hizmet çalışanı kaydını sayfası yüklenmesi bunu sağlamaya yardımcı olabilir. Avantajlardan tekrarlayan ziyaretleriniz için bir Service Worker'a sahip olmanın tüm avantajlarından yararlanın.

Service Worker'ınızın ilk çalışmasını geciktirmenin kolay bir yolu sonrasına kadar kayıt işlemi şunu kullanmaktır:

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