Switch to the Workbox InjectManifest plugin

[jeffposnick]

Fixes #9141

More details about this change can be found in #9141 (comment)

This PR includes a filename change from src/serviceWorker.js to src/registerServiceWorker.js, but I didn't include any of the "automation" steps @mrmckeb mentioned in #9141 (comment). I'm not sure how to implement that.

It's been a while since I've contributed to c-r-a, so apologies if I'm missing anything! I'll add in a few inline comments with particular bits I'm not sure of.

[facebook-github-bot]

Hi @jeffposnick!

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file.

In order for us to review and merge your code, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

[9jaGuy]

Thanks for this. I need some help debugging workbox, I have set up some configuration, but not able to enable debug to see the logging to figure out what my caching not working. How can I enable workbox debug?

@jeffposnick ??

[jeffposnick]

@9jaboy, the Workbox codebase uses the process.env.NODE_ENV symbol to determine whether or not to enable debug logging in the final bundle. E.g.: https://github.com/GoogleChrome/workbox/blob/57ad215913b95f854f6ac981c77cb3536c46de48/packages/workbox-routing/src/NavigationRoute.ts#L112-L115

webpack handles replacing process.env.NODE_ENV based on the configured mode option for the main compilation.

I'm not sure whether there's a way to use c-r-a and set mode: 'development', though.

[vaibhavarora14]

@jeffposnick Earlier a service-worker.js file used to get generated with help of scripts in build folder.
After v4, it's no longer getting generated.

And ServiceWorker is not getting registered in any app generated by v4 > higher version CRA app.
i don't even see registerServiceWorker.js getting generate in build folder.

Can you connect the bug I am mentioning, with PR changes mentioned here?

[jeffposnick]

@varora1406, please take a look at https://create-react-app.dev/docs/making-a-progressive-web-app/, and specifically the

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

command, which is the c-r-a v4 approach to opting-in to using a service worker.

[vaibhavarora14]

@jeffposnick there is some difference between src/service-worker.js and build/service-worker.js.

Problem is build folder created with react-scripts is not creating build/service-worker.js.
And you can verify it with
npx create-react-app my-app --template cra-template-pwa-typescript and see even after serviceWorker.register() , service worker registration is failing.

I am trying to find issue in react-scripts and add fix as soon as possible, but this is affecting from v4 and works correctly in previous version.

Let me know if I am pointing to wrong direction, because my focus is at file build/service-worker.js

[jeffposnick]

I just did:

$ npx create-react-app my-app --template cra-template-pwa-typescript
$ cd my-app
$ yarn build

and following that sequence, a build/service-worker.js file is present and seems to contain the expected contents.

So... I'm not able to reproduce what you're describing.

Also, a merged PR is not the best place to discuss bugs or ask questions—I'd suggest opening a new issue if you're still running into problems.

[theMasix]

@jeffposnick I just figured that there is no service-worker.js in build folder after migrating to react-script v4 in my existing project. After a bit of research, I find this PR, but I don't know how can I automate this migration process for my self. How could I install this plugin and automate the process?

As I had a deadline, I did more research and found #10032 comment and #9776 comment and I did what they said:

• generate new CRA app with pwa
• copy new files from new project src to my existing project src file.
• copy workbox-* and veb-vitals to my package.json file. under dependency section.
• finally update my src/index.js to use new serviceWorkerRegistartion.js file.

Is that all I should do for have completely stable SW as I had before?

I also should mention that official CRA doc about PWA is not understandable for who wants to migrate from 3.4 to 4.0. I think that should be updated too!

[MarcoLeko]

@theMasix is this the right approach to do? Im also confronted with the same issue. It is kind of a pain that there is no guide or reference on how to migrate a react-pwa app that uses r-s: 3.4 to version4.0

[theMasix]

@MarcoLeko Yeah I think this is the right way but not officially documented! Since 2months ago(that I implemented the solution which I mentioned), I didn't realize any side effect or inconsistency and I don't have any issue with PWA anymore.

[Olegloggin]

Earlier after run build project in folder "build" were creating file precache-manifest.js. Now in new project CRA after build this fille not create. And old project whitch update from react-scripts 3.x.x to 4.x.x and update service-worker file, precache-manifest.js not create too, although workbox enter in browser console writes about caching. In all these project exist write precacheAndRoute(self.__WB_MANIFEST); in service-worker file.
Should file precache-manifest.js in last versions not creating or what can be wrong?

[caprica-Six]

@Olegloggin, there is no precache-manifest.js generated file in the build folder with v4.

You can check here, how I've fixed it.

Hope it'll work.