What is service worker in react js
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.
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 likepush notifications
andbackground sync
and haveability to intercept and handle network requests
, includingprogrammatically managing a cache of responses
.In the future, service workers might support other things like
periodic sync
orgeofencing
.
According to this PR to create-react-app
Service workers
are introduced with create-react-app viaSWPrecacheWebpackPlugin
.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.