Önbelleğe alınıyor

Önbelleğe alma depolama alanı güçlü bir araçtır. Bu sayede uygulamalarınız ağ koşullarına daha az bağımlı olur. Önbellekleri doğru şekilde kullanarak web uygulamanızı çevrimdışı olarak kullanılabilir hale getirebilir ve öğelerinizi herhangi bir ağ koşulunda 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, önbelleği yönetmek için Cache Storage API ile etkileşimde bulunur.

Tarayıcı desteği

  • Chrome: 43.
  • Edge: 16.
  • Firefox: 41.
  • Safari: 11.1.

Kaynak

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

  • Pencere bağlamı (PWA'nızın ana iş parçacığı).
  • Hizmet çalışanı.
  • Kullandığınız diğer ç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 hakkında aklınıza ilk gelen 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 tüm minimum kaynaklarla başlayabilirsiniz.

Bu kaynaklar şunları içermelidir:

  • Ana sayfa HTML'si (uygulamanızın start_url değeri).
  • 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ü oluşturmak 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 öğe uygulamaları) ihtiyaç duymadığını unutmamak gerekir. Bu nedenle, kullanıcılarınızı bu durumlarda yönlendirecek temel bir kullanıcı arayüzü sunmanızda bir sakınca yoktur.

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çınmak için kendi mesajlarınızı göstermek üzere servis ç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ı indiriliyor, çok fazla yer kaplamıyor ve her istekte güncellenmesi gerekmiyorsa tüm öğelerinizi önbelleğe almak geçerli bir strateji olabilir. Öte yandan, en son sürüm olması gereken kaynaklarınız varsa bu öğeleri hiç önbelleğe almamayı düşünebilirsiniz.

API'yi kullanma

Her biri tanımlayabileceğiniz bir dize adıyla tanımlanan bir önbelleğe alma grubunu kaynak içinde tanımlamak için Önbelleğe Alma API'sini kullanın. API'ye caches nesnesi aracılığıyla erişin. open yöntemi, yeni bir önbelleğin oluşturulmasını veya önceden oluşturulmuş bir önbelleğin açılmasını sağlar. 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 dahil olmak üzere bir yanıtın tamamını depolar. Bu nedenle, anahtar olarak bir HTTP isteği veya URL kullanarak daha sonra bu anahtarı alabilirsiniz. Bunu nasıl yapacağınızı Yayınlama bölümünde görebilirsiniz.

Ne zaman önbelleğe alınmalıdır?

Dosyaları ne zaman önbelleğe alacağınıza karar vermek PWA'nızda 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ı israfına yol açar ve uygulamanızın istenmeden eski kaynakları sunmasına neden olabilir.

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

  • Hizmet çalışanı yüklendiğinde.
  • İlk sayfa yüklendikten sonra.
  • Kullanıcı bir bölüme veya rotaya gittiğinde
  • Ağ boşken.

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

Hizmet çalışanında öğ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ğindeki önbellek depolama arayüzünü kullanabilirsiniz.

Hizmet çalışanı iş parçacığı herhangi bir zamanda durdurulabileceğinden, tüm öğeleri depolama ve uygulamanın tutarlılığını koruma fırsatını artırmak için tarayıcıdan addAll vaadinin tamamlanmasını beklemesini isteyebilirsiniz. Aşağıdaki örnekte, hizmet çalışanı etkinlik dinleyicisinde 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 tarayıcıdan, hizmet çalışanı sürecini sonlandırmadan önce sözdeki görevin çözülmesini (yerine getirilmesini veya başarısız olmasını) beklemesini ister. waitUntil() yöntemine tek bir sonuç gelmesi için add() veya addAll() çağrılarını döndürmek ve vaatleri zincirleme yapmanız gerekebilir.

Promise'leri async/await söz dizimini kullanarak da işleyebilirsiniz. Bu durumda, await işlevini çağırabilen ve çağrıldıktan sonra waitUntil() işlevine bir promise döndüren eşzamansız bir işlev oluşturmanız gerekir. Aşağıdaki örnekte bu işlev gösterilmektedir:

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, kaynak alanınızdaki ve alan adları arasında öğeleri (ör. üçüncü taraf CDN'lerdeki içerikler) indirip önbelleğe alabilir. Alanlar arası bir uygulamada önbelleğe alma 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 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 bile 7 MB gibi büyük boyutlar gösterir.

Öğeleri güncelleme ve silme

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

Daha fazla bilgi için Önbelleğe alma nesnesi belgelerini inceleyin.

Önbellek Depolama Alanı'nda hata ayıklama

Birçok tarayıcı, DevTools Uygulama sekmesinde önbellek depolama alanının içeriğinde hata ayıklama olanağı sunar. Burada, mevcut kaynaktaki her önbelleğin içeriğini görebilirsiniz. Bu araçlar hakkında daha fazla bilgiyi Araçlar ve Hata Ayıklama bölümünde bulabilirsiniz.

Chrome Geliştirici Araçları'nda önbelleğe alınmış depolama alanı içerikleriyle ilgili hata ayıklama

Kaynaklar