Bu sayfa, Cloud Translation API ile çevrilmiştir.

Cache API: Hızlı bir kılavuz

Uygulama verilerinizi çevrimdışı kullanılabilir hale getirmek için Cache API'yi nasıl kullanacağınızı öğrenin.

Pete LePage

Cache API, ağ depolamak ve almak için kullanılan bir sistemdir ve bunlarla ilgili yanıtları. Bunlar normal istekler olabilir uygulamanız sırasında oluşturulan yanıtlar veya yalnızca verileri daha sonra kullanılmak üzere depolamak amacıyla oluşturulmalıdır.

Cache API, hizmet çalışanlarının ağ isteklerini önbelleğe almasını sağlamak için oluşturuldu Böylece ağ hızı veya bağlantısı fark etmeksizin hızlı yanıt verebiliyor. stok durumu. Ancak API, genel bir depolama mekanizması olarak da kullanılabilir.

Nerelerde kullanılabilir?

Cache API, tüm modern tarayıcılarda kullanılabilir. Evet Global caches mülkü üzerinden gösterildiği için basit bir özellik algılamasıyla API'de:

const cacheAvailable = 'caches' in self;

Tarayıcı Desteği

Kaynak

Cache API'ye bir pencereden, iFrame'den, çalışandan veya hizmet çalışanından erişilebilir.

Depolanabilecek içerikler

Önbellekler yalnızca Request ve HTTP isteklerini ve yanıtlarını temsil eden Response nesne, tıklayın. Ancak talepler ve yanıtlarda her türlü veri olabilir. aktarılabilecek özellikler içerir.

Ne kadar depolanabilir?

Kısacası, büyük miktarda, en az birkaç yüz megabayt ve veya daha fazla depolama alanı alır. Tarayıcı uygulamaları değişiklik gösterir, ancak depolama alanı genellikle cihazınızda kullanılabilen depolama alanı için geçerlidir.

Önbellek oluşturma ve açma

Bir önbelleği açmak için caches.open(name) yöntemini kullanın ve kullanabilirsiniz. Adlandırılmış önbellek yoksa oluşturuldu. Bu yöntem, Cache nesnesiyle çözümlenen bir Promise döndürür.

const cache = await caches.open('my-cache');
// do something with cache...

Önbelleğe alma

Önbelleğe öğe eklemenin üç yolu vardır: add, addAll ve put. Her üç yöntem de Promise döndürür.

`cache.add`

İlk sırada cache.add() var. Tek bir parametre alır: Request veya bir URL (string) ekleyin. Ağa istek gönderir ve yanıtı depolar kullanır. Öğe getirme başarısızsa veya yanıtın durum kodu 200 aralığında değilse hiçbir şey depolanmaz ve Promise reddeder. Kökler arası verilerin CORS modunda olmayan istekler, status değeri döndürdüğünden depolanamaz. 0. Bu tür istekler yalnızca put ile depolanabilir.

// Retreive data.json from the server and store the response.
cache.add(new Request('/data.json'));

// Retreive data.json from the server and store the response.
cache.add('/data.json');

`cache.addAll`

Sonra cache.addAll() var. add() işlevine benzer şekilde çalışır ancak Request nesne veya URL dizisi (string). Bu, Promise hariç her istek için cache.add çağrılıyor tek bir istek önbelleğe alınmazsa reddedilir.

const urls = ['/weather/today.json', '/weather/tomorrow.json'];
cache.addAll(urls);

Bu durumların her birinde, yeni bir giriş, eşleşen mevcut girişlerin üzerine yazılır. Bu, alıyor.

`cache.put`

Son olarak, yanıtlardan birini depolamanıza olanak tanıyan cache.put() mevcuttur. veya kendi Response öğenizi oluşturup depolayın. İki saat sürer parametreleridir. İlki, bir Request nesnesi veya bir URL (string) olabilir. İkincisi, ağdan alınmış veya uygulamanız tarafından oluşturulmuş bir Response olmalıdır girin.

// Retrieve data.json from the server and store the response.
cache.put('/data.json');

// Create a new entry for test.json and store the newly created response.
cache.put('/test.json', new Response('{"foo": "bar"}'));

// Retrieve data.json from the 3rd party site and store the response.
cache.put('https://example.com/data.json');

put() yöntemi, add() veya addAll() yönteminden daha serbesttir ve CORS olmayan yanıtları veya yanıt kodu 200 aralığında değil. Bu, önceki metinlerin birkaç yanıt daha ekleyin.

İstek nesneleri oluşturma

Depolanan öğe için URL kullanarak Request nesnesini oluşturun:

const request = new Request('/my-data-store/item-id');

Yanıt nesneleriyle çalışma

Response nesne oluşturucusu, aşağıdakiler dahil birçok veri türünü kabul eder: Blob öğeleri, ArrayBuffer öğeleri, FormData nesneleri ve dizeler.

const imageBlob = new Blob([data], {type: 'image/jpeg'});
const imageResponse = new Response(imageBlob);
const stringResponse = new Response('Hello world');

Uygun üstbilgiyi ayarlayarak Response öğesinin MIME türünü ayarlayabilirsiniz.

  const options = {
    headers: {
      'Content-Type': 'application/json'
    }
  }
  const jsonResponse = new Response('{}', options);

Bir Response aldıysanız ve gövdesine erişmek istiyorsanız yardımcı olacak birkaç yöntem daha var. Her biri, çözümlenen bir Promise döndürür. farklı türde bir değer ile.

