Service Worker'ların bir özelliği de bu kullanıcıların yükleme işlemi sırasında dosyaları önbelleğe kaydedebilmesidir. Bu, "ö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. Çevrimdışıyken bile sitenizin ihtiyaç duyduğu kritik öğeler (ana sayfa, stiller, yedek resim ve gerekli komut dosyaları) için önbelleğe alma özelliğini kullanın.
Neden Workbox'ı kullanmalısınız?
Önbelleğe alma için Workbox'ın kullanılması isteğe bağlıdır. Service Worker yükleme işlemi sırasında kritik öğeleri önbelleğe almak için kendi kodunuzu yazabilirsiniz. Workbox kullanmanın birincil avantajı, kullanıma hazır sürüm kontrolüdür. Ö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önetmenize kıyasla çok daha az sorunla karşılaşırsınız.
Önbellek manifestleri
Önbelleğe alma, bir URL listesi ve her URL için ilişkili sürüm bilgileri tarafından yönetilir. Birlikte ele alındığında bu bilgiler, ön önbellek manifesti olarak bilinir. Manifest, bir web uygulamasının belirli bir sürümünün önbelleğinde olması amaçlanan her şeyin durumunu gösteren "en doğru veri kaynağıdır". Workbox tarafından kullanılan biçimdeki ön ö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 öğenin URL'sinde halihazırda sürüm oluşturma bilgileri bulunur (app, gerçek dosya adıdır ve .abcd1234, dosya uzantısından hemen önceki sürüm oluşturma bilgilerini içerir
.js). Workbox'ın derleme araçları bunu algılayıp bir düzeltme alanını hariç tutabilir. Diğer iki öğenin URL'lerinde sürüm oluşturma bilgileri bulunmaz. Bu nedenle Workbox'ın oluşturma araçları, yerel dosya içeriğinin karmasını içeren ayrı bir revision alanı oluşturur.
Önbelleğe alınmış kaynakları sunma
Önbelleğe öğe eklemek, önbelleğe alma hikayesinin yalnızca bir parçasıdır. Öğeler ö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 edebilecek ve işlem sırasında ağı atlayarak bu önbelleğe alınmış yanıtları güvenilir bir şekilde döndürebilen bir fetch etkinlik işleyicisi gerekir. Hizmet çalışanı yanıtlar için önbelleği kontrol ettiğinden (ve ağdan önceki yanıtları kullandığından) buna önbellek öncelikli strateji adı verilir.
Etkili güncellemeler
Ön önbellek manifesti, beklenen önbellek durumunun tam temsilini sağlar. Manifestteki bir URL/düzeltme kombinasyonu değişirse Service Worker, önbelleğe alınmış önceki girişin artık geçerli olmadığını ve güncellenmesi gerektiğini bilir. Yalnızca tek bir ağ isteği (hizmet çalışanı güncelleme kontrolünün bir parçası olarak tarayıcı tarafından otomatik olarak yapılır) önbelleğe alınmış hangi URL'lerin yenilenmesi gerektiğini belirler.
Önbelleğe alınmış kaynaklarda yapılan güncellemeler
Zaman içinde web uygulamanızın yeni sürümlerini yayınladıkça önceden önbelleğe alınmış URL'leri güncel tutmanız, yeni öğeleri önbelleğe almanız ve eski girişleri silmeniz gerekir. Sitenizi her yeniden oluşturduğunuzda tam ön önbellek manifesti oluşturmaya devam ettiğiniz sürece, bu manifest herhangi bir zamanda önbellek öncesi durumunuz için "en doğru veri kaynağı" görevi görür.
Yeni bir düzeltme alanına sahip mevcut bir URL varsa veya manifest'e URL eklenmiş ya da hiç URL eklenmişse bu durum, install ve activate etkinlik işleyicileri kapsamında hizmet çalışanınız için güncellemelerin yapılması gerektiğini belirtir. Örneğin, sitenizde bazı değişiklikler yapıp yeniden oluşturduysanız son ön ö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 daha önce önbelleğe alınmış girişleri ('offline.svg' ve 'index.html') güncellemek ve yeni URL'leri ('app.ffaa4455.js') önbelleğe almak için yeni istekler yapılması gerektiğini ve artık kullanılmayan URL'lerin temizlenmesi için silme işlemlerinin ('app.abcd1234.js') 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 elde edilmesi zor olacak 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 URL'lerin tümünü önceden önbelleğe alabilirsiniz. Her bir görünümü ziyaret edene kadar beklemek zorunda kalmazsınız.
Bir kullanıcı bir uygulamayı yüklediğinde, yalnızca geçmişte yapılan görünümlerin değil, her bir parçasının da hızlı bir şekilde görünmesini bekler. Önbelleğe alma aynı deneyimi web uygulamalarına da getirir.
Öğelerinizden hangileri önceden önbelleğe alınmalıdır?
Hangi URL'lerin önceden önbelleğe alınmasının en mantıklı olduğu konusunda iyi bir fikir edinmek için Neyin yüklendiğini belirleme kılavuzuna tekrar bakın. Genel kural, erken yüklenen herhangi bir HTML, JavaScript veya CSS'yi önbelleğe almaktır ve belirli bir sayfanın temel yapısını görüntülemek için son derece önemlidir.
Daha sonra yüklenen medyaların veya diğer öğelerin önceden önbelleğe alınmasından kaçınmak tercih edilir (web uygulamanızın işlevselliği için gerekli olmadığı sürece). Bunun yerine, bu öğelerin kullandıkça önbelleğe alındığından emin olmak için çalışma zamanı ö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ını kullanmayı gerektirdiğini (bir uygulama mağazasından uygulama yüklerken olduğu gibi) unutmayın. Geliştirici olarak makul bir şekilde önbelleğe almak ve şişirilmiş bir ön önbellek manifestinden kaçınmak geliştirici olarak size bağlıdır.
Workbox'ın derleme araçları, ön önbellek manifestindeki öğelerin sayısının yanı sıra ön önbellek yükünün toplam boyutunu belirterek yardımcı olur.
Web uygulamanızın tekrar ziyaret eden kullanıcıları, uzun vadede önbelleğe alma işleminin ön maliyetinden fayda sağlar. Çünkü, uygulamanızın ağdan kaçınma özelliği, zaman içinde tasarruf edilen bant genişliğinin masraflarını karşılar.