Hizmet çalışanlarının özelliklerinden biri, hizmet çalışanı yüklenirken dosyaları önbelleğe kaydetme olanağıdır. Buna "önbelleğe alma" denir. Önbelleğe alma, ağ bağlantısı olmadan önbelleğe alınan dosyaların tarayıcıya sunulmasını sağlar. Sitenizin çevrimdışıyken bile ihtiyaç duyduğu kritik öğeler (ana sayfa, stiller, yedek resim ve temel komut dosyaları) için önceden önbelleğe alma özelliğini kullanın.
Workbox'u neden kullanmalısınız?
Ön önbelleğe alma için Workbox'u kullanmak isteğe bağlıdır. Hizmet çalışanı yüklenirken kritik öğeleri önceden önbelleğe almak için kendi kodunuzu yazabilirsiniz. Workbox'u kullanmanın birincil avantajı, hazır sürüm denetimidir. Workbox'u kullanarak önceden önbelleğe alınmış öğeleri güncellemek, bu dosyaların sürümlerini ve güncellemelerini kendiniz yönetmeniz durumunda karşılaşacağınız sorunlardan çok daha az soruna neden olur.
Manifestleri önceden önbelleğe alma
Ön önbelleğe alma işlemi, URL'lerin listesi ve her URL için ilişkili sürüm bilgileri tarafından yönlendirilir. Bu bilgiler birlikte önbelleğe alma manifesti olarak bilinir. Manifest, bir web uygulamasının belirli bir sürümünün önbelleği içinde olması gereken her şeyin durumu için "doğru kaynak"tır. Workbox tarafından kullanılan biçimdeki bir önbelleğe alma manifesti şöyle görünür:
[{
url: 'app.abcd1234.js'
}, {
url: 'offline.svg',
revision: '7836745f'
}, {
url: 'index.html',
revision: '518747aa'
}]
Hizmet çalışanı yüklendiğinde, listelenen üç URL'nin her biri için önbelleğe alma depolama alanında üç önbelleğe alma girişi oluşturulur. İlk öğenin URL'sinde sürüm bilgilerinin zaten yer aldığı (app gerçek dosya adı, .abcd1234 ise dosya uzantısı .js'den hemen önce sürüm bilgilerini içerir) Workbox'un derleme araçları bunu algılayabilir ve bir düzeltme alanını hariç tutabilir. Diğer iki öğe, URL'lerinde sürüm bilgisi içermediğinden Workbox'un derleme araçları, yerel dosyanın içeriğinin karmasını içeren ayrı bir revision alanı oluşturur.
Önceden önbelleğe alınmış kaynakları yayınlama
Öğeleri önbelleğe eklemek, önbelleğe alma sürecinin 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 edip bu önbelleğe alınmış yanıtları ağda atlayarak güvenilir bir şekilde döndürebilecek bir fetch etkinlik dinleyicisi gerekir. Hizmet çalışanı, yanıtlar için önbelleği kontrol ettiği (ve bunları ağdan önce kullandığı) için buna önce önbelleğe stratejisi denir.
Etkili güncellemeler
Önbelleğe alma manifesti, beklenen önbelleğe alma durumunun tam bir temsilini sağlar. Manifestteki bir URL/düzeltme kombinasyonu değişirse hizmet çalışanı, önceki önbelleğe alınmış girişin artık geçerli olmadığını ve güncellenmesi gerektiğini bilir. Önceden önbelleğe alınan hangi URL'lerin yenilenmesi gerektiğini belirlemek için tarayıcı tarafından hizmet çalışanı güncelleme kontrolü kapsamında otomatik olarak yapılan tek bir ağ isteği yeterlidir.
Önceden önbelleğe alınan kaynaklarda yapılan güncellemeler
Zaman içinde web uygulamanızın yeni sürümlerini yayınlarken ö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 bir önbelleğe alma manifesti oluşturmaya devam ettiğiniz sürece bu manifest, herhangi bir zamandaki önbelleğe alma durumunuz için "doğru kaynak" görevi görür.
Yeni bir düzeltme alanı içeren mevcut bir URL varsa veya manifest'e URL eklendiyse ya da manifest'ten URL kaldırıldıysa bu, hizmet çalışanınıza install ve activate etkinlik işleyicileri kapsamında güncellemelerin yapılması gerektiğini gösterir. Örneğin, sitenizde bazı değişiklikler yaptıysanız ve yeniden oluşturduysanız en son önbelleğe alma manifestiniz aşağıdaki değişikliklerden geçmiş olabilir:
[{
url: 'app.ffaa4455.js'
}, {
url: 'offline.svg',
revision: '7836745f'
}, {
url: 'index.html',
revision: '518747aa'
}]
Bu değişikliklerin her biri, servis ç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 isteklerin yanı sıra artık kullanılmayan URL'leri ('app.abcd1234.js') temizlemek için silme işlemlerinin yapılması gerektiğini bildirir.
Gerçek "uygulama mağazası" yükleme deneyimi
Ön önbelleğe almanın bir diğer avantajı, kullanıcılarınıza "uygulama mağazası" yüklemesi dışında elde etmeleri zor olan bir deneyim sunabilmenizdir. Bir kullanıcı web uygulamanızdaki herhangi bir sayfayı ilk kez ziyaret ettiğinde, web uygulamanızın görünümlerinin herhangi birini görüntülemek için gereken URL'lerin tümünü, kullanıcı her görünümü ziyaret edene kadar beklemek zorunda kalmadan önceden önbelleğe alabilirsiniz.
Kullanıcılar bir uygulamayı yüklediklerinde, yalnızca geçmişte ziyaret ettikleri görünümlerin değil, her bölümün hızlı bir şekilde gösterilmesini bekler. Önbelleğe alma, web uygulamalarına da aynı deneyimi sunar.
Öğelerinizden hangileri önceden önbelleğe alınmalıdır?
Önbelleğe almak için en uygun URL'lerin hangileri olduğuna dair iyi bir fikir edinmek üzere Yüklenenleri belirleme kılavuzuna tekrar göz atın. Genel kural, erken yüklenen ve belirli bir sayfanın temel yapısını görüntülemek için önemli olan tüm HTML, JavaScript veya CSS'yi önceden önbelleğe almaktır.
Medya veya daha sonra yüklenen diğer öğeleri önceden önbelleğe almaktan kaçınmak tercih edilir (web uygulamanızın işlevselliği için hayati önem taşımıyorsa). Bunun yerine, bu öğelerin kullanım sırasında önbelleğe alınmasını sağlamak için bir çalışma zamanında ö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ı kullanılmasını gerektirdiğini (tıpkı bir uygulama mağazasından uygulama yükleme işleminde olduğu gibi) unutmayın. Geliştirici olarak, önbelleği akıllıca önbelleğe almak ve şişman önbelleğe alma manifestinden kaçınmak size bağlıdır.
Workbox'un derleme araçları, önbelleğe alma manifestindeki öğe sayısının yanı sıra önbelleğe alma yükünün toplam boyutunu size bildirerek yardımcı olur.
Web uygulamanızın tekrarlanan ziyaretçileri, önbelleğe alma işleminin ön maliyetinden uzun vadede yararlanır. Bunun nedeni, ağın kullanılmasından kaçınmayı sağlayan bu özelliğin, zaman içinde tasarruf edilen bant genişliğiyle kendini hızla amorti etmesidir.