Önbelleğe alınıyor

Önbellek depolama güçlü bir araçtır. Bu sayede uygulamalarınız ağ koşullarına daha az bağımlı olur. Önbelleklerden yararlanarak web uygulamanızı çevrimdışı kullanılabilir hale getirebilir ve öğelerinizi tüm ağ koşullarında mümkün olduğunca hızlı bir şekilde yayınlayabilirsiniz. Öğeler ve Veriler bölümünde belirtildiği gibi, gerekli öğeleri önbelleğe almak için en iyi stratejiye karar verebilirsiniz. Hizmet çalışanınızın Cache Storage API ile etkileşime girdiği önbelleği yönetmek için.

Tarayıcı Desteği

  • 43
  • 16
  • 41
  • 11.1

Kaynak

Cache Storage API'si farklı bağlamlarda kullanılabilir:

  • Pencere bağlamı (PWA'nızın ana iş parçacığı).
  • Hizmet çalışanı.
  • Kullandığınız diğer tüm çalışanlar.

Önbelleğinizi Service Worker'ları kullanarak yönetmenin avantajlarından biri, kullanım ömrünün pencereye bağlı olmamasıdır. Bu, ana iş parçacığını engellemediğiniz anlamına gelir. Cache Storage API'yi kullanmak için bu bağlamların çoğunun TLS bağlantısı altında olması gerektiğini unutmayın.

Önbelleğe alınacaklar

Önbelleğe alma ile ilgili merak edebileceğiniz ilk soru, nelerin önbelleğe alınacağıdır. Bu sorunun tek bir yanıtı olmasa da kullanıcı arayüzünü oluşturmak için ihtiyacınız olan minimum kaynakların tümünü kullanarak başlayabilirsiniz.

Bu kaynaklar şunları içermelidir:

  • Ana sayfa HTML'si (uygulamanızın start_url'si).
  • Ana kullanıcı arayüzü için gerekli CSS stil sayfaları.
  • Kullanıcı arayüzünde kullanılan resimler.
  • Kullanıcı arayüzünü oluşturmak için gereken JavaScript dosyaları.
  • Temel bir deneyim oluşturmak için gerekli veriler (ör. JSON dosyası).
  • Web yazı tipleri.
  • Çok sayfalı bir uygulamada, hızlı veya çevrimdışıyken sunmak istediğiniz diğer HTML dokümanları.

Çevrimdışı kullanım için hazır

Çevrimdışı özelliği kullanmak Progresif Web Uygulamaları'nın şartlarından biri olsa da her PWA'nın tam bir çevrimdışı deneyime (ör. bulut oyun çözümleri veya kripto öğe uygulamaları) ihtiyaç duymadığını bilmek önemlidir. Bu nedenle, kullanıcılarınıza bu durumlarda yol gösterecek basit bir kullanıcı arayüzü sunmanız sorun yaratmaz.

PWA'nız, web oluşturma motorunun sayfayı yükleyemediğini belirten bir tarayıcının hata mesajını oluşturmamalıdır. Bunun yerine, genel ve kafa karıştırıcı tarayıcı hatalarından kaçınarak kendi mesajlarınızı göstermek için Service Worker'ınızı kullanın.

PWA'nızın ihtiyaçlarına bağlı olarak kullanabileceğiniz birçok farklı önbelleğe alma stratejisi vardır. Bu nedenle, önbellek kullanımınızı hızlı ve güvenilir bir deneyim sağlayacak şekilde tasarlamanız önemlidir. Örneğin, tüm uygulama öğeleriniz hızlı indirilecekse, çok fazla alan kullanmıyorsa ve her istekte güncellenmesi gerekmiyorsa tüm öğelerinizi önbelleğe almak geçerli bir stratejidir. Diğer yandan, en son sürüm olması gereken kaynaklarınız varsa bu öğeleri hiç önbelleğe almamayı düşünebilirsiniz.

API'yi kullanın

Kaynağınızda her biri tanımlayabileceğiniz dize adıyla tanımlanan bir önbellek grubu tanımlamak için Cache Storage API'sini kullanın. API'ye caches nesnesi aracılığıyla eriştiğinizde open yöntemi daha önce oluşturulmuş bir önbelleğin oluşturulmasını veya açılmasını sağlar. Açık yöntem, önbellek nesnesi için bir söz döndürür.

caches.open("pwa-assets")
.then(cache => {
  // you can download and store, delete or update resources with cache arguments
});

Öğeleri indirme ve depolama

Tarayıcıdan öğeleri indirip depolamasını istemek için add veya addAll yöntemlerini kullanın. add yöntemi, bir istek oluşturup bir HTTP yanıtı ve addAll HTTP yanıtı grubunu istek veya URL dizisine dayalı bir işlem olarak depolar.

caches.open("pwa-assets")
.then(cache => {
  cache.add("styles.css"); // it stores only one resource
  cache.addAll(["styles.css", "app.js"]); // it stores two resources
});

