Service Workers in React
A brief guide to service workers in React
React is a Javascript library for building user interfaces. It is component based and allows the developer to create user interfaces with much more simplicity than with regular vanilla Javascript.
Want to read this story later? Save it in Journal.
React has a tool, create-react-app, that makes it easy to create a new React project from scratch. The create-react-app tool creates a default preconfigured project, ready to launch with npm start. A cool feature of this create-react-app tool is a default service worker file.
What are service workers?
A service worker is a script that your browser runs in the background, separate from a web page, which allows the use of features that don’t need a web page or user interaction. A current day example would be a push notification. Service workers allow engineers and developers end-to-end control over the user’s interactions with the app. A service worker enables you to run JavaScript before a page even exists, creates a faster site, and allows the ability to display content even if there is no internet connection.
(Prop)erties of service workers
Service workers are at the core of progressive web applications. Progressive web applications briefly explained, is a web app that uses modern web capabilities to deliver an app-like experience to users but, if you want to know more about PWA’s read more here. We know service workers run on an independent thread and allow for offline support functions where the user does not need to be online or using the app. Now, let's get into the properties or key traits of service workers:
- Runs in its own global script context, it is a Javascript file
- execute on a separate thread from the UI, therefore not directly tied a particular page
- Cannot access the DOM directly
- Is event-driven (only live while in use)
- Service Workers require HTTPS
Service Workers are powerful enough to hijack connections, fabricate, and filter responses. This is why they can only be enabled if the page is served using HTTPS. This ensures a level of security to allow the service worker to go through the network journey without tampering.
Since the service worker and UI are on separate threads, the service worker does not have direct access to the DOM. The service worker and the window can communicate via the postMessage method. This allows messages to be passed back and forth. This requires logic on each side (between the UI and the service worker)to process the messages and trigger different workflows.
How do we use service workers?
As I mentioned earlier React has a tool create-react-app which comes with preconfigured files. I created a simple app named my-app (I know how creative?) in the picture below you can see that when I clicked on my src folder it has a serviceWorker.js file in it.
The file is lengthy with code that handles the service worker lifecycle methods. The second function is the register function but by default your service worker is unregistered. If we go to the index.js file we find the service worker defaulted to the unregister method.
By changing the method from unregistered to registered you have a service worker feature set up! If you are working in a different environment and need to locally set up you can learn more about that and get instructions with this Google service worker documentation. By using the create-react-app tool we save ourselves writing out a lot of code on the service worker lifecycle. Below is a picture on what the service worker lifecycle looks like.
For my fellow visual learners.
Service workers are briefly explained in this blog but all the added documentation along with this additional resource goes much further into detail. At least now when you wake up and look at your phone with instagram notifying you who has liked your photo or CoStar giving you insight into the things going on with you based on astrological advice, you know service workers are in place allowing for those notifications to come through while you are off the app.
📝 Save this story in Journal.
👩💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.
