Chapter 3. Caching

 

Imagine you’re on a train using your mobile phone to browse your favorite website. Every time the train enters an area with an unreliable network, the website takes ages to load—an all-too-familiar scene. This is where Service Worker caching comes to the rescue. Caching ensures that your website loads as efficiently as possible for repeat visitors.

This chapter starts off by looking at the basics of HTTP caching and what happens under the hood when your browser navigates to a URL. We’ll also look closely at how you can use Service Worker caching to provide your users with a faster, more reliable website and how it works hand-in-hand with traditional HTTP caching. You’ll learn how you can use Service Worker caching in a real-world application, including versioning and precaching resources. Finally, you’ll discover one of my favorite Service Worker libraries: Workbox.

3.1. The basics of HTTP caching

Modern browsers are clever. They can interpret and understand a variety of HTTP requests and responses and are capable of storing and caching data until it’s needed. I like to think of the browser’s ability to cache information as the sell-by date on milk. In the same way you might keep milk in your fridge until it reaches the expiry date, browsers can cache information about a website for a set duration of time. After the data has expired, it will go and fetch the updated version. This ensures that web pages load faster and use less bandwidth.

3.2. The basics of caching Service Worker caching

3.3. Performance comparison: before and after caching

3.4. Diving deeper into Service Worker caching

3.5. Summary

sitemap