Friday Knowledge
Published in

Friday Knowledge

Supercharge Caching with Service Workers

This week I learned how to cache API calls using a Service Worker

Most website owners face a challenge of keeping users around for a long time. One solution to this challenge is removing any experience that bores the user, such as long site loading times.

For example, this book-reading website displays Unsplash images on every page of each book. Reading a book means waiting for Unsplash requests every time a reader moves from one page to the other.

As you can notice, this waiting can discourage readers from using the site.

So, we’re going to reduce the time spent on Unsplash requests, using a service worker.

Scenario

We are going to focus on one book and make an assumption that a reader always reads the book from start to finish. This means that they have to access each page of the book.

https://tale.ubwenge.org/tales/135

This book has a list of pre-defined tags that get used when fetching images.

Behind the scene, the website makes two calls to Unsplash for each book page visit. One API call to get image URL using the tag, and another call to retrieve image data.

Service Worker Overview

There is a good article that explains Service workers in detail. You can read more about what the Service Worker can there. For the purpose of this post, we are interested in its network management usage.

Service worker is a programmable network proxy, allowing you to control how network requests from your page, are handled.

Listening for network requests

Once a Service worker is registered, it can listen to all requests made by the site through afetch event.

Structure of a service worker

For our use case, we are only interested in Unsplash requests.

Each Unsplash request will have a custom header that contains all tags for the book being read. We will then use this header to fetch image URL’s for all tags in a non-blocking manner.

Main request
Related requests

With this service worker in place, we fetch all image URL’s while allowing reader to continue reading the book.

NOTE that this approach of storing image URL’s beforehand can be applied to any network request that has some known relationship with other requests that the user has already made.

For our use case, the tags used to fetch images, are known when the reader starts reading the book.

Conclusion

Service workers can help web developers drastically improve user experience of a website by making use of predictable patterns in the website’s content.

Resource

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Marcellin Nshimiyimana

Marcellin Nshimiyimana

Always debugging, because problem knowledge equals half the solution!