Create-react-app: ServiceWorker not built in 4.x (next)

[zaneclaes]

Describe the bug

./build/service-worker.js is no longer generated at all (and there are no error messages) with the latest versions of CRA (4.x) using @next.

Did you try recovering your dependencies?

Yes.

Which terms did you search for in User Guide?

N/A

Environment

(paste the output of the command here.)

Steps to reproduce

(Write your steps here:)

1. npx create-react-app test
2. cd test
3. npm install --save react-scripts@next
4. npm run build
5. ls -la ./build

Expected behavior

./build/service-worker.js should be present.

Actual behavior

The file is missing. This causes a problem with apps which are upgrading from prior CRA versions, as they continue to reference the cached service worker (so the web app continues to cache old assets).

Reproducible demo

Just run the commands above.

[max-programming]

@zaneclaes I deployed it to netlify. Do you know how can I fix this issue without having a build folder locally?

[Empty2k12]

This does not only affect @next. I just reproduced it by downgrading from next to the newly released 4.0.0 from 4 days ago.

Steps to repro:

npx create-react-app cra-no-sw --template typescript
cat ./cra-no-sw/build/service-worker.js
cat: ./cra-no-sw/build/service-worker.js: No such file or directory

[adueck]

@Empty2k12 Yes, exact same problem here.

When I start a new app with

npx create-react-app my-app

The service worker is nowhere to be seen. 😢

Also the familiar section for registering the service worker in src/index.js is gone

This is no longer there 👇

import * as serviceWorker from './serviceWorker';

...

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.register()

[max-programming]

Actually, I think SW is replaced by reportWebVitals. We need to create our own service workers

[neolefty]

The 4.0.0 changelog says:

We've switched to the Workbox InjectManifest plugin...

But I think I need more information. When I make a fresh project, it doesn't create a service worker either with the normal template or with --template typescript, nor are there instructions in the code to add one.

Is this an incomplete feature in 4.0.0?

[dwelle]

Turns out you need to create your own service-worker.js file. There was no mention of it in the release notes, and even the new docs aren't super clear on this.

I haven't investigated this fully, so in the interim I just copy/pasted what CRA@3 was building and modified it to use the new manifest accessible from self.__WB_MANIFEST. You can check it out here: https://github.com/excalidraw/excalidraw/pull/2320/files. Use at your own risk :).

[adueck]

Turns out you need to create your own service-worker.js file.

This is surprising, and disappointing (?). I loved using create-react-app because it always created a solid, installable PWA without having to worry about rolling a service-worker.js, which can be a bit of a minefield.

I really hope CRA doesn't drop the excellent ready-made service worker. 🥺

[kivervinicius]

I believe that there are more complaints about forcing a service worker by default than not, but it is extremely simple to continue using serviceWorker.

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

[max-programming]

So I think there is no way except for making a custom service worker

[zaneclaes]

It would be nice if there were a decent upgrade path, here. Or just a documented one.

For those upgrading to 4.x in an existing project, this is an extremely confusing change. In my case, it transparently broke my application due to a sudden lack of service workers. As others have noted, the upgrade docs are woefully insufficient.

In any case, my "fix" was to create a dummy app:

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

And copy over the relevant code:

• reportWebVitals.ts
• service-worker.ts
• serviceWorkerRegistration.ts

As well as the initialization code in index.tsx.

[chrisfinazzo]

I can confirm @adueck's findings as well. These files are not in the base template at all.

I am new to React and working to port a small microsite from Jekyll just to get a feel for things. The import in index.js and the register function are there, but that's it.

Maddening.