Bu dokümanlarda daha önce önceden önbelleğe alma konuları ele alınmış olsa da sürecin nasıl doğru şekilde yönetileceği konusunda yeterli bilgi verilmemiştir. Workbox'ı kullanıp kullanmadığınızdan bağımsız olarak, önbellekten çok fazla miktarda önbelleğe alınıp veri ve bant genişliği israfına yol açabileceğinden bu önemli bir husustur. Önbelleğe alma yükünüzün kullanıcı deneyimini nasıl etkilediğine dikkat etmelisiniz.
Bu dokümanı okurken bunların genel yönergeler olduğunu unutmayın. Uygulama mimariniz ve gereksinimleriniz, burada önerilenden farklı işlemler yapmanızı gerektirebilir. Ancak bu yönergeler iyi varsayılan ayarlardır.
Yapılması gereken: kritik statik öğeleri önbelleğe alın
Önbelleğe alma için en iyi adaylar kritik statik öğelerdir ancak "kritik" olarak kabul edilen öğeler öğe mi var? Bir geliştirici açısından tüm bir uygulamanın "kritik" olduğunu düşünmek cazip gelebilir, ancak en önemlisi kullanıcının bakış açısıdır. Kritik öğeleri, bir kullanıcı deneyimi sunmak için son derece gerekli olanlar olarak düşünebilirsiniz:
- Genel stil sayfaları.
- Genel işlevler sağlayan JavaScript dosyaları.
- Uygulama kabuğu HTML'si (bu sizin mimariniz için geçerliyse).
Hatırlatma: Bunlar genel kurallar olup sabit öneriler değildir. Öğeleri önbelleğe alırken daha çok önden belleğe alma yaklaşımına uygun hareket etmek en iyisidir.
Yapılması gerekenler: Çok sayfalı web siteleri için çevrimdışı bir yedeği önbelleğe alın
Çok sayfalı tipik web sitelerinde, gezinme isteklerini işleme 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ği gönderdiğinde hizmet çalışanınızın çevrimdışını önbelleğe aldığından ve çevrimdışı yedek sayfayla yanıt verdiğinden emin olmanız gerekir. Çalışma kutusunda bunu yapmanın bir yolu, çevrimdışı yedek ile yalnızca ağ stratejisini kullanıp önceden gezinmeden 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ının çevrimdışı olup önbelleğinde olmayan bir sayfaya gittiğinde en azından bir miktar çevrimdışı içerik almasını sağlar.
Yapabilecekleriniz: spekülatif önceden haber vermeyi düşünün
Bu büyük bir "belki" ancak yalnızca belirli senaryolarda kullanılan öğeleri önceden önbelleğe almanın potansiyel bir faydası vardır. Şöyle düşünün: Kullanıcılar daha fazla önceden veri indirme işlemi yapabilir ve bu durum, söz konusu öğelere yönelik gelecekteki taleplerin hızlandırılması gibi spekülatif bir avantaj sağlar.
Şimdi önemli bir uyarı: Bunu yapmaya karar verirseniz çok dikkatli olun. Bunu yaparken verileri boşa harcamak kolay bir işlemdir ve veriye dayalı bir karar olmalıdır. Ayrıca, sık sık değişen öğeleri tahmine dayalı olarak önceden önbelleğe almaktan kaçının. Aksi takdirde, önbelleğe alma kodu yeni bir düzeltme algıladığında kullanıcı ek veri kullanımına neden olur. Kullanıcıların hangi yöne gitme eğilimi gösterdiğini öğrenmek için analizlerinizde kullanıcı akışlarını gözlemleyin. Öğelerin spekülatif olarak önceden önbelleğe alınması konusunda şüpheleriniz varsa bu, büyük olasılıkla yapmamanız iyi bir işarettir.
Statik HTML'yi önbelleğe almayın
Bu kural, ayrı HTML dosyalarının dinamik bir şekilde oluşturulmak veya bir uygulama arka ucu tarafından sağlanmak yerine, statik bir site oluşturma aracı ile ya da manuel olarak oluşturulduğu statik siteler için geçerlidir. Bu, mimarinizi tanımlıyorsa muhtemelen en iyi seçenek, her HTML dosyasını web siteniz için önbelleğe almamanız olacaktır.
Bir sitenin tüm HTML dosyalarını önbelleğe almayla ilgili bir sorun, önceden önbelleğe alınan işaretlemenin daha sonra hizmet çalışanı güncellenene kadar her zaman önbellekten sunulur. Bu, performans için çok iyidir, ancak web sitenizin HTML'si sık sık değişiyorsa önbelleğin tamamen kaybolmasına neden olabilir.
Bununla birlikte, bu kuralın birkaç istisnası vardır. Birkaç statik HTML dosyası içeren küçük bir web sitesini dağıtıyorsanız çevrimdışı kullanılabilir olmaları için bu sayfaların tümünü önbelleğe almak iyi olabilir. Özellikle büyük bir web siteniz varsa yüksek değere sahip birkaç sayfayı ve çevrimdışı bir yedeği spekülatif olarak önceden önbelleğe alma seçeneğini değerlendirin ve diğer sayfaları sizin için önbelleğe almak üzere çalışma zamanı önbelleğe alma özelliğinden yararlanın.
Duyarlı resimleri veya site simgelerini önbelleğe almayın
Bu, daha çok genel bir kural değil, daha çok bir kuraldır. Duyarlı resimler, karmaşık sorunlar için karmaşık bir çözümdür: Birçok cihaz kullanıyorsanız, her biri ekran boyutu, piksel yoğunluğu ve alternatif biçimler desteği açısından farklılık gösterir. Duyarlı resimlerden oluşan bir grubun tamamını önceden önbelleğe alıyorsanız muhtemelen kullanıcıların resimlerden sadece birini indirebileceği birkaç resmi önbelleğe alıyor olabilirsiniz.
Web simgeleri de benzer bir durum sunar. Zira web siteleri, farklı senaryolar için genellikle tek bir site simgesi grubunun tamamını dağıtır. Genellikle yalnızca bir site simgesi istenir ve bu da bir site simgesinin tamamını önceden kovalamak benzer şekilde gereksiz bir davranıştır.
Kullanıcılarınıza bir iyilik yapın ve duyarlı resim ve site simgesi gruplarını önceden önbelleğe almayın. Bunun yerine çalışma zamanı önbelleğe alma yöntemini kullanın. Resimleri önceden önbelleğe almanız gerekiyorsa duyarlı resim veya site simgesi grubunun parçası olmayan çok kullanılan resimleri önbelleğe alın. SVG'ler veri kullanımı açısından daha az risklidir. Belirli bir ekranın piksel yoğunluğundan bağımsız olarak tek bir SVG optimum şekilde oluşturulur.
Yapılmaması gerekenler: polyfill'leri önbelleğe almayın
API'lere yönelik tarayıcı desteğinin değiştirilmesi, web geliştiricileri için her zaman zorlu bir sorundur 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 çalışma zamanında mevcut ortama göre gerçekleştiğinden, polyfill'leri önbelleğe almak bir kumardır. Bazı kullanıcılar bu özellikten yararlanırken, bazıları da gereksiz çoklu dolgular için bant genişliğini boşa harcayabilir.
Polyfill'leri önceden önbelleğe almayın. Çalışma zamanı önbelleğe alma özelliğini kullanarak bu uygulamaların, yalnızca veri kaybı yaşamamak için bunları gerektiren tarayıcılarda önbelleğe alınmasını sağlayın.
Sonuç
Önbelleğe alma işlemi için kullanıcılarınızın gerçekten ihtiyaç duyduğu öğeler konusunda önceden biraz kafa yormanız gerekir. Ancak gelecekteki performansa ve güvenilirliğe öncelik verecek şekilde bunu doğru şekilde yapabilirsiniz.
Belirli öğelerin önceden önbelleğe alınıp alınmaması gerektiğinden emin değilseniz yapılacak 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öylemek olabilir. Her iki durumda da, önbelleğe alma bu belgenin ilerleyen bölümlerinde ayrıntılı olarak ele alınmıştır. Böylece bu ilkeleri ileride önbelleğe alma mantığınıza uygulayabilirsiniz.