Hizmet işçisi kaydınızın zamanlamasını belirlemeyle ilgili en iyi uygulamalar.
Hizmet çalışanları, web uygulamanıza yapılan tekrar ziyaretleri önemli ölçüde hızlandırabilir ancak bir hizmet çalışanının ilk kurulumunun kullanıcının ilk ziyaret deneyimini bozmamasını sağlamak için gerekli adımları atmanız gerekir.
Genel olarak, hizmet çalışanı kayıt işlemini ilk sayfa yüklendikten sonra ertelemek, özellikle daha yavaş ağ bağlantılarına sahip mobil cihazlardaki kullanıcılar için en iyi deneyimi sağlar.
Ortak kayıt ortak metni
Hizmet işçileri hakkında bir şeyler okumuşsanız muhtemelen aşağıdakine benzer bir şablonla karşılaşmışsınızdır:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
}
Bu işleme bazen, kullanıcılara sayfayı yenilemeleri gerektiğini bildirmek için önceki bir hizmet çalışanı kaydında güncelleme algılayan birkaç console.log() ifadesi veya kod eşlik edebilir. Ancak bunlar, standart birkaç kod
satırının küçük varyasyonlarıdır.
navigator.serviceWorker.register ile ilgili herhangi bir nüans var mı? Uygulanması gereken en iyi uygulamalar var mı? Beklendiği gibi (bu makale burada bitmeyecek olsa)
her ikisinin de yanıtı "evet!"
Kullanıcının ilk ziyareti
Bir kullanıcının bir web uygulamasına ilk ziyaretini ele alalım. Henüz bir hizmet çalışanı yok ve tarayıcının, sonunda yüklenecek bir hizmet çalışanı olup olmayacağını önceden bilmesi mümkün değil.
Geliştirici olarak önceliğiniz, tarayıcıya etkileşimli bir sayfa görüntülemek için gereken minimum kritik kaynak grubunu hızlı bir şekilde sağlamanız olmalıdır. Bu yanıtların alınmasını yavaşlatan her şey, etkileşime geçme süresinin kısa olması açısından olumsuz bir durumdur.
Şimdi, sayfanızı oluşturmak için gereken JavaScript'i veya resimleri indirme sürecinde tarayıcınızın bir arka plan iş parçacığı veya işlemi (özetlemek amacıyla iş parçacığı olduğunu varsayacağız) başlattığını varsayalım. Güçlü bir masaüstü bilgisayarda değil, dünyanın büyük bir kısmının birincil cihazı olarak gördüğü düşük güçlü bir cep telefonunda olduğunuzu varsayalım. Bu ekstra iş parçacığının genişlemesi, tarayıcınızın etkileşimli bir web sayfasını oluşturmak için harcayabileceği CPU süresi ve bellekle ilgili çakışmaları artırır.
Boş bir arka plan iş parçacığının önemli bir fark yaratması olası değildir. Ancak bu iş parçacığı boşta değilse ve ağdan kaynak indirmeye de karar verirse ne olur? CPU veya bellek çekişmesi ile ilgili endişeler, birçok mobil cihazın sahip olduğu sınırlı bant genişliği ile ilgili endişelere kıyasla ikinci planda olmalıdır. Bant genişliği değerlidir, bu nedenle ikincil kaynakları aynı anda indirerek kritik kaynakları zayıflatmayın.
Tüm bunlar, arka planda kaynakları indirip önbelleğe almak için yeni bir hizmet çalışanı iş parçacığı oluşturmanın, kullanıcının sitenizi ilk ziyaret ettiğinde en kısa etkileşim süresini sunma hedefinize ters etki edebileceğini gösterir.
Ortak şartları geliştirme
Çözüm, navigator.serviceWorker.register() işlevinin ne zaman çağrılacağını seçerek hizmet çalışanının başlangıcını kontrol etmektir. Kayıt işlemini window tarihinde load
event tetiklendikten sonra ertelemek basit bir kuraldır. Ö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 da bağlıdır. Örneğin, Google I/O 2016 web uygulamasında ana ekrana geçiş yapmadan önce kısa bir animasyon bulunur. Ekibimiz, animasyon sırasında hizmet çalışanı kaydının başlatılmasının düşük kaliteli mobil cihazlarda takılmalara neden olabileceğini tespit etti. Kullanıcılara kötü bir deneyim sunmak yerine, hizmet çalışanı kaydını animasyondan sonra, tarayıcıda büyük olasılıkla birkaç saniye boşluk olacağı bir zamana erteledik.
Benzer şekilde, web uygulamanız, sayfa yüklendikten sonra ek kurulum yapan bir çerçeve kullanıyorsa bu çalışma tamamlandığında sinyal gönderen çerçeveye özel bir etkinlik arayın.
Sonraki ziyaretler
Şimdiye kadar ilk ziyaret deneyimine odaklandık. Ancak gecikmeli hizmet çalışanı kaydının sitenize yapılan tekrar ziyaretler üzerindeki etkisi nedir? Bazı kişileri şaşırtmış olsa da hiçbir etkisi olmayacaktır.
Bir hizmet çalışanı kaydedildiğinde install ve activate yaşam döngüsü etkinliklerinden geçer.
Bir hizmet çalışanı etkinleştirildikten sonra, web uygulamanıza yapılan sonraki ziyaretler için fetch etkinliklerini işleyebilir. Hizmet çalışanı, kapsamı kapsamındaki sayfalar için istek gönderilmeden önce başlar. Bu durum, üzerinde düşünüldüğünde mantıklı bir durumdur. Mevcut hizmet çalışanı, bir sayfayı ziyaret etmeden önce çalışmıyorsa gezinme istekleri için fetch etkinliklerini yerine getirme şansı olmaz.
Bu nedenle, etkin bir hizmet çalışanı olduğunda navigator.serviceWorker.register()'ü ne zaman çağırdığınız veya çağırıp çağırmadığınız önemli değildir.
Hizmet çalışanı komut dosyasının URL'sini değiştirmediğiniz sürece navigator.serviceWorker.register(), sonraki ziyaretlerde iş yapmaz. Ne zaman çağrıldığı önemli değildir.
Erken kaydolmanız için nedenler
Hizmet çalışanınızı mümkün olduğunca erken kaydettirmenin mantıklı olduğu senaryolar var mı? İlk ziyaret sırasında sayfanın kontrolünü ele almak için hizmet işleyicinizin clients.claim() kullanması ve hizmet işleyicinin fetch işleyicisinde agresif bir şekilde çalışma zamanında önbelleğe alma işlemi gerçekleştirmesi akla gelen örneklerden biridir. Böyle bir durumda, hizmet çalışanının mümkün olduğunca hızlı bir şekilde etkin hale getirilmesi, çalışma zamanı önbelleklerini daha sonra kullanışlı olabilecek kaynaklarla doldurmanın bir avantajıdır. Web uygulamanız bu kategoriye giriyorsa bir adım geri çekilip hizmet çalışanınızın install işleyicisinin, ana sayfanın istekleriyle bant genişliği için yarışan kaynaklar istemediğinden emin olmanız gerekir.
Testler
İlk ziyareti simüle etmenin harika bir yolu, web uygulamanızı Chrome Gizli penceresinde açıp Chrome'un Geliştirici Araçları'nda ağ trafiğine bakmaktır. Web geliştiricisi olarak, web uygulamanızın yerel örneğini günde düzinelerce kez yeniden yüklemeniz muhtemeldir. Ancak sitenizi, bir hizmet çalışanı ve tamamen doldurulmuş önbellekler olduğunda tekrar ziyaret ettiğinizde yeni bir kullanıcının elde edeceği deneyimi elde edemezsiniz ve olası bir sorunu göz ardı etmek kolaydır.
Kayıt zamanlamasının oluşturabileceği farkı gösteren bir örneği aşağıda bulabilirsiniz. Yavaş bağlantıyı simüle etmek için ağ kısıtlama kullanılarak Gizli modda örnek uygulama ziyaret edilirken her iki ekran görüntüsü de alınır.
Yukarıdaki ekran görüntüsünde, mümkün olan en kısa sürede hizmet çalışanı kaydı gerçekleştirmek için örnek değiştirildiği andaki ağ trafiği yansıtılmaktadır. Önbelleğe alma isteklerinin (yanlarında Service Worker'ın install işleyicisinden gelen, yanlarında çark simgesi bulunan girişler), sayfayı görüntülemek için gereken diğer kaynaklara yönelik isteklerle karışık olarak işlendiğini görebilirsiniz.
Yukarıdaki ekran görüntüsünde, Service Worker kaydı sayfa yüklenene kadar erteleniyordu. Tüm kaynaklar ağdan getirilene kadar önbelleğe alma isteklerinin başlamadığını görebilirsiniz. Bu sayede bant genişliği için herhangi bir çekişme ortadan kaldırılır. Ayrıca, önceden önbelleğe aldığımız öğelerden bazıları zaten tarayıcının HTTP önbelleğinde olduğundan (Boyut sütununda (from disk cache) olan öğeler) hizmet çalışanının önbelleğini ağa tekrar gitmek zorunda kalmadan doldurabiliriz.
Bu tür bir testi gerçek bir mobil ağda gerçek, düşük kaliteli bir cihazdan çalıştırırsanız bonus puan kazanırsınız. Bir Android telefonu USB aracılığıyla masaüstü makinenize bağlamak için Chrome'un uzaktan hata ayıklama özelliklerinden yararlanabilir ve gerçekleştirdiğiniz testlerin, kullanıcılarınızın birçoğunun gerçek dünyadaki deneyimini yansıttığından emin olabilirsiniz.
Sonuç
Özetlemek gerekirse, kullanıcılarınızın ilk ziyarette en iyi deneyimi yaşamasını sağlamak birinci önceliğiniz olmalıdır. İlk ziyaret sırasında hizmet çalışanı kaydını sayfa yüklenene kadar ertelemek bunu sağlamaya yardımcı olabilir. Tekrar eden ziyaretleriniz için bir servis çalışanının olmasının tüm avantajlarından yararlanmaya devam edersiniz.
Hizmet çalışanınızın ilk kaydını ilk sayfa yüklendikten sonra geciktirmek için aşağıdakileri kullanabilirsiniz:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}