Nerd For Tech
Published in

Nerd For Tech

Custom Service Worker in any app with esbuild

Lately I’ve been exploring use of Service Workers in web apps. Use cases include prefetching content at scale, speeding up your website, handling failovers and possibly many more. One of the problems that I continuously face is the need to adjust my service worker according to the framework, well no more. Let’s see what gold I dig up last week below 👇🏻

Where it started?

I was trying to set up a custom service worker with Angular 11, and the guide asked me to install angular/pwa module, read and then adapt to the angular’s way of creating service worker. Well, seemed like a lot of work to me, so I set out to create a framework-agnostic process for adding a custom service worker. Reflecting back, I think it was fairly easier with Vue 2 and 3, yet felt like a hacky way.

(What is a Service Worker?)

Show me the solution!

Step 0. Install esbuild

Step 1. Create workbox-config.js:

Learn more about what’s there in workbox config here:

Step 2. Create compile_sw.js:

Step 3. Compile and inject:

Step 4. Register the Service Worker

That’s all, enjoy! I hope this helps!





NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit

Recommended from Medium

Solved — Error message “error:0308010C:digital envelope routines::unsupported”

Integrating ReactJS application with Sitecore using Sitecore-JSS (Sitecore-first approach)

Make A Game Using Classes

Strict Parent vs Understanding Parent and Javascripts Flexibility.

How to Build Missing Features on Websites with Javascript & Chrome Console

Angular by Failure: PART 1

React styling made easy with Styled Components

8 Things You Can Do With Destructuring in JavaScript

Buzz Lightyear waving

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
Rishi Raj Jain

Rishi Raj Jain

Solutions Engineer @Layer0 by Limelight | @Storyblok Ambassador | Ex-SWE @dpschool_io ✨

More from Medium

Pros and Cons of ReactJS Web Application Development

Implementing a Countdown Element in a Quick App

Push messages to browser notifications

Understanding Local State with React Hooks