Cache API: Hızlı bir kılavuz

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

Pete LePage

Cache API, ağ isteklerini ve bunlara karşılık gelen yanıtları depolayan ve alan bir sistemdir. Bunlar, uygulamanızın çalışması sırasında oluşturulan normal istek ve yanıtlar olabilir veya yalnızca daha sonra kullanmak üzere verileri depolamak amacıyla oluşturulmuş olabilir.

Cache API, hizmet işçilerinin ağ hızından veya kullanılabilirliğinden bağımsız olarak hızlı yanıtlar sunabilmeleri için ağ isteklerini önbelleğe almaları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. API, global caches mülkü aracılığıyla kullanıma sunulur. Bu nedenle, basit bir özellik algılamayla 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.

Hangi veriler saklanabilir?

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

Ne kadar veri depolanabilir?

Özetle, çok. En az birkaç yüz megabayt, hatta yüzlerce gigabayt veya daha fazlası olabilir. Tarayıcı uygulamaları değişiklik gösterir ancak kullanılabilir depolama alanı 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 tek parametre olarak önbelleğin adını iletin. Adlandırılmış önbellek mevcut değilse oluşturulur. Bu yöntem, Cache nesnesi ile çözüldüğünde bir Promise döndürür.

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

Önbelleğe ekleme

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

cache.add

İlk olarak cache.add() var. Bir Request veya URL (string) parametresi alır. Ağa istek gönderir ve yanıtı önbellekte depolar. Getirme işlemi 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 kaynak arası isteklerin, 0 türünde bir status döndürdükleri için depolanamayacağını unutmayın. Bu tür istekler yalnızca put ile saklanabilir.

// 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

Ardından cache.addAll() var. add() işlevine benzer şekilde çalışır ancak bir dizi Request nesnesi veya URL'si (string) alır. Bu işlem, her istek için cache.add çağrılmasına benzer şekilde çalışır. Tek bir istek önbelleğe alınmazsa Promise ise isteği reddeder.

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

Bu durumların her birinde, yeni girişin üzerine eşleşen mevcut girişin yazılır. Bu işlemde, getirme bölümünde açıklanan eşleme kuralları kullanılır.

cache.put

Son olarak, ağdan bir yanıt depolamanıza veya kendi Response'unuzu oluşturup depolamanıza olanak tanıyan cache.put() vardır. İki parametre alır. İlki bir Request nesnesi veya URL (string) olabilir. İkincisi, ağdan veya kodunuz tarafından oluşturulan bir Response olmalıdır.

// Retrieve data.json from the server and store the response.