CRA 4 does not generate service-worker on build

[a-tonchev]

After updating react-scripts to version 4 I don't have any more service worker in the build directory.

Manifest is still there

[a-tonchev]

Okay, I figured out that there is a change regarding this.

https://create-react-app.dev/docs/making-a-progressive-web-app/

Since CRA 4 the service worker is opt-in, so if someon want to update from older versions, need to create by himself service worker.

The easyest way is like this:

1 Create somewhere on your computer a new CRA with the service worker template:

npx create-react-app my-app --template cra-template-pwa

2 Copy the service-worker.js from the new created app into your src directory

3 Copy the "workbox-*" dependencies from the package.json into your package.json dependencies

4 (Optional) If you want web-vitals, copy the web-vitals dependency from package.json into your package.json

and don't forget to run again 'yarn install' or 'npm install'

Thats it

[unbiased-dev]

Okay, I figured out that there is a change regarding this.

https://create-react-app.dev/docs/making-a-progressive-web-app/

Since CRA 4 the service worker is opt-in, so if someon want to update from older versions, need to create by himself service worker.

The easyest way is like this:

1 Create somewhere on your computer a new CRA with the service worker template:

npx create-react-app my-app --template cra-template-pwa

2 Copy the service-worker.js from the new created app into your src directory

3 Copy the "workbox-*" dependencies from the package.json into your package.json dependencies

4 (Optional) If you want web-vitals, copy the web-vitals dependency from package.json into your package.json

and don't forget to run again 'yarn install' or 'npm install'

Thats it

Did all this but the service-worker is still not registering, worked perfectly with cra 3.X.X but i wanted to update to be able to add custom sw logic without ejecting, and I can't get it to work.

What I did:

• updated react scripts to 4.0.1
• created a new cra with pwa template
• copied over service-worker.js and serviceWorkerRegistration.js
• added import * as serviceWorkerRegistration from './serviceWorkerRegistration' in index
• called serviceWorkerRegistration.register()
• moved all workbox deps to the old package json
• removed package lock and did a fresh npm install
• rerun build
• served locally on https with valid certs (worked on 3.0.1)
• service worker tab is not populated on chrome, i dont get an install prompt

What am I missing?

edit: well, apparently all is fine in chromium-edge, only chrome does this, i deleted cache 50 different ways, ran incognito, even another profile, won't budge. I started chrome with ignore certs error, nada. Not even a console log, no errors, no warnings, nothing. Service worker is not registered and app is not installable.

edit2: somehow it resolved itself, im betting on a caching issue but i can't be sure

[akhilalekha]

Hi, what about the serviceWorkerRegistration.js file? Isn't that needed? service-worker.js is enough? Also when I ran npm install after adding the dependencies it didn't seem like it installed anything. How do I check if this working? @a-tonchev

[fred8617]

the old version cra-template create serviceWorker.ts but new create service-worker.ts.this's main difference i think.don't only copy the file content,also the file name

[meatnordrink]

A note on @a-tonchev 's answer (which was a lifesaver - thank you!!!) : When I tried that solution as-is, I ran into an error where Chrome said it couldn't parse service-worker.js. Turns out this is because, if you just copy the service-worker.js directly from a new project (where it's in the root folder), it has imports in it - which Workbox doesn't support. So what you actually need to do is create a new project with the pwa template, as @a-tonchev suggests, and then build the project and copy the compiled service-worker.js from there.

[a-tonchev]

Hi, what about the serviceWorkerRegistration.js file? Isn't that needed? service-worker.js is enough? Also when I ran npm install after adding the dependencies it didn't seem like it installed anything. How do I check if this working? @a-tonchev

Actually you had the registration already in your old version. But you can copy and replace it also from the new one. I think it is the same.

[MeRahulAhire]

@a-tonchev why it is removed? what was the need of doing so? It was really good

[a-tonchev]

@a-tonchev why it is removed? what was the need of doing so? It was really good

@MeRahulAhire I am not sure, but I think they remove it so that we are able to be more flexible in the adjustments of the service worker.

Service worker become more and more common and a important part of many new projects and the need to personalize it rise, thatswhy they move it outside so that we can do changes.

I think it is really better now, if you follow the steps up, you will have the exact same functionality like before, but now you can personalize your service worker, changing its caching rules and strategies, adding additional recources, that are not detected by webpack etc.

Just give it a try ;)

[MeRahulAhire]

thanks for the info. I think for me this'd also work best npx create-react-app my-app --template cra-template-pwa

[savissimo]

A note on @a-tonchev 's answer (which was a lifesaver - thank you!!!) : When I tried that solution as-is, I ran into an error where Chrome said it couldn't parse service-worker.js. Turns out this is because, if you just copy the service-worker.js directly from a new project (where it's in the root folder), it has imports in it - which Workbox doesn't support. So what you actually need to do is create a new project with the pwa template, as @a-tonchev suggests, and then build the project and copy the compiled service-worker.js from there.

Thank you @meatnordrink, your solution worked well for me. Should I need to change service-worker.ts, I would need to update also the compiled js file: is there a way to do it automatically?

[meatnordrink]

@savissimo , not built-in that I know of; for that, I think you'd need to start a new project using the proper --template cra-template-pwa template. You could, of course, write a script for it - a simple bash script that built the project then copied the relevant files would make the process smoother.

[a-tonchev]

A note on @a-tonchev 's answer (which was a lifesaver - thank you!!!) : When I tried that solution as-is, I ran into an error where Chrome said it couldn't parse service-worker.js. Turns out this is because, if you just copy the service-worker.js directly from a new project (where it's in the root folder), it has imports in it - which Workbox doesn't support. So what you actually need to do is create a new project with the pwa template, as @a-tonchev suggests, and then build the project and copy the compiled service-worker.js from there.

I don't think that this is good idea, because you end up with the same service worker for eternity, and on the next build your service worker will just try to cache the old files and probably throw error if js chunks does not exit any more.

Just follow step 3 - copy all the workbox dependancies(imports) from the package.json of the template-project into your project, and on every build you will have an up to date service worker

[savissimo]

Just follow step 3 - copy all the workbox dependancies(imports) from the package.json of the template-project into your project, and on every build you will have an up to date service worker

On build it creates the new service worker, but while developing it fails, because there is no service-worker.js in public. We need to somehow sync build/service-worker.js and public/service-worker.js after a build - even though this still requires to build every time we make a change to service-worker.ts.

[rzubov]

Instead of copying service-worker.js/ts manually you can go with craco and modify webpack config a little bit
https://stackoverflow.com/a/68135586