Where is the Service Worker in a Create React App (CRA)

This video covers where and how to find the Service Worker when you spin up a Create React App (CRA). You will also be able to test the offline mode and caching of local assets.

Full Transcript

If you ever wondered where the heck is my service worker, when spinning up a create react app (CRA)? Here is the answer.

There is a workbox Webpack plugin called GenerateSW that comes integrated with the production build of the CRA. When you build a project using npm run build command, this plugin generates a service worker, pre-cache all your local assets at the time service worker is installed, including any HTML, JavaScript, CSS, or images. Whenever you update your code base with any of these assets and then rebuild the project, the plugin updates, the cache. Workbox also adds a route so that it can respond to fetch events, which means it adds a fetch listener to the service worker that responds to the network request. The service worker generated by the workbox plugin in your create react app uses, cache-first strategy, which means the app is offline-first, and the service worker intercept the network request and serve those requests from the cache first. If data is not found in cache, then fall back to network and send back the response. It ensures that your web app is consistently fast, even on slow or unreliable networks. Let's do a quick demo. We will spin up a CRA here, go to the terminal and use the command, npx create-react-app. Let's name the app, sw-magic.

Now we have the app ready, open this app in your code editor, and you will see the service worker file. By the way, this is not a service worker. It's a file containing JavaScript code to register and unregister a service worker. Here is a function, if called will register a service worker. And this unregister function, will unregister a service worker for this app. If you go to your index.js file inside the src directory, you will see that by default, the service worker is not registered. So let's first register the service worker by calling register method on it.

Next, we will go to the command line inside the root of the project directory and create a build using npm run build. Now the build is ready, we need a server. So go ahead and install the dependency for serve using yarn global add serve. It lets you serve the static content on the client side. Now, once the dependency is added globally, each time you generate a new build, you can deploy this app using simple command serve -s build. It gives you this http localhost URL, where the app is now hosted. So head onto your Chrome and open an incognito window, hit this URL and you can open dev tools using Command + Option + I on your Mac. Go to the Application Panel, service worker, and you will see that there is an active and running service worker for this domain. This is your service worker. If you go to the cache storage and click on this workbox pre-cache, you will see all these files that are pre-cached for you without having you to write even a single line of code.

So what workbox caches all URL addressable resources for your app so that it can work in offline mode too. Any file you add inside your src directory will be pre-cached and available here. If you would like to quickly test this offline capability, then go to the network tab and select offline. Now refresh your app as many times as you want, it will still serve this content from the cache. If you come back to your code editor and look inside the build directory, you will find the service worker file. This is the service worker that gets generated when you create a production build. And remember one thing, that service worker won't register if you simply run your project using yarn start and go to the browser at localhost:3000 in a hope that you would find a service worker. This is because service worker registration only happens at the time of creating a production build. I hope you found this useful. Thanks for watching.