Yöntem	Açıklama
`arrayBuffer`	Gövdeyi içeren, şuna serileştirilmiş bir `ArrayBuffer` döndürür: bayt olarak kabul edilir.
`blob`	`Blob` döndürür. `Response` oluşturulduysa bir `Blob` ile o zaman bu yeni `Blob` de aynı türü. Aksi halde, `Content-Type` `Response` kullanılıyor.
`text`	Gövdenin baytlarını UTF-8 olarak kodlanmış bir dize olarak yorumlar.
`json`	Gövdenin baytlarını UTF-8 kodlamalı bir dize olarak yorumlar ve JSON olarak ayrıştırmaktır. Sonuçta ortaya çıkan nesneyi döndürür veya Dize JSON olarak ayrıştırılamıyorsa `TypeError`.
`formData`	Gövdenin baytlarını bir HTML formu olarak yorumlar: `multipart/form-data` veya `application/x-www-form-urlencoded`. Şunu döndürür: FormData nesnesini ifade eder veya veriler ayrıştırılamazsa bir `TypeError` gönderir.
`body`	ReadableStream döndürür. beden verileri.

Örneğin:

const response = new Response('Hello world');
const buffer = await response.arrayBuffer();
console.log(new Uint8Array(buffer));
// Uint8Array(11) [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]

Önbellekten alma

Önbellekteki bir öğeyi bulmak için match yöntemini kullanabilirsiniz.

const response = await cache.match(request);
console.log(request, response);

request bir dizeyse tarayıcı bunu çağırarak bir Request öğesine dönüştürür: new Request(request). İşlev,Promise eşleşen bir giriş bulunursa Response, aksi takdirde undefined.

İki Requests öğesinin eşleşip eşleşmediğini belirlemek için tarayıcı URL'den fazlasını kullanır. İki farklı sorgu dizeleri varsa bu istekler farklı olarak kabul edilir. Vary üstbilgileri veya HTTP yöntemleri (GET, POST, PUT vb.).

Bir seçenek nesnesini ikinci parametreden ibaret değildir.

const options = {
  ignoreSearch: true,
  ignoreMethod: true,
  ignoreVary: true
};

const response = await cache.match(request, options);
// do something with the response

Birden fazla önbelleğe alınan istek eşleşirse ilk oluşturulan istek geri döndü. Eşleşen tüm yanıtları almak istiyorsanız şunu kullanabilirsiniz: cache.matchAll().

const options = {
  ignoreSearch: true,
  ignoreMethod: true,
  ignoreVary: true
};

const responses = await cache.matchAll(request, options);
console.log(`There are ${responses.length} matching responses.`);

Kısayol olarak, caches.match() kullanarak tüm önbelleklerde aynı anda arama yapabilirsiniz her önbellek için cache.match() çağrısı yapıyor.

Aranıyor

Cache API, istekleri veya yanıtları aramak için bir yöntem sağlamaz (Response nesnesiyle eşleşen girişler hariç) Ancak, ya da dizin oluşturarak kendi aramanızı uygulayabilirsiniz.

Filtreleme

Kendi aramanızı uygulamanın bir yolu, tüm girişleri tekrarlamak ve istediklerinize göre filtreleyin. Tüm iletileri bulmak istediğinizi .png ile biten URL'lere sahip öğeler.

async function findImages() {
  // Get a list of all of the caches for this origin
  const cacheNames = await caches.keys();
  const result = [];

  for (const name of cacheNames) {
    // Open the cache
    const cache = await caches.open(name);

    // Get a list of entries. Each item is a Request object
    for (const request of await cache.keys()) {
      // If the request URL matches, add the response to the result
      if (request.url.endsWith('.png')) {
        result.push(await cache.match(request));
      }
    }
  }

  return result;
}

Bu şekilde, Request ve Response nesnelerinin herhangi bir özelliğini kullanarak ve girişleri filtreleyin. Büyük kümeler üzerinde arama yapıyorsanız bu dışı verilerdir.

Dizin oluşturma

Kendi aramanızı uygulamanın diğer yolu da, arama sorgusuna ilişkin ayrı bir dizin Dizin'de saklanabilecek ve dizinde depolanabilecek girişlerin sayısını gösterir. Böyle bir durumda, daha iyi performansa sahip olmak için tasarlanan IndexedDB'nin çok sayıda giriş vardır.

Aranabilir özelliklerin yanı sıra Request öğesinin URL'sini depoluyorsanız doğru önbellek girişini, aramayı yaptıktan sonra kolayca alabilirsiniz.

Öğe silme

Önbellekten bir öğe silmek için:

cache.delete(request);

Burada istek bir Request veya URL dizesi olabilir. Bu yöntem ayrıca cache.match ile aynı seçenekler nesnesi. Bu, birden fazla öğeyi silmenize olanak tanır Aynı URL için Request/Response çiftleri.

cache.delete('/example/file.txt', {ignoreVary: true, ignoreSearch: true});

Önbelleği silme

Bir önbelleği silmek için caches.delete(name) numaralı telefonu arayın. Bu işlev, Önbellek varsa ve silinmişse true olarak çözümlenen Promise veya Aksi takdirde false.

Teşekkürler

Bu makalenin orijinal halini yazan Mat Scales'e teşekkür ederiz. ilk kez WebFundamentals'ta yer aldı.