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.
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,
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
npx create-react-app. Let's name the app,
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.
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
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.