Önbellek API’si: Hızlı bir kılavuz

bu Önbellek API’sı ağ isteklerini ve bunlara karşılık gelen yanıtları depolamak ve almak için bir sistemdir. Bunlar, uygulamanızın çalıştırılması sırasında oluşturulan normal istekler ve yanıtlar olabilir veya yalnızca verileri daha sonra kullanmak üzere depolamak amacıyla oluşturulmuş olabilir.

Önbellek API’si, hizmet çalışanlarının, ağ hızından veya kullanılabilirliğinden bağımsız olarak hızlı yanıtlar verebilmeleri için ağ isteklerini önbelleğe almalarını sağlamak için oluşturuldu. Ancak API, genel bir depolama mekanizması olarak da kullanılabilir.

Nerede mevcut? #

Önbellek API’sı şurada mevcuttur: tüm modern tarayıcılar. Küresel aracılığıyla açığa çıkar caches özelliği, böylece basit bir özellik tespiti ile API’nin varlığını test edebilirsiniz:

const cacheAvailable = 'caches' in self;

Önbellek API’sine bir pencereden, iframe’den, çalışandan veya hizmet çalışanından erişilebilir.

Ne saklanabilir #

Önbellekler yalnızca çiftleri saklar Request Ve Response sırasıyla HTTP isteklerini ve yanıtlarını temsil eden nesneler. Ancak istekler ve yanıtlar, HTTP üzerinden aktarılabilen her türlü veriyi içerebilir.

Ne kadar saklanabilir? #

Kısacası, çok fazla, en az birkaç yüz megabayt ve potansiyel olarak yüzlerce gigabayt veya daha fazlası. Tarayıcı uygulamaları değişiklik gösterir, ancak kullanılabilir depolama miktarı genellikle cihazda bulunan depolama miktarına bağlıdır.

Önbellek oluşturma ve açma #

Bir önbelleği açmak için, caches.open(name) önbelleğin adını tek parametre olarak ileten yöntem. Adlandırılmış önbellek yoksa oluşturulur. Bu yöntem bir döndürür Promise ile çözen Cache nesne.

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

Önbelleğe ekleme #

Önbelleğe öğe eklemenin üç yolu vardır – add, addAllVe put. Her üç yöntem de a döndürür Promise.

cache.add #

İlk olarak, var cache.add(). Bir parametre alır, ya bir Request veya bir URL (string). Ağa bir istekte bulunur ve yanıtı önbellekte saklar. Alma başarısız olursa veya yanıtın durum kodu 200 aralığında değilse, hiçbir şey depolanmaz ve Promise reddeder. CORS modunda olmayan kaynaklar arası isteklerin, bir a döndürdükleri için depolanamayacağını unutmayın. status ile ilgili 0. Bu tür istekler yalnızca ile saklanabilir put.

// 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, var cache.addAll(). Benzer şekilde çalışır add()ancak bir dizi alır Request nesneler veya URL’ler (stringS). Bu, aramaya benzer şekilde çalışır cache.add hariç, her bir bireysel istek için Promise tek bir istek önbelleğe alınmamışsa reddeder.

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

Bu durumların her birinde, yeni bir giriş, eşleşen herhangi bir mevcut girişin üzerine yazar. Bu, bölümünde açıklanan eşleştirme kurallarının aynısını kullanır. alma.

cache.put #

Son olarak, var cache.put()ağdan bir yanıt depolamanıza veya kendi yanıtınızı oluşturup depolamanıza olanak tanır Response. İki parametre alır. İlki ya olabilir Request nesne veya bir URL (string). ikincisi bir olmalı Responseağdan veya kodunuz tarafından oluşturulmuş.

// 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');

bu put() yöntem her ikisinden de daha izin vericidir add() veya addAll(), ve CORS olmayan yanıtları veya yanıtın durum kodunun 200 aralığında olmadığı diğer yanıtları saklamanıza izin verir. Aynı istek için önceki yanıtların üzerine yazacaktır.

İstek nesneleri oluşturma #

Oluştur Request depolanan şey için bir URL kullanan nesne:

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

Yanıt nesneleri ile çalışma #

bu Response nesne yapıcısı, aşağıdakiler de dahil olmak üzere birçok veri türünü kabul eder: BlobS, ArrayBufferS, FormData nesneler ve dizeler.

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

