Service Worker'ların özelliklerinden biri de, hizmet çalışanı yüklenirken dosyaları önbelleğe kaydedebilmesidir. Bu işlem, "önbelleğe alma" olarak adlandırılır. Önbelleğe alma, önbelleğe alınan dosyaların ağa gitmeden tarayıcıya sunulmasını mümkün kılar. Sitenizin çevrimdışıyken bile ihtiyaç duyduğu önemli öğeler için önbelleği kullanın: ana sayfa, stiller, yedek resim ve gerekli komut dosyaları.
Neden Workbox'ı kullanmalısınız?
Workbox'ı önceden önbelleğe alma için kullanmak isteğe bağlıdır. Service Worker yüklenirken kritik öğeleri önbelleğe almak için kendi kodunuzu yazabilirsiniz. Workbox'ı kullanmanın en önemli avantajı kullanıma hazır sürüm denetimidir. Önceden önbelleğe alınmış öğeleri Workbox'ı kullanarak güncellerken, bu dosyaların sürüm oluşturma ve güncelleme işlemlerini kendi başınıza yönettiğiniz durumlara kıyasla çok daha az sorun yaşarsınız.
Önbellek manifestleri
Önbelleğe almanın temelinde, her URL'nin bir URL listesi ve ilgili sürüm oluşturma bilgileri yer alır. Birlikte bu bilgiler, önbellek manifesti olarak bilinir. Manifest, bir web uygulamasının belirli bir sürümü için önbellekte olması amaçlanan her şeyin durumunun "bilgi kaynağıdır". Workbox tarafından kullanılan biçimdeki bir önbellek manifesti aşağıdaki gibi görünür:
[{
url: 'app.abcd1234.js'
}, {
url: 'offline.svg',
revision: '7836745f'
}, {
url: 'index.html',
revision: '518747aa'
}]
Service Worker yüklendiğinde, listelenen üç URL'nin her biri için Önbellek Depolama alanında üç önbellek girişi oluşturulur. İlk öğe, URL'sinde halihazırda bulunan sürüm oluşturma bilgilerine sahiptir (app gerçek dosya adıdır ve .abcd1234 dosya uzantısından hemen önce sürüm belirleme bilgilerini içerir.js). Bu çalışma kutusunun derleme araçları bir düzeltmeyi algılayıp hariç tutabilir. Diğer iki öğenin URL'lerinde sürüm oluşturma bilgisi bulunmadığından Workbox'ın derleme araçları, yerel dosya içeriğinin karmasını içeren ayrı bir revision alanı oluşturur.
Ön belleğe alınmış kaynakları sunma
Önbelleğe öğe eklemek, önbelleğin yalnızca bir parçasıdır. Varlıklar önbelleğe alındıktan sonra giden isteklere yanıt vermeleri gerekir. Bunun için hizmet çalışanınızda, hangi URL'lerin önceden önbelleğe alındığını kontrol edebilen ve önbelleğe alınan bu yanıtları güvenilir bir şekilde döndürerek işlemdeki ağı atlayan bir fetch etkinlik dinleyicisi gerekir. Hizmet çalışanı yanıtlar için önbelleği kontrol ettiği (ve ağdan öncekileri kullandığı) için buna önbellek öncelikli strateji adı verilir.
Etkili güncellemeler
Önbellek manifesti, beklenen önbellek durumunun tam temsilini sağlar. Manifest'teki bir URL/düzeltme kombinasyonu değişirse hizmet çalışanı, önbelleğe alınan önceki girişin artık geçerli olmadığını ve güncellenmesi gerektiğini bilir. Önbelleğe alınmış hangi URL'lerin yenilenmesi gerektiğini belirlemek için yalnızca hizmet çalışanı güncelleme kontrolünün bir parçası olarak tarayıcı tarafından otomatik olarak yapılan tek bir ağ isteği yapılır.
Önbelleğe alınmış kaynaklarda yapılan güncellemeler
Zaman içinde web uygulamanızın yeni sürümlerini kullanıma sundukça daha önce önbelleğe alınmış URL'leri güncel tutmanız, yeni öğeleri önbelleğe almanız ve güncel olmayan girişleri silmeniz gerekir. Sitenizi yeniden derlediğiniz her seferde tam önbellek manifesti oluşturmaya devam ettiğiniz sürece, bu manifest, herhangi bir anda önbellek durumunuz için "bilgi kaynağı" işlevi görür.
Yeni bir düzeltme alanı olan mevcut bir URL varsa veya manifest dosyasına herhangi bir URL eklenmiş ya da çıkarılmışsa bu, hizmet çalışanınıza install ve activate etkinlik işleyicilerin bir parçası olarak güncellemelerin yapılması gerektiğinin göstergesidir. Örneğin, sitenizde bazı değişiklikler yapıp yeniden oluşturduysanız en son önbellek manifestinizde aşağıdaki değişiklikler yapılmış olabilir:
[{
url: 'app.ffaa4455.js'
}, {
url: 'offline.svg',
revision: '7836745f'
}, {
url: 'index.html',
revision: '518747aa'
}]
Bu değişikliklerin her biri, hizmet çalışanınıza önceden önbelleğe alınmış girişleri ('offline.svg' ve 'index.html') güncellemek, yeni URL'leri önbelleğe almak ('app.ffaa4455.js') ve artık kullanılmayan URL'leri temizlemek için silme işlemleri ('app.abcd1234.js') için yeni istekler yapılması gerektiğini bildirir.
Gerçek "uygulama mağazası" yükleme deneyimi
Önbelleğe almanın bir başka yararı da kullanıcılarınıza "uygulama mağazası" yüklemesi dışında ulaşması zor olabilecek bir deneyim sunabilmenizdir. Bir kullanıcı web uygulamanızdaki herhangi bir sayfayı ilk kez ziyaret ettiğinde, web uygulamanızın görünümlerinden herhangi birini görüntülemek için gereken tüm URL'leri potansiyel olarak önbelleğe alabilirsiniz. Böylece, her bir görünümü ziyaret edene kadar beklemek zorunda kalmazsınız.
Kullanıcı bir uygulamayı yüklediğinde yalnızca geçmişte gittikleri görüntülemelerin değil, her bölümün hızlı bir şekilde gösterilmesini bekler. Önbelleğe alma aynı deneyimi web uygulamalarına da getirir.
Öğelerinizden hangileri önceden önbelleğe alınmalıdır?
Hangi URL'lerin önbelleğe alınmasının en mantıklı olduğu hakkında iyi bir fikir edinmek için Nelerin yüklendiğini tanımlama kılavuzuna tekrar bakın. Genel kural, erken yüklenen ve belirli bir sayfanın temel yapısını görüntülemek için son derece önemli olan tüm HTML, JavaScript veya CSS'leri önbelleğe almaktır.
Web uygulamanızın işlevselliği açısından önemli olmadığı sürece, daha sonra yüklenen medyayı veya diğer öğeleri önceden önbelleğe almaktan kaçınmanız önerilir. Bunun yerine, bu öğelerin kullandıkça önbelleğe alınmasını sağlamak için çalışma zamanını önbelleğe alma stratejisi kullanın.
Önbelleğe alma işleminin, kullanıcının cihazında ağ bant genişliği ve depolama alanı kullanmayı içerdiğini unutmayın (uygulama mağazasından uygulama yükleme işlemi gibi). Geliştirici olarak akıllı bir şekilde önbelleke almak ve şişirilmiş bir önbellek manifestinden kaçınmak size kalmıştır.
Workbox'ın derleme araçları, önbellek manifestindeki öğe sayısının yanı sıra önbellek yükünün toplam boyutunu bildirerek size yardımcı olur.
Web uygulamanızı tekrar ziyaret eden kullanıcılar, ağdan kaçınma imkanı sunması sayesinde zaman içinde tasarruflu bant genişliği için kısa sürede ödeme yaptığı için önceden önbelleğe alma maliyetinden uzun vadede yararlanır.