A guide to the Cache API
Quick guide on caching requests and their corresponding responses
The cache API provides a storage mechanism for request/ response object pairs. It allows you to cache resources like assets, images, javascript files, HTML, API responses.
It was initially created as part of service worker specification to cache requests and provide fast offline responses but it can also be used as general storage mechanism. We are going to cover some fundamentals of cache API in this post.
Check availability
caches object is directly available on the window object so we can check if it’s there or not by:
'caches' in window && console.log('available')Returns available if cache API is supported in the browser.
Open cache
Opening a cache is as simple as calling caches.open(‘cacheName’) which returns a promise resolved with the cache object.
caches.open('cacheName').then(cache => {
//make use of cache object now
})Note: It creates a new cache if the cache doesn’t exist already.
Checking if something in cache
cache.keys() can be used to get all the keys that are present in the cache. It returns a promise that resolves to an array of cache keys.
cache.keys().then(keys => {
//array of cache keys
})Adding to cache
Three methods to put something in the cache — add, addAll, put.
- cache.add(request)
Accepts the request URL, fetches it and adds the response to the cache.
const url = 'api/getPosts'
cache.add(url)2. cache.addAll(request)
Accepts an array of requests, fetches them and then adds their responses to the cache.
const urls = ['api/getPosts', 'api/getTodos']
cache.addAll(urls)3. cache.put(request)
Takes the request URL and caches its response. If the response already exists for the request URL, it gets overwritten with the new response.
const url = 'api/getSinglePost'
cache.put(url)Get item from cache
Cache API provides two methods for this: match, matchAll.
- cache.match(request)
Matches the first response in the cache to the request URL and return a promise resolving that.
const url = 'api/getSinglePost';
cache.match(url).then(response => {
//first matched response for the requested url
})2. cache.matchAll(requests)
This is similar to addAll in that it takes in an array of request URLs. Returns a promise resolving all responses for the provided requests.
const urls = ['api/getPosts', 'api/getTodos'];
cache.matchAll(urls).then(responses => {
//all responses that match to request urls
})Deleting item from cache
cache.delete() can be used to get rid of a request or an asset URL from the cache.
cache.delete('assets/icon.png')Deleting the entire cache
Takes in a cache key and deletes it entirely from the cache. Return a promise that resolves to true if the cache was deleted otherwise false is returned.
caches.delete('cacheName').then(status =>{
//whether cache deleted or not
})Conclusion
It’s also worth mentioning that the browser have a hard limit on the amount of cache storage that an origin can use. So make sure you are purging the cache entries over time.
Browser compatibility is as under:
A note In Plain English
Did you know that we have four publications and a YouTube channel? You can find all of this from our homepage at plainenglish.io — show some love by giving our publications a follow and subscribing to our YouTube channel!