Önbellek depolama arayüzü, tüm üstbilgiler ve gövde de dahil olmak üzere bir yanıtın tamamını depolar. Sonuç olarak, HTTP isteğini veya URL'yi anahtar olarak kullanarak bunu daha sonra alabilirsiniz. Bu işlemi nasıl yapacağınızı Yayınlama bölümünde öğrenebilirsiniz.

Önbelleğe alınma zamanı

PWA'nızda dosyaların ne zaman önbelleğe alınacağına karar vermek sizin sorumluluğunuzdadır. Yaklaşımlardan biri Service Worker yüklenirken mümkün olduğunca çok sayıda öğe depolamak olsa da bu genellikle en iyi fikir değildir. Gereksiz kaynakları önbelleğe almak, bant genişliği ve depolama alanını boşa harcar ve uygulamanızın istenmeyen eski kaynaklar sunmasına neden olabilir.

Tüm öğeleri tek seferde önbelleğe almanız gerekmez. PWA'nızın yaşam döngüsü boyunca öğeleri birçok kez önbelleğe alabilirsiniz. Örneğin:

  • Service Worker yüklendiğinde.
  • İlk sayfa yüklemesinden sonra.
  • Kullanıcı bir bölüme veya rotaya gittiğinde.
  • Ağ boştayken.

Ana iş parçacığında veya hizmet çalışanı bağlamında yeni dosyaların önbelleğe alınmasını isteyebilirsiniz.

Service Worker'da öğeleri önbelleğe alma

En sık karşılaşılan senaryolardan biri, Service Worker yüklendiğinde minimum bir öğe grubunun önbelleğe alınmasıdır. Bunun için Service Worker'daki install etkinliğinde yer alan önbellek depolama alanı arayüzünü kullanabilirsiniz.

Service Worker iş parçacığı istediğiniz zaman durdurulabileceğinden, tüm öğeleri depolama ve uygulamanın tutarlı kalmasını sağlama fırsatını artırmak amacıyla tarayıcıdan addAll sözünün tamamlanmasını beklemesini isteyebilirsiniz. Aşağıdaki örnek, hizmet çalışanı etkinlik işleyicisinde alınan etkinlik bağımsız değişkeninin waitUntil yöntemini kullanarak bunun nasıl yapılacağını gösterir.

const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", event => {
   event.waitUntil(
      caches.open("pwa-assets")
      .then(cache => {
         return cache.addAll(urlsToCache);
      });
   );
});

waitUntil() yöntemi bir taahhüt alır ve hizmet çalışanı sürecini sonlandırmadan önce tarayıcıdan belirtilen görevi çözme sözü edilen (tamamlanan veya başarısız olan) beklemesini ister. Tek bir sonucun waitUntil() yöntemine ulaşabilmesi için taahhütleri zincirleme olarak verip add() veya addAll() çağrılarını geri vermeniz gerekebilir.

Söz verme işlemlerini, eşzamansız/bekleyen söz dizimini kullanarak da yapabilirsiniz. Bu durumda, aşağıdaki örnekte olduğu gibi, await yöntemini çağırabilen ve çağrıldıktan sonra waitUntil() öğesine bir sözü döndüren eşzamansız bir işlev oluşturmanız gerekir:

const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", (event) => {
   let cacheUrls = async () => {
      const cache = await caches.open("pwa-assets");
      return cache.addAll(urlsToCache);
   };
   event.waitUntil(cacheUrls());
});

Web alanları arası istekler ve opak yanıtlar

PWA'nız kaynağınızdaki ve alanlar arası öğeleri (ör. üçüncü taraf CDN'lerdeki içerikler) indirip önbelleğe alabilir. Web alanları arası uygulamalarda, önbellek etkileşimi aynı kaynak isteklerine çok benzer. İstek yürütülür ve yanıtın bir kopyası önbelleğinizde saklanır. Önbelleğe alınan diğer öğelerde olduğu gibi yalnızca uygulamanızın kaynağında kullanılabilir.

Öğe opak yanıt olarak depolanır. Bu nedenle, kodunuz söz konusu yanıtın içeriğini veya başlıklarını göremez ya da değiştiremez. Ayrıca opak yanıtlar depolama API'sinde gerçek boyutlarını göstermez ve kotaları etkiler. Bazı tarayıcılar, dosya boyutu fark etmeksizin 7 MB gibi büyük boyutları gösterir.

Öğeleri güncelleme ve silme

Öğeleri cache.put(request, response) ile güncelleyebilir ve delete(request) ile silebilirsiniz.

Diğer ayrıntılar için Önbellek nesnesi dokümanlarına göz atın.

Önbellek Depolama Alanında Hata Ayıklama

Tarayıcıların çoğu, DevTools Uygulama sekmesinde önbellek depolama içeriğindeki hataları ayıklamak için bir yol sunar. Orada, geçerli kaynaktaki her önbelleğin içeriğini görebilirsiniz. Araçlar ve Hata Ayıklama bölümünde bu araçlarla ilgili daha fazla bilgi vereceğiz.

Chrome Geliştirici Araçları, Önbellek Depolama Alanı içeriklerinde hata ayıklayor.

Kaynaklar