Önbelleğe alınıyor

Önbellek depolama alanı güçlü bir araçtır. Bu sayede uygulamalarınız ağ koşullarına daha az bağımlı hale gelir. Önbellekleri iyi bir şekilde kullanarak web uygulamanızı çevrimdışı kullanılabilir hale getirebilir ve öğelerinizi herhangi bir ağ koşulunda mümkün olduğunca hızlı bir şekilde sunabilirsiniz. Öğeler ve Veriler bölümünde belirtildiği gibi, gerekli öğeleri önbelleğe almak için en iyi stratejiye karar verebilirsiniz. Önbelleği yönetmek için hizmet çalışanınızın Cache Storage API ile etkileşimde bulunması gerekir.

Cache Storage API'si farklı bağlamlardan 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 hizmet çalışanlarını kullanarak yönetmenin avantajlarından biri, yaşam döngüsünün pencereye bağlı olmaması, yani ana iş parçacığını engellememenizdir. 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ınacak öğeler

Önbelleğe alma ile ilgili sorabileceğiniz ilk soru, neyin ö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 tüm minimum kaynaklarla başlayabilirsiniz.

Bu kaynaklar şunları içermelidir:

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

Çevrimdışı kullanıma hazır

Progresif Web Uygulamasının koşullarından biri çevrimdışı olmak olsa da her PWA'nın eksiksiz bir çevrimdışı deneyime (ör. bulut oyun çözümleri veya kripto varlık uygulamaları) ihtiyaç duymadığını unutmamak gerekir. Bu nedenle, bu tür durumlarda kullanıcılarınıza rehberlik eden temel bir kullanıcı arayüzü sunmanız önerilir.

PWA'nız, web oluşturma motorunun sayfayı yükleyemediğini belirten bir tarayıcı hata mesajı oluşturmamalıdır. Bunun yerine, genel ve kafa karıştırıcı bir tarayıcı hatasından kaçınarak kendi mesajınızı göstermek için hizmet çalışanı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 kullanılmayacaksa ve her istekte güncellenmesi gerekmiyorsa tüm öğelerinizin önbelleğe alınması geçerli bir strateji olur. Diğer yandan, en son sürüm olması gereken kaynaklarınız varsa bu öğeleri hiç önbelleğe almamayı düşünebilirsiniz.

API'yi kullanma

Kaynağınızda her biri tanımlayabileceğiniz bir dize adıyla tanımlanan bir önbellek grubu tanımlamak için Cache Storage API'sini kullanın. API'ye caches nesnesi üzerinden eriştiğinizde open yöntemi, önceden oluşturulmuş bir önbelleğin oluşturulmasına veya açılmasına olanak tanır. Açık yöntem, önbellek nesnesi için bir taahhüt 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 indirmesini ve depolamasını istemek için add veya addAll yöntemlerini kullanın. add yöntemi bir istek gönderir ve bir HTTP yanıtını; addAll bir istek veya URL dizisine dayalı işlem olarak bir HTTP yanıtlarını 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, bunu daha sonra bir HTTP isteğini veya URL'yi anahtar olarak kullanarak alabilirsiniz. Bunu nasıl yapacağınızı Yayınlama bölümünde görebilirsiniz.

Ne zaman önbelleğe alınır?

PWA'nızda dosyaların ne zaman önbelleğe alınacağına karar vermek sizin sorumluluğunuzdadır. Yaklaşımlardan biri, Service Worker yüklüyken mümkün olduğunca çok sayıda öğe depolamak olsa da 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, güncel olmayan 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üklenirken.
• İlk sayfa yüklendikten 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 yaygın senaryolardan biri, Service Worker yüklendiğinde minimum bir öğe grubunu önbelleğe almaktır. Bunu yapmak için hizmet çalışanındaki install etkinliğinde önbellek depolama arayüzünü kullanabilirsiniz.

Service Worker iş parçacığı herhangi bir zamanda durdurulabileceğinden, tüm öğeleri depolama ve uygulamanın tutarlılığını sağlama fırsatını artırmak için tarayıcıdan addAll taahhüdünün tamamlanmasını beklemesini isteyebilirsiniz. Aşağıdaki örnekte, hizmet çalışanı etkinlik işleyicide alınan etkinlik bağımsız değişkeninin waitUntil yöntemi kullanılarak bunun nasıl yapılacağı gösterilmektedir.

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 söz alır ve hizmet çalışanı işlemini sonlandırmadan önce tarayıcıdan çözümlenmesi (tamamlandı veya başarısız olması) için belirtilen görevi beklemesini ister. Tek bir sonucun waitUntil() yöntemine ulaşması için taahhütler zinciriniz ve add() veya addAll() çağrılarını döndürmeniz gerekebilir.

Ayrıca eşzamansız/bekle söz dizimini kullanarak taahhütleri yerine getirebilirsiniz. Bu durumda, await öğesini çağırabilen ve aşağıdaki örnekte olduğu gibi, çağrıldıktan sonra waitUntil() için taahhüt döndüren bir eşzamansız 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());
});

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. Alanlar arası uygulamalarda önbellek etkileşimi, aynı kaynaklı isteklere ç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 bu öğeler yalnızca uygulamanızın kaynağında kullanılabilir.

Öğe opak bir yanıt olarak depolanır, yani kodunuz bu 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 yalnızca 1 Kb olsa da 7 MB gibi büyük boyutları gösterir.

Öğeleri güncelleme ve silme

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

Daha ayrıntılı bilgi için Önbellek nesnesi belgelerine göz atın.

Önbellek Depolama Alanında Hata Ayıklama

Birçok tarayıcı, Geliştirici Araçları Uygulama sekmesindeki önbellek depolama alanı içeriklerinde hata ayıklama yöntemi sunar. Orada, mevcut kaynaktaki her önbelleğin içeriğini görebilirsiniz. Araçlar ve Hata Ayıklama bölümünde bu araçlar hakkında daha fazla bilgi verilecektir.

Kaynaklar

• MDN'de Önbellek Depolama Alanı
• Cache API: Hızlı kılavuz
• Çevrimdışı Yemek Kitabı