What is service worker in react js

Question

When creating a react app, service worker is invoked by default. Why service worker is used? What is the reason for default invoking?

Answer 1

In simple and plain words, it’s a script that browser runs in the background and has whatsoever no relation with web pages or the DOM, and provide out of the box features. It also helps you cache your assets and other files so that when the user is offline or on slow network.

Some of these features are proxying network requests, push notifications and background sync. Service workers ensure that the user has a rich offline experience.

You can think of the service worker as someone who sits between the client and server and all the requests that are made to the server pass through the service worker. Basically, a middle man. Since all the request pass through the service worker, it is capable to intercept these requests on the fly.

Answer 2

You may not need a service worker for your application. If you are creating a project with create-react-app it is invoked by default

Service workers are well explained in this article. To Summarise from it

A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. Today, they already include features like push notifications and background sync and have ability to intercept and handle network requests, including programmatically managing a cache of responses.

In the future, service workers might support other things like periodic sync or geofencing.

According to this PR to create-react-app

Service workers are introduced with create-react-app via SWPrecacheWebpackPlugin.

Using a server worker with a cache-first strategy offers performance advantages, since the network is no longer a bottleneck for fulfilling navigation requests. It does mean, however, that developers (and users) will only see deployed updates on the "N+1" visit to a page, since previously cached resources are updated in the background.

The call to register service worker is enabled by default in new apps but you can always remove it and then you’re back to regular behaviour.

Answer 3

I'd like to add 2 important considerations about Service Workers to take into account:

1. Service Workers require HTTPS. But to enable local testing, this restriction doesn't apply to localhost. This is for security reasons as a Service Worker acts like a man in the middle between the web application and the server.

2. With Create React App Service Worker is only enabled in the production environment, for example when running npm run build.

Service Worker is here to help developing a Progressive Web App. A good resource about it in the context of Create React App can be found in their website here.