This tutorial covers what you need to know about using service workers to build a progressive web app (PWA) with create-react-app (CRA). We’ll start by explaining PWAs, then discuss what a service worker is, and finally, review the steps to setting up service workers for a CRA.
About progressive web applications
A progressive web app is an enhanced type of web app that has some of the same capabilities as a native or platform-specific app.
For example, progressive web apps can be installed directly on a user’s home screen and can run in a standalone window. These apps run fast and reliably under poor network conditions and can even function offline.
Think of how your typical mobile user moves through changing environments while using your app. They might start out in a building that has a reliable high-speed network — great. Then they walk out to the street, where they lose wifi and fall back to cellular connectivity.
They might catch a strong 4G or even 5G signal … or they might hit a low-service dip that only has 3G. How can they stay on your app in all network conditions, even when they have no connectivity at all?
A progressive web app lets you reach your users wherever they are and serve them fast and reliable user experiences in any network environment.
What is a service worker?
A service worker is a special type of web worker that intercepts network requests from a web app and controls how these requests are handled. In particular, the service worker can manage the caching of resources and retrieval of these resources from the cache, thereby supporting the offline-first mode that’s crucial for PWAs.
Service workers provide essential support for running a progressive web application.
Setting up service workers for create-react-app
There are a couple of things you need to do before getting started:
- Make sure you’re using create-react-app 4 or later
- Make sure your production web server supports HTTPS
Tip: Service workers and progressive web app features will only run over HTTPS for security reasons. Users can still run your app over HTTP, but they won’t have access to offline-first mode and all the other great features made possible by service workers.
We’re ready now to dive into the setup process.
1.) Create a project and add a
To leverage CRAs integration with Workbox’s InjectManifest plug-in, all you need to do is create a new project using a custom PWA template:
npx create-react-app my-app --template cra-template-pwa
The template automatically adds a
src/service-worker.js file to your project. This file contains a basic service worker that you can come back to later and customize to your liking.
npx create-react-app my-app --template cra-template-pwa-typescript
2.) Register the service worker
By default, service workers don’t become active and available for use until you register them. To learn more, you can read up on the fundamentals of the service worker life cycle.
Go to the
src/index.js file in your project and find these lines:
// If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://cra.link/PWA serviceWorker.unregister();
To register the service worker for use, simply modify the last line so that it looks like this:
src/service-worker.js file is now registered and ready to play its key role in providing an offline-first experience for your users.
3.) Customize the service worker
src/service-worker.js file that you added using the
cra-template-pwa-typescript template comes with the basic logic for underpinning your progressive web app. If you want to expand the offline-first capabilities of your app, you can easily customize
Tip: To support pre-caching, make sure that you assign the
self.__WB_MANIFEST value to a variable that can be recognized by the InjectManifest plug-in. The plugin needs to see this value in order to generate its manifest of URLs for pre-caching.
Some examples of how you can customize the
src/service-worker.js file include:
- Using additional service worker packages from Workbox
- Adding push notifications
- Fine-tuning background data synchronization
- Centralizing updates to shared geolocation or gyroscope data
- Adding the ability to handle traffic originating from a different domain
As the Service Worker API continues to evolve, you can look forward to being able to support even more features and use cases with your PWAs.
4.) Help users navigate your progressive web app
Now that you’ve configured your project to support service workers, it’s time to make sure your users are ready and able to take full advantage of offline-first mode. Since progressive web apps behave a little differently from standard web apps, it’s a good idea to educate your users so that they can make the most of their experience.
You can help your users by showing in-app messages that remind them to:
- Use a browser that supports service workers — like Chrome, Firefox, Opera, Samsung Internet, Safari, or Edge. (Note: service workers aren’t supported by any browser when in private or incognito mode).
- Be aware of when the app is working offline. Once the service worker has initially populated the caches, show your users a message informing them that the app can now be used offline.
- Close existing browser tabs to see the latest updates. By default, a service worker is kept on standby after it fetches content updates. As a result, users won’t be able to see the changes until after they close all open tabs and load a fresh page.
Turning your standard web app into a PWA is no sweat, thanks to create-react-app’s robust integration with Workbox. Once you set up service workers to support an offline-first user experience, your app will be able to reach more users on-the-go, wherever they happen to be.
LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.
The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.
Modernize how you debug your React apps — start monitoring for free.