Bir hizmet çalışanı kullanarak ağı beklemeden gezinme isteklerine yanıt verme.
Gezinme istekleri, gezinme çubuğuna yeni bir URL girdiğinizde veya bir sayfadaki bağlantıyı tıklayarak yeni bir URL'ye gittiğinizde tarayıcınız tarafından yapılan HTML belgesi istekleridir. Hizmet çalışanlarının performans üzerindeki en büyük etkisi burada görülür: Gezinme isteklerine ağdan yanıt beklemeden yanıt vermek için bir hizmet çalışanı kullanırsanız gezinmelerin güvenilir bir şekilde hızlı olmasını ve ağ kullanılamadığında esnek olmasını sağlayabilirsiniz. Bu, HTTP önbelleğe alma ile mümkün olanlara kıyasla bir hizmet çalışanından elde edilen en büyük performans kazancıdır.
Ağdan yüklenen kaynakları tanımlama kılavuzunda ayrıntılı olarak açıklandığı gibi, gezinme isteği, ağ trafiğinin "şelalesinde" yapılan potansiyel olarak birçok isteğin ilkidir. Gezinme isteği aracılığıyla yüklediğiniz HTML, resimler, komut dosyaları ve stiller gibi alt kaynaklar için diğer tüm isteklerin akışını başlatır.
Bir hizmet çalışanının fetch etkinlik işleyicisinde, FetchEvent üzerindeki request.mode özelliğini kontrol ederek bir isteğin gezinme olup olmadığını belirleyebilirsiniz. 'navigate' olarak ayarlanmışsa
gezinme isteğidir.
Genel bir kural olarak, bir gezinme isteğinin HTML yanıtını önbelleğe almak için uzun süreli Cache-Control headers kullanmayın. HTML'nin ve sonraki ağ istekleri zincirinin (makul ölçüde) güncel olmasını sağlamak için normalde ağ üzerinden Cache-Control: no-cache ile karşılanmaları gerekir. Kullanıcı her yeni sayfaya gittiğinde ağa erişmek, maalesef her gezinmenin yavaş olabileceği anlamına gelir. En azından, güvenilir bir şekilde hızlı olmayacağı anlamına gelir.
Mimariler için farklı yaklaşımlar
Ağdan kaçınırken gezinme isteklerine nasıl yanıt verileceğini bulmak 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 uygun tek bir çözüm olmasa da aşağıdaki genel yönergeler, en uygun yaklaşımın hangisi olduğuna karar vermenize yardımcı olacaktır.
Küçük statik siteler
Web uygulamanız nispeten az sayıda (ör. birkaç düzine) benzersiz URL'den oluşuyorsa ve bu URL'lerin her biri farklı bir statik HTML dosyasına karşılık geliyorsa uygulanabilir 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.
Ön önbelleğe alma özelliğini kullanarak HTML'yi hizmet çalışanı yüklenir yüklenmez önceden önbelleğe alabilir ve sitenizi yeniden oluşturup hizmet çalışanınızı yeniden dağıttığınızda önbelleğe alınmış HTML'yi güncelleyebilirsiniz.
Alternatif olarak, kullanıcılar sitenizdeki URL'lerin yalnızca bir alt kümesine gitme eğiliminde olduğu için HTML'nizin tamamını önbelleğe almaktan kaçınmak istiyorsanız stale-while-revalidate çalışma zamanı önbelleğe alma stratejisini kullanabilirsiniz. Ancak her bir HTML belgesi ayrı ayrı önbelleğe alınıp güncellendiğinden bu yaklaşımı kullanırken dikkatli olun. HTML için çalışma zamanı önbelleğe alma özelliğini kullanmak, aynı kullanıcı grubu tarafından sık sık yeniden ziyaret edilen az sayıda URL'niz varsa ve bu URL'lerin birbirinden bağımsız olarak yeniden doğrulanması konusunda rahatsanız en uygun seçenektir.
Tek sayfalı uygulamalar
Tek sayfalık mimari, modern web uygulamaları tarafından sıklıkla kullanılır. Bu modelde, istemci tarafı JavaScript, kullanıcı işlemlerine yanıt olarak HTML'yi değiştirir. Bu model, kullanıcı web uygulamasıyla etkileşimde bulunurken mevcut URL'yi değiştirmek için History API'yi kullanır. Bu da etkili bir "simüle edilmiş" gezinme sağlar. Sonraki gezinmeler "sahte" olsa da ilk gezinme gerçektir ve ağda engellenmediğinden emin olmak önemlidir.
Neyse ki tek sayfa mimarisini kullanıyorsanız ilk gezinmeyi önbellekten sunmak için izleyebileceğiniz basit bir kalıp vardır: uygulama kabuğu. Bu modelde, hizmet çalışanınız, istenen 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, genel bir yükleme göstergesi veya iskelet içerikten oluşan basit bir yapıya sahip olmalıdır. Tarayıcı bu HTML'yi önbellekten yükledikten sonra mevcut istemci tarafı JavaScript'iniz devreye girer ve orijinal gezinme isteğinden URL için doğru HTML içeriğini oluşturur.
Workbox, bu yaklaşımı uygulamak için ihtiyacınız olan araçları sağlar. navigateFallback
option, uygulama kabuğunuz olarak hangi HTML belgesinin kullanılacağını belirtmenize olanak tanır. Ayrıca, bu davranışı URL'lerinizin bir alt kümesiyle sınırlamak için isteğe bağlı bir izin verilenler ve engellenenler listesi de sunar.
Ç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. Diğer her şey bölümündeki tavsiyeler muhtemelen sizin için geçerli olacaktır.
Ancak çok sayfalı uygulamaların belirli bir alt kümesi için, web sunucunuzda HTML oluşturmak amacıyla kullanılan mantığı tamamen kopyalayan bir hizmet çalışanı uygulayabilirsiniz. Bu yöntem, 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 (dosya sistemi erişimi gibi Node.js'ye özgü özelliklere bağlı kalmadan) en iyi sonucu verir.
Web sunucunuz bu kategoriye giriyorsa ve HTML oluşturma işlemini ağdan hizmet çalışanınıza taşıma yaklaşımını keşfetmek istiyorsanız SPA'ların ötesinde: PWA'nız için alternatif mimariler başlıklı makaledeki yönergeler size 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) gezinme işlemlerinizi yavaşlatmadığından emin olmak için gerekli adımları atmanız gerekir. Hizmet çalışanını bir gezinme isteğine yanıt vermek için kullanmadan başlatmak, az miktarda gecikmeye neden olur (Hizmet Çalışanı ile Daha Hızlı ve Daha Dayanıklı Uygulamalar Oluşturma bölümünde açıklandığı gibi). Gezinme önceden yükleme adlı bir özelliği etkinleştirip fetch etkinlik işleyicinizde önceden yüklenen ağ yanıtını kullanarak bu ek yükü azaltabilirsiniz.
Workbox, gezinme önceden yükleme özelliğinin desteklenip desteklenmediğini algılayan ve destekleniyorsa hizmet çalışanınıza ağ yanıtını kullanmasını söyleme sürecini basitleştiren yardımcı bir kitaplık sağlar.