Hizmet çalışanı kullanarak, ağda beklemeden gezinme isteklerine yanıt verin.
Gezinme istekleri, gezinme çubuğuna yeni bir URL girdiğinizde veya sizi yeni bir URL'ye götüren bir sayfadaki bağlantıyı izlediğinizde tarayıcınız tarafından yapılan HTML dokümanları için yapılan isteklerdir. Bu noktada hizmet çalışanları, performans üzerindeki en büyük etkiyi yaratır: Ağı beklemeden gezinme isteklerine yanıt vermek için bir Service Worker kullanıyorsanız gezinmelerin güvenilir şekilde hızlı olmasını ve ağ kullanılamadığında dirençli olmasını sağlayabilirsiniz. Bu, HTTP önbelleğe alma ile hizmet çalışanlarından elde edilen en büyük performans artışıdır.
Ağdan yüklenen kaynakları tanımlama kılavuzunda ayrıntılı olarak açıklandığı gibi gezinme isteği, ağ trafiğinin "şelale" sırasında yapılan potansiyel birçok isteğin 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.
Service Worker'ın fetch etkinlik işleyicisinin içinde, FetchEvent üzerindeki request.mode özelliğini kontrol ederek isteğin gezinme olup olmadığını belirleyebilirsiniz. 'navigate' olarak ayarlanırsa
bu bir gezinme isteğidir.
Genel kural olarak, bir gezinme isteğine ilişkin HTML yanıtını önbelleğe almak için uzun ömürlü Cache-Control headers kullanmayın. HTML'nin ve sonraki ağ istekleri zincirinin (makul şekilde) yeni olduğundan emin olmak için normalde Cache-Control: no-cache ile ağ üzerinden memnun edilmesi gerekir. Kullanıcı yeni bir sayfaya her gittiğinde ağa bağlanmak maalesef her gezinmenin yavaş olabileceği anlamına gelir. En azından, sitenin güvenilir şekilde hızlı olmayacağı anlamına gelir.
Mimarilere yönelik 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 ziyaret edebileceği benzersiz URL 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ı olabilir.
Küçük statik siteler
Web uygulamanız nispeten az sayıda (örneğin, 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, önbelleğe alınmış uygun HTML ile yanıt vermektir.
Önbelleğe alma yöntemini kullanarak Service Worker yüklenir yüklenmez HTML'yi önceden önbelleğe alabilir ve sitenizi her yeniden derleyip hizmet çalışanınızı yeniden dağıttığınızda önbelleğe alınan HTML'yi güncelleyebilirsiniz.
Alternatif olarak, kullanıcıların sitenizdeki URL'lerin yalnızca bir alt kümesine gitme eğiliminde olması nedeniyle HTML'nizin tamamını önbelleğe almaktan kaçınmak istiyorsanız stale-while-reCONFIRM çalışma zamanı önbelleğe alma stratejisini kullanabilirsiniz. Ancak, her bir HTML dokümanı önbelleğe alındığından ve ayrı ayrı güncellendiğinden bu yaklaşıma dikkat edin. HTML için çalışma zamanı önbelleğe alma özelliğini kullanmak, aynı kullanıcı grubu tarafından sık sık ziyaret edilen az sayıda URL'niz varsa ve bu URL'lerin birbirinden bağımsız olarak yeniden doğrulanması sizin için rahatsa en uygun seçenektir.
Tek sayfalık uygulamalar
Tek sayfalık mimari, modern web uygulamaları tarafından sıklıkla kullanılır. Bu örnekte, istemci taraflı 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 sayede, etkin bir şekilde "simüle edilmiş" bir gezinme deneyimi sunulur. Sonraki gezinmeler "sahte" olabilir, ancak ilk gezinme gerçektir ve ağda engellenmediğinden emin olmak yine de önemlidir.
Neyse ki, tek sayfalı mimari kullanıyorsanız önbellekten ilk gezinmeyi sunmak için izlemeniz gereken basit bir kalıp vardır: uygulama kabuğu. Bu modelde Service Worker'ınız, istenen URL'ye bakılmaksızın önceden önbelleğe alınmış 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şmalı ve sade olmalıdır. Tarayıcı bu HTML'yi önbellekten yükledikten sonra, mevcut istemci taraflı JavaScript'iniz kontrolü ele alır ve orijinal gezinme isteğindeki URL için doğru HTML içeriğini oluşturur.
Çalışma kutusu, bu yaklaşımı uygulamak için ihtiyaç duyduğunuz araçları sağlar. navigateFallback
option, uygulama kabuğunuz olarak hangi HTML dokümanının 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 ver ve red listesi ekleyebilirsiniz.
Çok sayfalı uygulamalar
Web sunucunuz sitenizin HTML'sini dinamik olarak oluşturuyorsa veya birkaç düzineden fazla benzersiz sayfanız varsa gezinme istekleri işlenirken ağdan kaçınmak çok daha zor olur. Diğer her şey bölümündeki tavsiye muhtemelen sizin için de 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ığı tamamen çoğaltan bir hizmet çalışanı uygulayabilirsiniz. Bu, yönlendirme ve şablon oluşturma bilgilerini sunucu ve hizmet çalışanı ortamları arasında paylaşabiliyorsanız ve özellikle web sunucunuz JavaScript kullanıyorsa (dosya sistemi erişimi gibi Node.js'ye özgü özelliklere dayanmadan) en iyi sonucu verir.
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şlıklı makalede yer alan kılavuzdan yararlanabilirsiniz.
Diğer her şey
Önbelleğe alınan 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ı için gerekli adımları atmanız gerekir. Hizmet çalışanının gezinme isteğine yanıt vermek için kullanılmadan başlatılması az miktarda gecikmeye neden olur (Hizmet Çalışanıyla Daha Hızlı ve Daha Dayanıklı Uygulamalar Derleme bölümünde açıklandığı gibi). Önceden gezinme adlı özelliği etkinleştirip fetch etkinlik işleyicinize önceden yüklenen ağ yanıtını kullanarak bu ek yükü azaltabilirsiniz.
Çalışma kutusu, gezinme önceden yüklenmesinin desteklenip desteklenmediğini algılayan yardımcı bir kitaplık sağlar ve bu durumda, hizmet çalışanınıza ağ yanıtını kullanmasını söyleme sürecini basitleştirir.
Fotoğraf: Aaron Burden, Unsplash'te