-
-
Notifications
You must be signed in to change notification settings - Fork 26.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Guidlines for Using Workbox #5673
Comments
Im stuck in the same boat.. |
After struggeling with how the magic works i finally figured out what needs to be done to be able to "customize" the service worker routes: First run with
where as swSrc point to your custom service-worker. My Service-Worker.js looks like this: workbox.routing.registerRoute( workbox.routing.registerNavigationRoute("/index.html", { |
As mentioned, @Rainson12 , there have already been a few articles about ejecting and doing something similar to what you have done. I believe the official way to customize using Workbox w/o ejecting is in the works. I personally don't want to eject. This issue here documents the progress of this new feature(I believe), #5369 |
@Nick-t-go from what i have seen in the other blog posts they all dont work with the current v2 create react app scripts as they all try to get rid of sw-precache and use workbox instead. Now with v2 you dont have to get rid of sw-precache anymore and because of that, all guides i have seen are obsolete and do not work anymore |
Here's how I've done it with CRA and without ejecting. It uses the workbox build workflow. (cra 2.x) TL;DR - This involves not using the SW generated by create-react-app but generating your own SW with injectManifest mode using the Workbox build workflow. Build commands will be added to react-build script in package.json NOTE: Step1 : Make sure you register for a SW in the main index.js file. i.e. change Step2: Inside Step3: Create two files under Step4: In
Step 5: Inside your custom service worker template file i.e.
step 6: step 7: in When your run Again, all of this may not be relevant if #5369 provides a way to use the webpack flow by providing a custom configuration file. |
What if:
Anyone have any ideas on whether or not this will work? |
@karannagupta finally circling back to this. going to give your suggestion a whirl. Is it possible for you to edit your post and fix the formatting. If it does work I think others will find is useful but more so if it is actually formatted properly to enhance readability. |
@karannagupta Hey that worked! Thanks for sharing. Anyone who stumbles upon this looking for a way to edit the config for using Workbox with CRA without ejecting please check out the comment above, looks like the official fix is on the slow burn. |
another way to get this to work is to use
|
I've excluded the SW files in
|
@karannagupta - could you make a gist or a repo describing your workaround please? It's getting a bit hard following it. |
@karannagupta & others: i think #5369 would allow you to pass custom config to the |
Has anyone else tried @karannagupta's method and run into problems debugging locally? When I deploy with the ootb service worker, it is hooked up and running no problem. When I use the example here, and validate that the correct files are ouput into my /build directory (I've run through the directions multiple times at this point), I start running into errors - specifically it looks like CRA may be looking for "service-worker.js" when it compiles and deploys. When my service worker is named sw.js, it does not register successfully. If I change the name of my generated sw.js file to service-worker.js, a service worker is registered but it is the "no-op" version that CRA inserts when debugging locally. |
Hi @bscaspar, what errors do you run into? Or is it after you run debug some file? I've attached screenshots of my console with Workbox messages for localhost ( using I also clear out the default CRA service-worker.js file like this -
|
Thanks for getting back to me @karannagupta turns out I was missing the serve step - previously I was testing by building then running the app with npm run start. Things are running smoothly with serve, thanks again for putting this workaround together! |
This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs. |
This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue. |
Another addition to this thread (which was very instructive). Append your code to generated service-workerThere's a module for it: cra-append-sw. Pros: easy setup, takes advantage of GenerateSW Cons: appended code is processed with Babel/Webpack, but not using CRA's config (you could opt-out). Still use GenerateSW which handle network caching for you. Not sure it works when developing locally Use Workbox in custom service-worker file
Pros: you can use ES2016/TypeScript code in service-worker file. You still benefit from Workbox network caching facilities, with total control on it Cons: complicated and fragile, because of the multiple configuration hack. I've used the last solution, inspired from @karannagupta and @maciejsimka responses, cause I needed both caching code from Workbox and some react-app-rewire-workbox may help simplifying the Webpack configuration (the one for main app). To be tested. |
@karannagupta Could you elaborate on the difference between your solution (steps 1-7) above, #5673 (comment), and using Craco, https://github.com/sharegate/craco plus https://github.com/kevinsperrine/craco-workbox ? I'm just trying to understand this better. Thanks |
Hi @ripern I didn't look into great details of Craco, but in the end, it simply boils down to using Create React App without ejecting and being okay with no control over webpack's config. The difference in my approach is that it uses the Workbox build workflow, but if CRA did allow adding custom config to its webpack config, I would have preferred Workbox Webapck Plugin to achieve the same result like craco-workbox and the one suggested by @maciejsimka Looks like Craco is similar to react-app-rewired. They are both very cool projects but you have to decide based on your requirements if adding another dependency would make sense. As react-scripts update, you'll have to take care that things don't break ... |
I am on React-Scripts 2.0.5. I am eager to use the new Workbox functionality that is mentioned in the release notes for 2.0. I can't find any directions on how to do it though.
There are posts on Medium, Freecodecamp and such that are really just hacks to the 1.x versions of React-scripts.
I had thought since it has just been added as a dependency we could get some assistance on how and where to add configurations. When I include Workbox in my
registerServiceWorker.js
and attempt to set some strategies on assets it crashes the entire app once built.Unable to import module 'workbox-routing' from 'WORKBOX_CDN_ROOT_URL/workbox-routing.prod.js'.
I understand serviceworkers are now opt-in.
I understand that in the latest version of create react app the service worker register file is now just called
serviceworker.js
.I compared the old
registerServiceWorker.js
to the newserviceworker.js
and they are the same. I also am able to build with the default service worker file and I do see Workbox in the application tab in Chrome dev tools. I know its working out of the box. I just want to be able to edit it. Guidance would be greatly appreciated.The text was updated successfully, but these errors were encountered: