Service Worker kaydınızı zamanlamayla ilgili en iyi uygulamalar.
Hizmet çalışanları web uygulamanıza yapılan yinelenen ziyaretleri anlamlı bir şekilde hızlandırabilir. Ancak hizmet çalışanının ilk yüklemesinin, kullanıcının ilk ziyaret deneyimini bozmamasını sağlamak için gerekli adımları atmanız gerekir.
Genellikle, hizmet çalışanı kaydını ilk sayfa yüklenene kadar ertelemek, özellikle ağ bağlantısı yavaş olan mobil cihazlardaki kullanıcılar için en iyi deneyimi sağlar.
Ortak kayıt ortak yazısı
Service Worker'lar hakkında bilgi edindiyseniz büyük olasılıkla aşağıdakilere benzer ortak metinlerle karşılaşmışsınızdır:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
}
Bu durum, bazen birkaç console.log()
ifadesiyle veya kullanıcılara sayfayı yenilemeleri konusunda bilgi vermek için önceki Service Worker kaydında bir güncelleme algılayan kod ile birlikte gösterilebilir. Ancak bunlar standart birkaç satırlık kodun
küçük varyasyonlarıdır.
Peki navigator.serviceWorker.register
ile ilgili bir nüans var mı? İzlenecek en iyi
uygulama var mı? Beklendiği gibi (bu makalenin tam burada bitmediği
düşünüldüğünde) her ikisinin de yanıtı "evet!"
Bir kullanıcının ilk ziyareti
Bir kullanıcının bir web uygulamasına yaptığı ilk ziyareti ele alalım. Henüz hizmet çalışanı yoktur ve tarayıcının en sonunda yüklenen bir hizmet çalışanı olup olmayacağını önceden bilmesi mümkün değildir.
Bir geliştirici olarak önceliğiniz, tarayıcının etkileşimli bir sayfayı görüntülemek için gereken minimum kritik kaynak kümesini hızlı bir şekilde almasını sağlamak olmalıdır. Bu yanıtları almayı yavaşlatan her şey, etkileşim için gereken hızlı deneyimin düşmanıdır.
Şimdi, sayfanızın oluşturması gereken JavaScript'i veya resimleri indirirken tarayıcınızın bir arka plan iş parçacığı veya işlemi başlatmaya karar verdiğini düşünün (kısa olması açısından bunun bir iş parçacığı olduğunu varsayacağız). Büyük bir masaüstü bilgisayar değil, dünyanın çoğunun birincil cihazı olarak gördüğü yetersiz güçte bir cep telefonu tipinde olduğunuzu varsayalım. Bu ekstra iş parçacığının başlatılması, tarayıcınızın etkileşimli bir web sayfasını oluşturmak için harcayabileceği CPU süresi ve bellek konusunda anlaşmazlık ekler.
Boştaki bir arka plan iş parçacığının önemli bir fark yaratma olasılığı düşüktür. Peki bu iş parçacığı boşta değilse ve bunun yerine, kaynakları ağdan indirmeye de başlayacağına karar verirse ne olur? CPU veya bellek anlaşmazlığıyla ilgili herhangi bir endişe, birçok mobil cihazda kullanılabilen sınırlı bant genişliği endişesi olarak ikinci sırada yer almalıdır. Bant genişliği değerlidir. Bu nedenle, ikincil kaynakları aynı anda indirerek kritik kaynaklara zarar vermeyin.
Tüm bunlar, kaynakları arka planda indirmek ve önbelleğe almak için yeni bir Service Worker iş parçacığı oluşturmanın, bir kullanıcı sitenizi ilk kez ziyaret ettiğinde etkileşim için en kısa süreyi sağlama hedefinize aleyhinde işe yarayabileceği anlamına gelir.
Ortak metni iyileştirme
Çözüm, navigator.serviceWorker.register()
hizmetinin ne zaman çağrılacağını seçerek Service Worker'ın başlangıcını kontrol etmektir. Temel bir kural, kaydı window
tarihinde load
event
yangını sonrasına kadar ertelemektir. Ö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ı olabilir. Örneğin, Google I/O 2016 web uygulamasında ana ekrana geçiş yapmadan önce kısa bir animasyon gösterilir. Ekibimiz, animasyon sırasında Service Worker kaydının başlatılmasının düşük teknoloji mobil cihazlarda duraksamaya neden olabileceğini tespit etti. Kullanıcılara kötü bir deneyim sunmak yerine, hizmet çalışanı kaydını animasyonun sonrasına, tarayıcının boşta kalma olasılığının en yüksek olduğu zamana kadar geciktirdik.
Benzer şekilde, web uygulamanız, sayfa yüklendikten sonra ek kurulumlar gerçekleştiren bir çerçeve kullanıyorsa bu iş tamamlandığında sinyal veren, çerçeveye özgü bir etkinlik arayın.
Sonraki ziyaretler
Şimdiye kadar ilk ziyaret deneyimine odaklandık, ancak servis çalışanı kaydının gecikmesinin sitenize yapılan tekrar ziyaretler üzerinde nasıl bir etkisi olur? Bazı insanlar için sürpriz olsa da bunun hiçbir etkisi olmayacaktır.
Kaydedilen hizmet çalışanı install
ve activate
yaşam döngüsü etkinliklerine girer.
Service Worker etkinleştirildikten sonra web uygulamanıza yapılacak sonraki ziyaretlerde fetch
etkinliklerini işleyebilir. Service Worker, kapsamı kapsamındaki sayfalar için istek yapılmadan önce başlar. Bu durum düşünüldüğünde mantıklıdır. Mevcut Service Worker bir sayfayı ziyaret etmeden önce çalışmıyorsa gezinme istekleri için fetch
etkinliklerini yerine getirmez.
Dolayısıyla, etkin bir Service Worker olduğunda navigator.serviceWorker.register()
numaralı telefonu ne zaman aradığınızın veya onu çağırıp çağırmadığınız önemli değildir.
Service Worker komut dosyasının URL'sini değiştirmediğiniz sürece navigator.serviceWorker.register()
sonraki ziyaretlerde işlem yok olur. Böyle denmesi
alakasızdır.
Erken kaydolmak için nedenler
Hizmet çalışanınızı mümkün olduğunca erken kaydettirmenin mantıklı olduğu herhangi bir senaryo var mı? Akla ilk ziyaret sırasında hizmet çalışanınız sayfanın denetimini ele almak için clients.claim()
kullanırken, fetch
işleyicisi içinde agresif bir şekilde çalışma zamanı önbelleğe alma işlemi gerçekleştirdiğinde bu durum gerçekleşir. Bu durumda Service Worker'ı mümkün olduğunca hızlı bir şekilde etkin hale getirerek çalışma zamanı önbelleklerini daha sonra kullanışlı olabilecek kaynaklarla doldurmayı deneyebilirsiniz. Web uygulamanız bu kategoriye giriyorsa Service Worker'ınızın install
işleyicisinin, ana sayfanın istekleriyle bant genişliği için mücadele eden kaynaklar istemediğinden emin olmanız önerilir.
Özellikleri test etme
İlk ziyareti simüle etmenin harika bir yolu, web uygulamanızı bir Chrome gizli penceresinde açmak ve Chrome'un Geliştirici Araçları'nda ağ trafiğine bakmaktır. Bir web geliştiricisi olarak, muhtemelen web uygulamanızın yerel bir örneğini günde onlarca kez yeniden yüklersiniz. Ancak halihazırda bir Service Worker ve tamamen doldurulmuş önbelleklerle sitenizi yeniden ziyaret ettiğinizde, yeni bir kullanıcının yaşayacağı deneyimden yararlanamazsınız ve olası bir sorunu kolayca göz ardı edebilirsiniz.
Kayıt zamanının yaratabileceği farkı gösteren bir örneği aşağıda bulabilirsiniz. Yavaş bir bağlantıyı simüle etmek için, ağ sınırlama kullanılarak Gizli modda bir örnek uygulamayı ziyaret ederken her iki ekran görüntüsü de alınır.
![Erken kayıtla ağ trafiği.](https://web.dev/static/articles/service-workers-registration/image/network-traffic-early-re-63d00e80875ce.png?authuser=5&hl=tr)
Yukarıdaki ekran görüntüsünde, hizmet çalışanı kaydının mümkün olan en kısa sürede gerçekleştirilmesi için örneğin değiştirildiği andaki ağ trafiği gösterilmiştir. Sayfayı görüntülemek için gereken diğer kaynaklara yönelik isteklerle birlikte, önbelleğe alma isteklerinin (yanlarında dişli simgesi bulunan ve Service Worker'ın install
işleyicisinden gelen girişler) görebilirsiniz.
![Geç kayıt içeren ağ trafiği.](https://web.dev/static/articles/service-workers-registration/image/network-traffic-late-reg-17e31ea5d01ab.png?authuser=5&hl=tr)
Yukarıdaki ekran görüntüsünde, Service Worker kaydı sayfa yüklenene kadar ertelendi. Önbelleğe alma isteklerinin, tüm kaynaklar ağdan alınana kadar başlamadığını görebilirsiniz. Bu da bant genişliğiyle ilgili olası çakışmaları ortadan kaldırır. Ayrıca, önbelleğe aldığımız öğelerden bazıları zaten tarayıcının HTTP önbelleğinde olduğundan (Boyut sütununda (from disk cache)
bulunan öğeler) tekrar ağa gitmek zorunda kalmadan Service Worker'ın önbelleğini doldurabiliriz.
Bu tür bir testi gerçek bir mobil ağdaki gerçek, düşük teknolojili bir cihazdan gerçekleştirirseniz bonus puan kazanırsınız. Masaüstü makinenize USB aracılığıyla bir Android telefon bağlamak için Chrome'un uzaktan hata ayıklama özelliklerinden yararlanabilir ve çalıştırdığınız testlerin, birçok kullanıcınızın gerçek dünyadaki deneyimini yansıttığından emin olabilirsiniz.
Sonuç
Özetlemek gerekirse, kullanıcılarınıza en iyi ilk ziyaret deneyimini sunmak birinci öncelik olmalıdır. Hizmet çalışanı kaydını ilk ziyaret sırasında sayfa yüklenene kadar ertelemek bunu yapmanızı sağlayabilir. Tekrarlanan ziyaretleriniz için bir Service Worker'ın tüm avantajlarından yine yararlanırsınız.
Service Worker'ınızın ilk kaydını ilk sayfa yüklenene kadar ertelemenin kolay bir yolu aşağıdakileri kullanmaktır:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}