Extending Workbox

Write your own reusable, shareable strategies and plugins.

In this article, we’re going to take a quick tour of some ways of extending Workbox. By the end, you’ll be writing your own strategies and plugins, and hopefully sharing them with the world.

If you’re more of a visual person, you can watch a recording of a Chrome Dev Summit talk covering the same material:

What’s Workbox? 

At its core, Workbox is a set of libraries to help with common service worker caching scenarios. And when we’ve written about Workbox in the past, the emphasis has been on “common” scenarios. For most developers, the caching strategies that Workbox already provides will handle your caching needs.

The built-in strategies include stale-while-revalidate, where a cached response is used to respond to a request immediately, while the cache is also updated so that it’s fresh the next time around. They also include network-first, falling back to the cache when the network is unavailable, and a few more.

For instance, imagine that you want to implement a strategy that can handle multiple, simultaneous requests for the same URL by deduplicating them. A copy of the response is then used to fulfill all of the in-flight requests, saving bandwidth that would otherwise be wasted.

Here’s the code you can use to implement that, by extending the NetworkFirst strategy (which itself extends the Strategy base):

Default image
Lingaraj Senapati
Hey There! I am Lingaraj Senapati, the Co-founder of lingarajtechhub.com My skills are Freelance, Web Developer & Designer, Corporate Trainer, Digital Marketer & Youtuber.
Articles: 168

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply

nineteen − five =

Physical Address