How do you create a custom Service Worker with Create React App without ejecting?

This is a question I had recently when I wanted to turn my React app built with Create React App into a Progressive Web App.   Create React App is a tool used to spin up a React application quickly and manage builds easily;  While Create React App comes with a built in Service Worker and some PWA functionality out of the box, there are limitations on how to manipulate it if you want more control to do things like implement a custom dynamic caching strategy and custom routing.

The problem is that in order to write your own custom Service Worker for an app made with Create React App (which uses Workbox to generate it’s service worker) typically you need to eject from CRA and configure Webpack and the application to handle your own implementation.  Of course, if you eject, then you lose some of the zero configuration and management benefits that CRA provides, so I wanted to find a way to write my own custom service worker without having to eject.

It turns out there are a number of ways to  do this and it is possible, but the documentation and resources available for the approaches were somewhat complicated, confusing/difficult to follow, disparate and missing steps or incomplete.  So I spent a considerable amount of time trying out different solutions, most of which did not work for me.  Finally, after a lot of trial and error and frustration, I found a method that worked and was simple to implement.

I thought it would be helpful to make a video tutorial/course on how to do it based on everything I found and learned, so I created one on how to get this accomplished which is now available on Udemy.  I spent a lot of time trying to make the course easy to follow, short and as helpful and clear as possible.   Here is an overview of the course:

Get the Full Course Here

For a limited time the course is on sale through February 12, 2021.

You can check out more sample lectures on my YouTube Channel to get a taste of what’s in the course.

My hope is that it will save people a lot of time and frustration who want to make their own Service Worker in an app made with Create React App without having to eject.