Gezinme istekleri, gezinme çubuğuna yeni bir URL girdiğinizde veya bir sayfadaki sizi yeni bir URL’ye götüren bir bağlantıyı takip ettiğinizde tarayıcınız tarafından HTML belgeleri için yapılan isteklerdir. Hizmet çalışanlarının performans üzerinde en büyük etkiyi yaptıkları yer burasıdır: Gezinme isteklerine ağı beklemeden yanıt vermek için bir hizmet çalışanı kullanırsanız, ağ kullanılamadığında esnek olmanın yanı sıra gezinmelerin güvenilir bir şekilde hızlı olmasını sağlayabilirsiniz. Bu, HTTP önbelleğe alma ile mümkün olana kıyasla bir hizmet çalışanından elde edilen en büyük performans kazancıdır.
Ağdan yüklenen kaynakları tanımla kılavuzunda ayrıntılı olarak açıklandığı gibi, bir gezinme isteği, ağda yapılan potansiyel olarak birçok istekten ilkidir. “şelale” ağ trafiğinin Gezinme isteği aracılığıyla yüklediğiniz HTML, resimler, komut dosyaları ve stiller gibi diğer tüm alt kaynaklar isteklerinin akışını başlatır.
Bir servis çalışanının içi fetch olay işleyicisini kontrol ederek bir isteğin gezinme olup olmadığını belirleyebilirsiniz. request.mode üzerindeki mülk FetchEvent. olarak ayarlanmışsa 'navigate'o zaman bu bir gezinme isteğidir.
Genel bir kural olarak, uzun ömürlü kullanmayın. Cache-Control headers bir gezinme isteği için HTML yanıtını önbelleğe almak için. Normalde ağ aracılığıyla tatmin edilmeleri gerekir. Cache-Control: no-cache, sonraki ağ istekleri zinciriyle birlikte HTML’nin (makul ölçüde) yeni olmasını sağlamak için. Kullanıcı her yeni sayfaya gittiğinde ağa karşı gitmek ne yazık ki her gezinmenin belki yavaş ol. Olmayacak demek en azından güvenilir hızlı.
Mimariler için farklı yaklaşımlar #
Anlamak Nasıl ağdan kaçınırken navigasyon isteklerine yanıt vermek zor olabilir. Doğru yaklaşım, büyük ölçüde web sitenizin mimarisine ve kullanıcıların gidebileceği benzersiz URL’lerin sayısına bağlıdır.
Her duruma uyan tek bir çözüm olmasa da, aşağıdaki genel yönergeler hangi yaklaşımın en uygun olduğuna karar vermenize yardımcı olacaktır.
Küçük statik siteler #
Web uygulamanız nispeten az sayıda benzersiz URL’den oluşuyorsa (birkaç düzine düşünün) ve bu URL’lerin her biri farklı bir statik HTML dosyasına karşılık geliyorsa, geçerli bir yaklaşım tüm bu HTML dosyalarını önbelleğe almak ve gezinme isteklerine uygun önbelleğe alınmış HTML ile yanıt vermektir.
Önbelleğe almayı kullanarak, hizmet çalışanı kurulur kurulmaz HTML’yi önceden önbelleğe alabilir ve sitenizi her yeniden oluşturduğunuzda ve hizmet çalışanınızı yeniden konuşlandırdığınızda önbelleğe alınmış HTML’yi güncelleyebilirsiniz.
Alternatif olarak, HTML’nizin tamamını önceden önbelleğe almaktan kaçınmak istiyorsanız (belki de kullanıcılar sitenizdeki URL’lerin yalnızca bir alt kümesine gitme eğiliminde olduğundan), yeniden doğrulanırken eski bir çalışma zamanı önbelleğe alma stratejisi kullanabilirsiniz. Ancak bu yaklaşıma dikkat edin, çünkü her bir HTML belgesi ayrı olarak önbelleğe alınır ve güncellenir. Yeniden ziyaret edilen az sayıda URL’niz varsa, HTML için çalışma zamanı önbelleğini kullanmak en uygunudur. sıklıkla aynı kullanıcı grubu tarafından ve bu URL’lerin birbirinden bağımsız olarak yeniden doğrulanması konusunda kendinizi rahat hissediyorsanız.
Tek sayfalı uygulamalar #
Tek sayfa mimarisi, modern web uygulamaları tarafından sıklıkla kullanılır. İçinde, istemci tarafı JavaScript, kullanıcı eylemlerine yanıt olarak HTML’yi değiştirir. Bu model, Geçmiş API’sı kullanıcı web uygulamasıyla etkileşimde bulunurken geçerli URL’yi değiştirmek için etkili bir şekilde “simüle edilmiş” bir navigasyona yol açar. Sonraki gezinmeler “sahte” olsa da, ilk gezinme gerçektir ve ağda engellenmediğinden emin olmak yine de önemlidir.
Neyse ki, tek sayfa mimarisini kullanıyorsanız, önbellekten ilk gezinmeyi sunmak için izlemeniz gereken basit bir model vardır: uygulama kabuğu. Bu modelde, hizmet çalışanınız, talep edilen URL’den bağımsız olarak önceden önbelleğe alınmış aynı, tek HTML dosyasını döndürerek gezinme isteklerine yanıt verir. Bu HTML, belki de genel bir yükleme göstergesi veya iskelet içeriği. Tarayıcı bu HTML’yi önbellekten yükledikten sonra, mevcut istemci tarafı JavaScript’iniz devralır ve orijinal gezinme isteğinden URL için doğru HTML içeriğini oluşturur.
Workbox, bu yaklaşımı uygulamak için ihtiyaç duyduğunuz araçları sağlar; the navigateFallback option bu davranışı URL’lerinizin bir alt kümesiyle sınırlamak için isteğe bağlı bir izin verme ve reddetme listesinin yanı sıra, uygulama kabuğunuz olarak hangi HTML belgesinin kullanılacağını belirtmenize olanak tanır.
Çok sayfalı uygulamalar #
Web sunucunuz sitenizin HTML’sini dinamik olarak oluşturuyorsa veya birkaç düzineden fazla benzersiz sayfanız varsa, gezinme isteklerini işlerken ağdan kaçınmak çok daha zordur. tavsiye Diğer her Şey muhtemelen sizin için geçerli olacaktır.
Ancak çok sayfalı uygulamaların belirli bir alt kümesi için, HTML oluşturmak üzere web sunucunuzda kullanılan mantığı tam olarak kopyalayan bir hizmet çalışanı uygulayabilirsiniz. Bu, sunucu ve hizmet çalışanı ortamları arasında yönlendirme ve şablon oluşturma bilgilerini paylaşabiliyorsanız ve özellikle web sunucunuz JavaScript kullanıyorsa (güvenmeden) en iyi sonucu verir. Node.jsdosya sistemi erişimi gibi belirli özellikler).
Web sunucunuz bu kategoriye giriyorsa ve HTML oluşturmayı ağdan hizmet çalışanınıza taşımak için bir yaklaşımı keşfetmek istiyorsanız, SPA’ların Ötesinde: PWA’nız için alternatif mimariler başlamanıza yardımcı olabilir.
Diğer her Şey #
Gezinme isteklerine önbelleğe alınmış HTML ile yanıt veremiyorsanız, sitenize bir hizmet çalışanı eklemenin (HTML olmayan diğer istekleri işlemek için) gezinmelerinizi yavaşlatmayacağından emin olmak için adımlar atmanız gerekir. Servis çalışanını bir navigasyon talebine yanıt vermek için kullanmadan başlatmak, az miktarda gecikmeye neden olur (aşağıda açıklandığı gibi). Service Worker ile Daha Hızlı, Daha Dayanıklı Uygulamalar Oluşturma). adlı bir özelliği etkinleştirerek bu ek yükü azaltabilirsiniz. navigasyon önyüklemesive daha sonra ağ yanıtını kullanma bu senin içine önceden yüklenmiş fetch olay işleyicisi.
çalışma kutusu yardımcı bir kitaplık sağlar bu özellik, navigasyon önyüklemesinin desteklenip desteklenmediğini algılar ve destekleniyorsa, servis çalışanınıza ağ yanıtını kullanmasını söyleme sürecini basitleştirir.
fotoğrafı çeken Harun Yükü Açık Unsplash,