Cache API in Javascript

Cache API using JavaScript By Visionfortech

In this article i am going to show that how we can add,update,delete,retrive (CRUD operations) api urls and it's responses into cache so that our application will execute in more faster manner.

First step is we have to check weather our browser is supporting cache API or not. So now everyone will have a question like how we can check that ? So below is the answer for that.

Detect whether browser supports Cache API or not 

if ('caches' in window) {
      // Means your browser is supporting cache API
}else{
	// Please upgrade your browser because cache APIs are not supported
}

If your browser has suppor of cache API then let's go ahead and create cache

Create a Cache 

caches.open('visionfortech-cache').then(function(cacheInJS) {
  // It will return a promise and a object of cache which was either existed or created
 // before caches.open JS call
});

Since we have created a cache now let's go ahead and try to add one or all URLs to cache.

Adding API URLs and it's response into Cache 

let URLs_to add = [ "/api/visionfortech_cache_api_Test1","api/visionfortech_cache_api2"]
let single_url = "api/visionfortech_cache_api1";

// Adding a single URL to cache

caches.open('visionfortech-cache').then(function(cacheInJS) {
  cacheInJS.add(single_url );  // URL will be fetched and cached
});

// Adding multiple URL to cache

caches.open('visionfortech-cache').then(function(cacheInJS) { 
  cacheInJS.addAll(URLs_to add)
    .then(function() { 
      // Multiple URLs will be fetched and cached
    });
});

Since we have created a cache and added some URLs now let's go ahead and try to update the response of particular URL's response.

Update response of URL into Cache

fetch('api/visionfortech_cache_api1').then(function(response) {
  return caches.open('visionfortech-cache').then(function(cacheInJS) {
    return cacheInJS.put('api/visionfortech_cache_api1', response);
    // It will update the response for api/visionfortech_cache_api1 URL.
  });
});

Till now we have seen how to create a cache and how to add API URLs and it's responses and how to update API response into Cache in case of change. So now let's go ahead and look at how we can retrieve the URLs which are cached and it's respective reponse object.

Retrive URLs and it's response from Cache

// Retrieve API URLs from cache like how many APIs we have stored in cache

caches.open('visionfortech-cache').then(function(cacheInJS) { 
  cacheInJS.keys().then(function(cached_requests) { 
    console.log(cached_requests); 
	// It will return array of cache API URLs
  });
});

// Retrieve particular API response from Cache

caches.open('visionfortech-cache').then(function(cacheInJS) { 
  cacheInJS.match('api/visionfortech_cache_api1').then(function(response) {
    console.log(response);
  });
});

So Now let's see how we can delete/clear our cache.

Delete a Cache 

caches.delete('visionfortech-cache').then(function(cacheInJS) {
  // It will delete/clear the visionfortech-cache
});

Hope you enjoyed the article and it got added something new to your knowledge.

To Learn more about Javascript Javascript Treasure.

To add something new every-time into your mind stay tuned to visionfortech.