Bir 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 yönlendiren bir sayfadaki bağlantıyı takip ettiğinizde tarayıcınız tarafından yapılan HTML dokümanı isteklerinden oluşur. Hizmet çalışanlarının performans üzerinde en büyük etkisini burada gösterir: Ağ bağlantısını beklemeden gezinme isteklerine yanıt vermek için bir hizmet çalışanı kullanırsanız gezinme işlemlerinin hem güvenilir bir şekilde hızlı olmasını hem de ağ bağlantısı olmadığında esnek olmasını sağlayabilirsiniz. Bu, HTTP önbelleğe alma ile mümkün olana kıyasla hizmet çalışanlarının sağladığı en büyük performans kazancıdır.
Ağlantı üzerinden yüklenen kaynakları tanımlama kılavuzunda ayrıntılı olarak açıklandığı gibi, gezinme isteği, ağ trafiğinin "şelalesi" sırasında yapılan birçok istekten ilkidir. Bir 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 mülkünü kontrol ederek bir isteğin gezinme olup olmadığını belirleyebilirsiniz. 'navigate' olarak ayarlanmışsa gezinme isteğidir.
Genel kural olarak, gezinme isteği için HTML yanıtını önbelleğe almak üzere uzun ömürlü Cache-Control headers kullanmayın. Bunlar normalde, HTML'nin ve sonraki ağ istekleri zincirinin (makul ölçüde) güncel olmasını sağlamak için Cache-Control: no-cache ile ağ üzerinden karşılanmalıdır. Kullanıcı her yeni sayfaya gittiğinde ağa karşı hareket etmek 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 vereceğinizi belirlemek zor olabilir. Doğru yaklaşım, web sitenizin mimarisine ve kullanıcıların gidebileceği benzersiz URL'lerin sayısına büyük ölçüde bağlıdır.
Her duruma uygun tek bir çözüm olmasa da aşağıdaki genel yönergeler, en uygun yaklaşımı belirlemenize yardımcı olacaktır.
Küçük statik siteler
Web uygulamanız nispeten az sayıda (yaklaşık birkaç düzine) benzersiz URL'den oluşuyorsa ve bu URL'lerin her biri farklı bir statik HTML dosyasına karşılık geliyorsa tüm bu HTML dosyalarını önbelleğe almak ve gezinme isteklerine uygun önbelleğe alınmış HTML ile yanıt vermek uygun bir yaklaşım olabilir.
Ön önbelleğe alma özelliğini kullanarak, hizmet çalışanı yüklendikten hemen sonra HTML'yi önceden önbelleğe alabilir ve sitenizi her yeniden oluşturduğunuzda ve hizmet çalışanınızı yeniden dağıttığınızda önbelleğe alınmış HTML'yi güncelleyebilirsiniz.
Alternatif olarak, HTML'nizin tamamını önbelleğe almaktan kaçınmak istiyorsanız (ör. kullanıcılar sitenizdeki URL'lerin yalnızca bir alt kümesine gitme eğilimindeyse) yeniden doğrulama sırasında eski çalışma zamanında önbelleğe alma stratejisi kullanabilirsiniz. Ancak her HTML dokümanı ayrı olarak önbelleğe alınıp güncellendiğinden bu yaklaşım konusunda dikkatli olun. HTML için çalışma zamanında ö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ından endişe duymuyorsanız en uygun seçenektir.
Tek sayfalık 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şime geçerken mevcut URL'yi değiştirmek için Geçmiş API'sini kullanır. Bu da etkili bir şekilde "taklit edilmiş" bir gezinmeye yol açar. Sonraki gezinmeler "sahte" olsa da ilk gezinme gerçektir ve ağın engellemediğinden emin olmak yine de önemlidir.
Neyse ki tek sayfalı mimariyi kullanıyorsanız ilk gezinmeyi önbellekten sunmak için uygulanması kolay bir kalıp vardır: uygulama kabuğu. Bu modelde hizmet işleyiciniz, istenen URL'den bağımsız olarak önceden önbelleğe alınmış tek bir HTML dosyasını döndürerek gezinme isteklerine yanıt verir. Bu HTML, genel bir yükleme göstergesinden veya iskelet içerikten oluşacak şekilde temel düzeyde olmalıdır. Tarayıcı bu HTML'yi önbellekten yükledikten sonra, mevcut istemci tarafı JavaScript'iniz devreye girer ve orijinal gezinme isteğinde 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. 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 reddedilenler listesi de sağlar.
Ç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ğı kullanmaktan kaçınmak çok daha zordur. Diğer bölümündeki öneriler muhtemelen sizin için de geçerlidir.
Ancak çok sayfalı uygulamaların belirli bir alt kümesi için, HTML oluşturmak amacıyla web sunucunuzda kullanılan mantığı tamamen kopyalayan bir hizmet çalışanı uygulayabilirsiniz. Bu yöntem, yönlendirme ve şablonlama bilgilerini sunucu ile 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 ihtiyaç duymadan) en iyi şekilde çalışır.
Web sunucunuz bu kategoriye giriyorsa ve HTML oluşturma işlemini ağdan servis ç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 verilen yönergeleri inceleyebilirsiniz.
Diğer her şey
Gezinme isteklerine önbelleğe alınmış HTML ile yanıt veremiyorsanız sitenize bir hizmet çalışanı eklemenin (HTML dışındaki diğer istekleri işlemek için) gezinme işlemlerinizi yavaşlatmaması için gerekli adımları atmanız gerekir. Hizmet çalışanını bir gezinme isteğine yanıt vermek için kullanmadan başlatmak, küçük bir gecikme süresine neden olur (Hizmet Çalışanı ile Daha Hızlı ve Daha Dayanıklı Uygulamalar Oluşturma başlıklı makalede açıklandığı gibi). Gezinme önyüklemesi adlı bir özelliği etkinleştirip fetch etkinlik işleyicinizin içine önceden yüklenmiş ağ yanıtını kullanarak bu yükü azaltabilirsiniz.
Workbox, gezinme önyüklemesinin desteklenip desteklenmediğini özellik algılayan ve destekleniyorsa hizmet çalışanınıza ağ yanıtını kullanmasını söyleme işlemini basitleştiren bir yardımcı kitaplık sağlar.
Unsplash'ta Aaron Burden tarafından çekilen fotoğraf