MIME türünü ayarlayabilirsiniz. Response uygun başlığı ayarlayarak.

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

Eğer bir Response ve vücuduna erişmek istiyorsanız, kullanabileceğiniz birkaç yardımcı yöntem vardır. Her biri bir döndürür Promise bu, farklı türde bir değerle çözümlenir.

Yöntem	Tanım
arrayBuffer	bir döndürür ArrayBuffer gövdeyi içeren, bayt olarak serileştirilmiş.
blob	bir döndürür Blob. Eğer Response ile oluşturuldu Blob o zaman bu yeni Blob aynı tipe sahiptir. Aksi takdirde, Content-Type arasında Response kullanıldı.
text	Gövde baytlarını UTF-8 kodlu bir dize olarak yorumlar.
json	Gövde baytlarını UTF-8 kodlu bir dize olarak yorumlar ve ardından onu JSON olarak ayrıştırmaya çalışır. Ortaya çıkan nesneyi döndürür veya bir TypeError dize JSON olarak ayrıştırılamazsa.
formData	Gövdenin baytlarını şu şekilde kodlanmış bir HTML formu olarak yorumlar: multipart/form-data veya application/x-www-form-urlencoded. bir döndürür FormData nesne veya fırlatır TypeError veriler ayrıştırılamıyorsa.
body	bir döndürür Okunabilir Akış vücut verileri için.

Ö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öntem.

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

Eğer request tarayıcının onu bir diziye dönüştürdüğü bir dizedir. Request arayarak new Request(request). işlev bir döndürür Promise bu bir çözer Response eşleşen bir giriş bulunursa veya undefined aksi takdirde.

belirlemek için iki Requests eşleşirse, tarayıcı yalnızca URL’den daha fazlasını kullanır. Farklı sorgu dizeleri varsa iki istek farklı kabul edilir, Vary başlıklar veya HTTP yöntemleri (GET, POST, PUTvesaire.).

Bir options nesnesini ikinci parametre olarak ileterek bunların bazılarını veya tümünü yok sayabilirsiniz.

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ınmış istek eşleşirse, ilk oluşturulan istek döndürülür. geri almak istiyorsanız Tümü eşleşen yanıtlar, 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 kullanarak tüm önbelleklerde aynı anda arama yapabilirsiniz. caches.match() aramak yerine cache.match() her önbellek için.

Aranıyor #

Önbellek API’si, eşleşen girişler dışında istekleri veya yanıtları aramak için bir yol sağlamaz. Response nesne. Ancak, filtreleme kullanarak veya bir dizin oluşturarak kendi aramanızı gerçekleştirebilirsiniz.

Filtreleme #

Kendi aramanızı gerçekleştirmenin bir yolu, tüm girişleri yinelemek ve istediklerinize göre filtrelemektir. Diyelim ki URL’leri ile biten tüm öğeleri bulmak istiyorsunuz. .png.

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, herhangi bir özelliği kullanabilirsiniz. Request Ve Response girişleri filtrelemek için nesneler. Büyük veri kümeleri üzerinde arama yapıyorsanız bunun yavaş olduğunu unutmayın.

indeks oluşturma #

Kendi aramanızı gerçekleştirmenin diğer bir yolu, aranabilen ve dizini IndexedDB’de depolayan ayrı bir giriş dizini tutmaktır. Bu, IndexedDB’nin tasarlandığı türden bir işlem olduğundan, çok sayıda girişle çok daha iyi performans gösterir.

URL’sini saklarsanız, Request aranabilir özelliklerin yanı sıra, aramayı yaptıktan sonra doğru önbellek girişini kolayca alabilirsiniz.

Bir öğeyi silme #

Önbellekten bir öğeyi silmek için:

cache.delete(request);

İstek nerede olabilir? Request veya bir URL dizesi. Bu yöntem ayrıca aynı seçenekler nesnesini alır. cache.matchbirden fazla silmenize izin veren Request/Response aynı URL için çiftler.

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

Önbelleği silme #

Bir önbelleği silmek için arayın caches.delete(name). Bu işlev bir döndürür Promise çözen true önbellek varsa ve silinmişse veya false aksi takdirde.

Teşekkürler #

İlk olarak WebFundamentals’ta yayınlanan bu makalenin orijinal versiyonunu yazan Mat Scales’e teşekkürler.