5 Service Worker Caching Strategies for Your Next PWA App

“A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction. Today, they already include features like push notifications and background sync . In the future, service workers might support other things like periodic sync or geofencing.” — The Offline Cookbook

In this blog post, I’ll focus on another exciting service workers feature — intercepting and caching network requests.

Caching is one of the most exciting features of SWs. It enables us to deliver our users with a responsive and stable native-app-like experience. A web app can display some content, and perform some function, in bad network conditions and even when the user is completely offline.

We’ll cover five different caching strategies. We’ll see how and when you should implement each of them.

• Stale-While-Revalidate
• Cache first, then Network
• Network first, then Cache
• Cache only
• Network only

I’ll address each strategy with an example to help you better understand it. You will also learn when and where to use them in your PWAs, and some assets you can use them with.