Uygulama verilerinizi çevrimdışı kullanılabilir hale getirmek için Cache API'yi nasıl kullanacağınızı öğrenin.
Cache API, ağ isteklerini ve bunlara karşılık gelen yanıtları depolayıp almak için kullanılan bir sistemdir. Bunlar, uygulamanızı çalıştırırken düzenli istekler ve yanıtlar veya yalnızca verileri daha sonra kullanmak üzere depolamak amacıyla oluşturulabilir.
Cache API, hizmet çalışanlarının ağ hızından veya kullanılabilirliğinden bağımsız olarak hızlı yanıt verebilmek için ağ isteklerini önbelleğe almasını sağlamak amacıyla oluşturulmuştur. Ancak API, genel bir depolama mekanizması olarak da kullanılabilir.
Nerelerde kullanılabilir?
Cache API, tüm modern tarayıcılarda kullanılabilir. Global caches
özelliği aracılığıyla gösterilir. Böylece basit bir özellik algılama ile API'nin varlığını test edebilirsiniz:
const cacheAvailable = 'caches' in self;
Cache API'ye bir pencereden, iFrame'den, çalışandan veya hizmet çalışanından erişilebilir.
Depolanabilecek içerikler
Önbellekler yalnızca Request
ve Response
nesne çiftlerini, sırasıyla HTTP isteklerini ve yanıtlarını temsil eder. Ancak istekler ve yanıtlar, HTTP üzerinden aktarılabilen her türlü veriyi içerebilir.
Ne kadar depolanabilir?
Kısacası, büyük miktarda, en az birkaç yüz megabayt ve potansiyel olarak yüzlerce gigabayt veya daha fazla boyut. Tarayıcı uygulamaları değişiklik gösterir, ancak kullanılabilir depolama alanı miktarı genellikle cihazdaki kullanılabilir depolama alanına bağlıdır.
Önbellek oluşturma ve açma
Bir önbelleği açmak için caches.open(name)
yöntemini kullanın ve önbelleğin adını tek parametre olarak iletin. Adlandırılmış önbellek yoksa yeni bir önbellek oluşturulur. 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. Request
veya URL (string
) olmak üzere tek bir parametre alır. Ağa istek gönderir ve yanıtı önbellekte depolar. Getirme 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ı istekler, 0
status
döndürdükleri için depolanamaz. 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'den (string
) oluşan bir dizi alır. Bu işlem, her bir istek için cache.add
çağrısına benzer şekilde çalışır. Tek bir istek önbelleğe alınmazsa Promise
bu isteği reddeder.
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 işlem, retrieving bölümünde açıklanan eşleşme kurallarını kullanır.
cache.put
Son olarak, ağdan gelen bir yanıtı veya kendi Response
öğenizi oluşturup depolamanıza olanak tanıyan cache.put()
bulunur. İki parametre gerekir. İlki, bir Request
nesnesi veya bir URL (string
) olabilir.
İkincisi, ağdan veya kodunuz tarafından oluşturulmuş bir Response
olmalıdır.
// 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ın durum kodunun 200 aralığında olmadığı diğer yanıtları depolamanıza olanak tanır. Böylece, aynı istek için daha önceki
yanıtların üzerine yazılır.
İ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 kurucusu; Blob
, ArrayBuffer
, FormData
nesneleri ve dizeler dahil birçok veri türünü kabul eder.
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 kullanabileceğiniz birkaç yardımcı yöntem vardır. Her biri farklı türde bir değerle çözümlenen bir Promise
döndürür.
Yöntem | Açıklama |
---|---|
arrayBuffer |
Gövdeyi içeren, baytlara serileştirilmiş bir ArrayBuffer döndürür.
|
blob |
Blob döndürür. Response , Blob ile oluşturulduysa bu yeni Blob aynı türde olur. Aksi takdirde Response öğesinin Content-Type öğesi kullanılır.
|
text |
Gövdenin baytlarını UTF-8 olarak kodlanmış bir dize olarak yorumlar. |
json |
Gövdenin baytlarını UTF-8 olarak kodlanmış dize olarak yorumlar ve ardından JSON olarak ayrıştırmaya çalışır. Sonuçta ortaya çıkan nesneyi döndürür veya dize JSON olarak ayrıştırılamazsa bir TypeError gönderir.
|
formData |
Gövdenin baytlarını multipart/form-data veya application/x-www-form-urlencoded olarak kodlanmış bir HTML formu olarak yorumlar. FormData nesnesini döndürür veya veriler ayrıştırılamazsa TypeError hatası verir.
|
body |
Gövde verileri için bir ReadableStream döndürür. |
Ö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ı new Request(request)
yöntemini çağırarak bunu bir Request
öğesine dönüştürür. İşlev, eşleşen bir giriş bulunursa Response
, aksi halde undefined
olarak çözümlenen bir Promise
döndürür.
İki Requests
öğesinin eşleşip eşleşmediğini belirlemek için tarayıcı URL'den fazlasını kullanır. İki istek farklı sorgu dizelerine, Vary
başlıklarına veya HTTP yöntemlerine (GET
, POST
, PUT
vb.) sahipse farklı olarak kabul edilir.
Bir options nesnesini ikinci parametre olarak ileterek bunların bazılarını veya tümünü yoksayabilirsiniz.
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 döndürülür. 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, her önbellek için cache.match()
çağrısı yapmak yerine caches.match()
kullanarak tüm önbelleklerde aynı anda arama yapabilirsiniz.
Aranıyor
Cache API, bir Response
nesnesiyle eşleşen girişler dışında istekleri veya yanıtları aramak için bir yöntem sağlamaz. Ancak, filtre kullanarak veya bir dizin oluşturarak kendi aramanızı uygulayabilirsiniz.
Filtreleme
Kendi aramanızı uygulamanın bir yolu, tüm girişleri tekrarlamak ve istediklerinizi filtrelemektir. URL'leri .png
ile biten tüm öğeleri bulmak istediğinizi varsayalım.
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, girişleri filtrelemek için Request
ve Response
nesnelerinin herhangi bir özelliğini kullanabilirsiniz. Büyük veri kümelerinde arama yapıyorsanız bu işlemin yavaş olduğunu unutmayın.
Dizin oluşturma
Kendi aramanızı uygulamanın diğer yolu, aranabilecek ayrı bir giriş dizini tutmak ve IndexedDB'de dizini depolamaktır. IndexedDB'nin bu işlem için tasarladığı işlem türü olduğundan, çok sayıda girişle daha iyi performans gösterir.
Request
öğesinin URL'sini aranabilir özelliklerle birlikte depolarsanız aramayı yaptıktan sonra doğru önbellek girişini 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 nesnesini alır. Böylece aynı URL için birden fazla Request
/Response
çiftini silebilirsiniz.
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
ya da aksi halde false
şeklinde çözümlenen bir Promise
döndürür.
Teşekkürler
Bu makalenin ilk olarak WebFundamentals'ta yayınlanan orijinal sürümünü yazan Mat Scales'e teşekkür ederiz.