Bu dokümanlarda önceden önbelleğe alma işinden bahsediliyordu, ancak bunun doğru şekilde yapılması konusunda yeterli bilgi sağlanmamaktadır. Bu önemlidir çünkü Workbox'ı kullansanız da kullanmasanız da çok fazla miktarda önbelleğe almak ve veri ve bant genişliği israfına yol açmak kolaydır. Önbelleğe alma yükünün kullanıcı deneyimini nasıl etkilediğine dikkat etmelisiniz.
Bu belgeyi okurken bunların genel yönergeler olduğunu unutmayın. Uygulama mimariniz ve gereksinimleriniz, işlemleri burada önerilenden farklı şekilde yapmanızı gerektirebilir ancak bu yönergeler, önerilen varsayılan öğelerdir.
Yapılması gereken: Önemli statik öğeleri önceden önbelleğe alın
Önbelleğe alma için en iyi adaylar kritik statik öğelerdir, ancak hangileri "kritik" öğe olarak sayılır? Geliştirici açısından, bir uygulamanın tamamını "kritik" olarak değerlendirmek cazip görünse de en önemli nokta, kullanıcının bakış açısıdır. Kritik öğeleri, kullanıcı deneyimi sağlamak için kesinlikle gerekli olan öğeler olarak düşünün:
- Genel stil sayfaları kullanılabilir.
- Global işlevler sağlayan JavaScript dosyaları.
- Mimariniz için geçerliyse uygulama kabuğu HTML'si.
Hatırlatma: Bunlar katı öneriler değil, genel yönergelerdir. Öğeleri önbelleğe alırken daha fazla değil, daha az önbelleğe almak en iyisidir.
Yapılması gereken: Çok sayfalı web siteleri için çevrimdışı yedeği önceden önbelleğe alın
Tipik çok sayfalı web sitelerinde, gezinme isteklerini ele almak için ağ öncelikli veya yalnızca ağ önbelleğe alma stratejisini kullanıyor olabilirsiniz.
Bu tür durumlarda, kullanıcı çevrimdışıyken gezinme isteğinde bulunduğunda hizmet çalışanınızın çevrimdışı bir yedek sayfayı önbelleğe aldığından ve bu sayfayla yanıt verdiğinden emin olmanız gerekir. Bunu Çalışma Kutusu'nda yapmanın bir yolu, çevrimdışı yedek içeren yalnızca ağ stratejisi kullanmak ve gezinme önceden yüklemesinden yararlanmak olabilir:
import {PrecacheFallbackPlugin, precacheAndRoute} from 'workbox-precaching';
import {registerRoute, Route} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';
import * as navigationPreload from 'workbox-navigation-preload';
navigationPreload.enable();
// Ensure that /offline.html is part of your precache manifest!
precacheAndRoute(self.__WB_MANIFEST);
// The network-only callback should match navigation requests, and
// the handler for the route should use the network-only strategy, but
// fall back to a precached offline page in case the user is offline.
const networkOnlyNavigationRoute = new Route(({request}) => {
return request.mode === 'navigate';
}, new NetworkOnly({
plugins: [
new PrecacheFallbackPlugin({
fallbackURL: '/offline.html'
})
]
}));
registerRoute(networkOnlyNavigationRoute);
Bu, bir kullanıcı çevrimdışı olup önbelleğinde olmayan bir sayfaya giderse en azından bir miktar çevrimdışı içerik almasını sağlar.
Belki önerin: Varsayımsal önbelleğe almayı düşünün
Bu büyük bir "belki"dir, ancak yalnızca belirli senaryolarda kullanılan öğeleri önbelleğe almanın olası bir faydası vardır. Şöyle düşünün: Kullanıcılar ekstra ön veri indirme işlemleri üstlenirler ve bu varlıklar için gelecekteki istekleri hızlandırmada spekülatif bir fayda elde ederler.
Şimdi önemli bir noktayı belirtelim: Bunu yapmaya karar verirseniz çok dikkatli olun. Bunu yaparken verileri kolayca israf etmek kolaydır ve bu karar veriye dayalı olmalıdır. Önbelleğe alma kodu yeni bir düzeltme algıladığında kullanıcı ek veri kullanacağı için, sık değişen öğeleri kurgusal olarak önbelleğe almaktan kaçının. Kullanıcıların genellikle nereye gitme eğiliminde olduğunu görmek için analizlerinizdeki kullanıcı akışlarını gözlemleyin. Öğelerin spekülatif olarak önbelleğe alınmasıyla ilgili şüpheleriniz varsa bu, muhtemelen yapmamanıza gelenen iyi bir işarettir.
Belki de yapmayın: Statik HTML'yi önbelleğe almayın
Bu kural, ayrı HTML dosyalarının dinamik olarak veya bir uygulama arka ucu tarafından sağlanmak yerine bir statik site oluşturucu ile ya da manuel olarak oluşturulduğu statik siteler için daha çok geçerlidir. Bu, mimarinizi tanımlıyorsa web sitenize ilişkin her HTML dosyasını önbelleğe önbelleğe almamanız muhtemelen en iyi seçenek olacaktır.
Bir sitedeki HTML dosyalarının tamamının önbelleğe alınmasıyla ilgili sorunlardan biri, artık önbelleğe alınan işaretlemenin, daha sonra, hizmet çalışanı güncellenene kadar her zaman önbellekten sunulmasıdır. Bu, performans için mükemmeldir, ancak web sitenizin HTML'si sık sık değişiyorsa önbellekte önemli ölçüde kayıp yaşanmasına neden olabilir.
Yine de bu kuralın birkaç istisnası vardır. Birkaç statik HTML dosyası içeren küçük bir web sitesini dağıtıyorsanız çevrimdışı olarak kullanılabilmeleri için bu sayfaların tümünün önceden önbelleğe alınması büyük olasılıkla sorun oluşturmayacaktır. Özellikle büyük bir web siteniz varsa yüksek değerli birkaç sayfayı ve çevrimdışı bir yedeği spekülatif olarak önbelleğe almayı düşünün ve diğer sayfaları sizin için önbelleğe almak üzere çalışma zamanı önbelleğe alma özelliğini kullanın.
Sakın: Duyarlı resimleri veya site simgelerini önbelleğe almayın
Bu, genel bir yönergeden ziyade bir kurala işaret eder. Duyarlı resimler karmaşık bir sorun için karmaşık bir çözümdür: Birçok cihazda, her biri farklı ekran boyutları, piksel yoğunluğu ve alternatif biçimleri destekleme bakımından çok sayıda kullanıcınız bulunmaktadır. Duyarlı resim grubunun tamamını önbelleğe alırsanız muhtemelen kullanıcı bunlardan yalnızca birini indirebileceği zaman bazı resimleri önbelleğe alıyor olabilirsiniz.
Site simgeleri de benzer bir durum oluşturur. Zira web siteleri genellikle farklı senaryolar için bir dizi site simgesi dağıtır. Genellikle yalnızca bir site simgesi isteniyor ve bu da tüm site simgesi grubunu önbelleğe almayı benzer şekilde israf olarak gösteriyor.
Kullanıcılarınıza bir iyilik yapın ve duyarlı resim ve site simgesi gruplarını önbelleğe almayın. Bunun yerine çalışma zamanının önbelleğe alınmasını kullanın. Resimleri önceden önbelleğe almak gerekiyorsa bir grup duyarlı resim veya site simgesinin parçası olmayan, yaygın olarak kullanılan resimleri önbelleğe alın. SVG'ler, veri kullanımı açısından daha az risklidir. Tek bir SVG, belirli bir ekranın piksel yoğunluğundan bağımsız olarak en iyi şekilde oluşturulur.
Çoklu dolguları önbelleğe almayın:
API'ler için tarayıcı desteğini çeşitlendirmek, web geliştiricilerinin sürekli karşılaştığı bir iştir ve çoklu doldurma, bu zorluğun üstesinden gelme yollarından biridir. Çoklu dolguların performans maliyetini en aza indirmenin bir yolu, özellik kontrolü yapmak ve çoklu dolguları yalnızca bunlara ihtiyaç duyan tarayıcılar için yüklemektir.
Çoklu dolguların koşullu olarak yüklenmesi, mevcut ortama göre çalışma zamanı sırasında gerçekleştiğinden çoklu dolguları önbelleğe almak bir risktir. Bazı kullanıcılar bu özellikten yararlanırken, bazıları da gereksiz çoklu dolgular için bant genişliğini boşa harcar.
Çoklu dolguları önbelleğe almayın. Yalnızca veri israfından kaçınmalarını gerektiren tarayıcılarda önbelleğe alındıklarından emin olmak için çalışma zamanı önbelleğe alma özelliğini kullanın.
Sonuç
Önbelleğe alma, kullanıcılarınızın gerçekte hangi öğelere gerçekten ihtiyaç duyduğunu önceden aklınızdan çıkarmayı gerektirir. Ancak, bu işlemi kesinlikle gelecekteki performansa ve güvenilirliğe öncelik verecek şekilde yapabilirsiniz.
Belirli öğelerin önceden önbelleğe alınması gerekip gerekmediğinden emin değilseniz yapabileceğiniz en iyi şey Workbox'a bu öğeleri hariç tutmasını ve bunları işlemek için bir çalışma zamanı önbelleğe alma rotası oluşturmasını söylemeniz olabilir. Her iki durumda da, önbelleğe alma işlemi bu belgenin ilerleyen bölümlerinde ayrıntılı olarak ele alınmıştır. Böylece, bu ilkeleri gelecekte önbelleğe alma mantığınıza uygulayabilirsiniz.