Service Worker kullanarak gezinme isteklerine ağda beklemeden yanıt verin.
Gezinme istekleri, gezinme çubuğuna yeni bir URL girdiğinizde veya bir sayfada sizi yeni bir URL'ye götüren bir bağlantıyı izlediğinizde, tarayıcınız tarafından yapılan HTML dokümanları için yapılan isteklerdir. Hizmet çalışanlarının performans üzerinde en büyük etkiyi yarattığı nokta budur: Ağı beklemeden gezinme isteklerine yanıt vermek için bir Service Worker kullanırsanız ağ kullanılamadığında dirençli olmanın yanı sıra gezinmelerin de güvenilir bir şekilde hızlı olmasını sağlayabilirsiniz. Bu, HTTP önbelleğe alma ile elde edilene kıyasla, hizmet çalışanının sağladığı tek en büyük performans kazancıdır.
Ağdan yüklenen kaynakları belirleme kılavuzunda ayrıntılı olarak açıklandığı gibi, gezinme isteği ağ trafiğinin "şelalesinde" yapılan çok sayıda istekten ilkidir. Gezinme isteği aracılığıyla yüklediğiniz HTML; resimler, komut dosyaları ve stiller gibi alt kaynaklara yönelik diğer tüm isteklerin akışını başlatır.
Bir Service Worker'ın fetch etkinlik işleyicisinde, FetchEvent üzerinde request.mode özelliğini kontrol ederek isteğin gezinme olup olmadığını belirleyebilirsiniz. 'navigate' olarak ayarlanırsa
bu bir gezinme isteğidir.
Genel bir kural olarak, gezinme isteği için HTML yanıtını önbelleğe almak amacıyla uzun ömürlü Cache-Control headers kullanmayın. Bunlar, HTML'nin sonraki ağ istekleri zinciriyle birlikte (makul düzeyde) yeni olduğundan emin olmak için normalde ağ üzerinden Cache-Control: no-cache ile karşılanmalıdır. Kullanıcı yeni bir sayfaya her gittiğinde ağa karşı dönmek maalesef her gezinmenin yavaş olabileceği anlamına gelir. En azından, güvenilir şekilde hızlı olmayacağı anlamına gelir.
Mimarilere yönelik farklı yaklaşımlar
Navigasyon isteklerine ağdan kaçınırken nasıl yanıt vereceğinizi anlamak 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.
Herkese 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 (ö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 uygun 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 alma yöntemini kullanarak, hizmet çalışanı yüklenir yüklenmez HTML'yi önceden önbelleğe alabilir ve sitenizi yeniden oluşturup hizmet çalışanınızı yeniden dağıttığınızda önbelleğe alınan HTML'yi güncelleyebilirsiniz.
Alternatif olarak, HTML'nizin tamamının önbelleğe alınmasını önlemek istiyorsanız (kullanıcıların sitenizdeki URL'lerin yalnızca bir alt kümesine gitme eğiliminde olmasından dolayı) çalışma zamanı önbelleğe alma stratejisini, eski-üzerinde-yeniden-doğrula şeklinde bir strateji kullanabilirsiniz. Ancak, her bir HTML belgesi önbelleğe alındığından ve ayrı ayrı güncellendiğinden bu yaklaşımda dikkatli olun. 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ıyla ilgili rahatsanız HTML için çalışma zamanı önbelleğe alma özelliğini kullanmak en uygun yöntemdir.
Tek sayfalık uygulamalar
Tek sayfalık mimari, modern web uygulamaları tarafından sıkça kullanılır. Bu örnekte 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'sini kullanır. Bu da, "simüle edilmiş" bir gezinmeye dönüşür. Sonraki gezinmeler "sahte" olsa da ilk gezinme gerçektir ve yine de ağda engellenmediğinden emin olmak önemlidir.
Neyse ki, tek sayfalık mimariyi kullanıyorsanız önbellekten ilk gezinmeyi sunmak için izlenmesi gereken 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ı 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ğinden oluşan basit bir HTML olmalıdır. Tarayıcı bu HTML'yi önbellekten yükledikten sonra, mevcut istemci tarafı JavaScript'iniz devralır ve orijinal gezinme isteğindeki URL için doğru HTML içeriğini oluşturur.
Workbox, bu yaklaşımı uygulamanız için gereken araçları sağlar. navigateFallback
option, bu davranışı URL'lerinizin bir alt kümesiyle sınırlamak için isteğe bağlı bir izin ve ret listesi ile birlikte, uygulama kabuğunuz olarak kullanılacak HTML belgesini belirtmenize olanak tanır.
Çok sayfalı uygulamalar
Web sunucunuz sitenizin HTML'sini dinamik bir şekilde oluşturuyorsa veya birkaç düzineden fazla benzersiz sayfanız varsa, gezinme isteklerini yerine getirirken ağdan kaçınmak çok daha zordur. Diğer her şey bölümündeki tavsiye muhtemelen sizin için geçerlidir.
Ancak çok sayfalı uygulamaların belirli bir alt kümesi için HTML oluşturmak amacıyla web sunucunuzda kullanılan mantığı tam olarak kopyalayan bir Service Worker uygulayabilirsiniz. Bu yöntem, yönlendirme ve şablon oluşturma bilgilerini sunucu ile hizmet çalışanı ortamları arasında paylaşabiliyorsanız ve özellikle de web sunucunuz JavaScript kullanıyorsa (dosya sistemi erişimi gibi Node.js'ye özgü özelliklere dayanmadan) en iyi şekilde çalışır.
Web sunucunuz bu kategoriye giriyorsa ve HTML oluşturma işlemini ağdan hizmet çalışanınıza taşımaya yönelik bir yaklaşımı keşfetmek isterseniz SPA'ların Ötesinde: PWA'nız için alternatif mimariler bölümündeki kılavuzdan yararlanabilirsiniz.
Diğer her şey
Önbelleğe alınmış HTML ile gezinme isteklerine yanıt veremiyorsanız sitenize bir hizmet çalışanı eklemenin (HTML olmayan diğer istekleri işlemek için) gezinmelerinizi yavaşlatmamasını sağlayacak adımları atmanız gerekir. Service Worker'ı bir gezinme isteğine yanıt vermek için kullanmadan başlatmak, bir miktar gecikmeye neden olur (Service Worker ile Daha Hızlı ve Daha Dayanıklı Uygulamalar Derleme bölümünde açıklandığı gibi). Gezinme ön yüklemesi adlı bir özelliği etkinleştirerek ve ardından fetch etkinlik işleyicinizde önceden yüklenmiş ağ yanıtını kullanarak bu ek yükü azaltabilirsiniz.
Workbox, gezinme önceden yüklemenin desteklenip desteklenmediğini algılayan ve desteklenen bir özellik olduğunda, hizmet çalışanınıza ağ yanıtını kullanacağını söyleme sürecini basitleştiren bir yardımcı kitaplık sağlar.
Fotoğrafçı: Aaron Burden on Unsplash