In Web Applications, you can cache resources to make them available offline, store them for later use, or provide faster response times. The Web Cache API is a part of the service workers' mechanism and is used to cache resources.
Cache API allows service workers to control content caching. Service workers are simply scripts that do not need a web page and run in the background. Even though Cache API is a part of the service worker spec, you can use it separately without service workers.
Cache API is ideal for storing URL addressable resources only. Conversely, IndexedDB API is more suited for holding application states, user input, and large files.
The Cache API enjoys support from all modern browsers, including Chrome, Firefox, Edge, Opera, and Safari. Older browsers like Internet Explorer do not support it.
You can quickly check for browser support using the following snippet:
js
if ('caches' in window) {// Do something with caches here}
You can use the Cache API for caching resources through the following four functions:
Let's go over these functions one at a time.
Before caching resources, we need to create a new cache object in the browser's cache storage. We use the caches.open()
for doing that.
js
if ('caches' in window) {caches.open('cache-name');}
This method creates a new cache if the specified cache doesn't exist.
The open()
method returns a promise, which resolves into a cache object. You can add resources to this cache object by using any of the following ways:
add()
Makes a fetch request according to the given URL/Request object and stores its response.addAll()
Makes fetch requests for more than one resource.put()
Gives more control by allowing custom key-value pairs in the response.Use the interactive component below to cache a mock request to an API using the add()
method.
Once you submit, go to Application > Cache > Cache Storage in the Chrome DevTools. You will see the cached response stored in the cache object you created.
Cache API offers the match()
method to retrieve items stored in a cache. It takes a single parameter: a resource URL or a complete request object. It then matches the parameter with resources present in that cache and returns it.
Check out the following interactive component, which retrieves the cached response in JSON. If you created a cache above, don't forget to use the same name here.
You can delete items in a cache using the following snippet:
js
cache.delete(request);
If you want to delete the cache object completely, you can do it as follows. Specify the name of the cache you created above and submit; you will see in the DevTools that the cache has been deleted.
This guide was a brief tour of the Cache API, and we hope that now you can use Cache API in your awesome projects.