Create React App (CRA) Service Worker redundant and too much network calls at first time

Asked
Active3 hr before
Viewed126 times

7 Answers

createreact
90%

I am using this serviceWorker and I am using Nginx to serve CRA. I got this redundant error and to much-failed network calls in (1606) network calls on first-time page load. when I refresh the page then there is no failed network calls and everything working fine ,now I have removed react-lazy-import from my project and chunks are making minimum, a redundant error has gone from service-worker and everything is working fine,And get REDUNDENT service worker error

Pretag
 Pretag team - issue, fix, solve, resolve
88%

They enable notification and push APIs, which are not available through traditional web technologies.,You can then proceed to create the custom service worker to cache a particular directory as shown below.,Service workers are scripts that are run by the browser. They do not have any direct relationship with the DOM. They provide many out of the box network-related features. Service workers are the foundation of building an offline experience. They enable features such as push notifications and background sync.

├──
README.md├── node_modules├── package.json├──.gitignore├── build├── public│├── favicon.ico│├── index.html│└── manifest.json└── src├── App.css├── App.js├── App.test.js├── index.css├── index.js├── logo.svg└── serviceWorker.js
load more v
72%

When a Service Worker is being installed for the first time, it runs through all these states directly until it's Activated.,registration.waiting refers to the new worker. We save this Service Worker in the state of the component to use it to skip waiting in the second step.,The part of the autogenerated service worker file that's most interesting to us is the following, which lets us tell the service worker to skip waiting and become active.

navigator.serviceWorker.register('/service-worker.js')
load more v
65%

These are great tools for developers to manage their development process. But it will not help the average consumer.,(You will still want to feature detect for service worker support before executing the following code.),You first option is to check the 'update on reload' option. When this is selected the browser will always load the service worker file from the source (web server) as if the file changed. This can be done in the tools Application tab. Select the Service Workers node in the Chrome and Opera developer tools and you will see the service worker for your site.

Pretag
 Pretag team - issue, fix, solve, resolve
75%

Optimizing code is the next level and an advanced topic and needed to ensure we deliver a quality product that lowers our footprint and loads our app faster, In this article, I will give you optimizing techniques…,By the end of this article, you will know how to precache, lazy loading, code splitting, tree shaking, prefetching, sprite splitting as well as dead code and side effects cleaning among other things for React App — and I am not double-talking with you.

Pretag
 Pretag team - issue, fix, solve, resolve
40%

In all, state references the condition of something at a particular point in time, such as whether a modal is open or not., When integrated into our store, our file looks something like this: , We return this updated state to our store, terminating the reducer function and preventing it from continuing any further:

Pretag
 Pretag team - issue, fix, solve, resolve
22%

This is a follow up to my previous post about building a PWA with create-react-app (CRA). In the linked post, I discussed how we could go about building a custom Service Worker (SW) while staying within the create-react-app shell.,Now, update your package.json file with a modification to the build command. Make your build command the following:,Install the library with yarn add sw-precache . Once you’ve done that, create a sw-precache-config.js file in your root directory. Here is my file:

First, inside of the registerServiceWorker.js file, look for the window.addEventListener('load') function call. The first line is a declaration for swUrl which says:

const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

Other "create-react" queries related to "Create React App (CRA) Service Worker redundant and too much network calls at first time"