-
-
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
[PWA] Use Workbox instead of sw-precache #2340
Comments
It's not the best argument, but switching to |
I don't really know much about either. |
We just launched Workbox v1.0 last week, and I think it would be prudent to give it some time to mature before trying to integrate it into a general-purpose project like In the medium-term, yes, migration should hopefully be a smooth process and would make sense. Maybe keep this issue open to track that? CC: @addyosmani |
Sure, sounds good. |
It's been a while since Workbox landed v1.0. I've used it in a few production apps and I think its mature enough to include in CRA. What do you think, @gaearon and @jeffposnick? I'd be happy to work on a PR for this if you agree. |
Hello @sidharthachatterjee! I'm glad that Workbox has been... working... for you 😄 We're working on a pretty major rewrite of the Webpack integration as part of our upcoming Workbox v3 release, and have felt that once that's ready, it would be the right time to start moving over projects like Moving over to Workbox now would lead to another potentially large transition when we went from v2 to v3. CC: @goldhand @addyosmani |
@jeffposnick trying to convert my personal project which was built on Angular and Edit: Without doing
|
@jeffposnick What's the current status on this? |
Workbox v3 is currently in alpha, with a target for final release towards the end of the month: https://github.com/GoogleChrome/workbox/releases Moving to Workbox v3 would give a nicer local development experience, as it includes logging information about what the service worker's doing enabled by default on I've been locally testing out Workbox integration with projects like |
@jeffposnick @Sgiath @gaearon @wtgtybhertgeghgtwtg @sidharthachatterjee I just published an npm package that can remove the SWPrecacheWebpackPlugin and replace it with Workbox webpack plugins, allowing you to fully generate the service worker or injecting the precache assets into a custom service worker - all without ejecting. |
I'm going to try and make a PR to actually get this into c-r-a. My current idea to be able to customise the config is to look for a file like e.g. '.workbox-config.js' in the root directory. Would that be ok? |
@jeffposnick I have a very complex project which is built on CRA. Currently using sw-precache for caching, I want to use workbox for same. How can I do it? |
@vaibhavi3t I think your best bet right now is https://github.com/davejm/react-app-rewire-workbox |
@vaibhavi3t I have setup my CRA project to work with workbox 3.0. The setup is complete but i am stuck at one point. Let me describe the setup The glob pattern you need to figure out according to your preference. iii)Create a function to register our custom myservice-worker.js in src/mysw-register.js iv) Modify src/index.js by removing existing 'registerServiceWorker' call and add your own two lines to call your registration v) Now modify package.json build script vi) npm install workbox-cli and workbox-sw in prod scope(not in dev scope). @vaibhavi3t If you have any clue about below problem please share Now @jeffposnick i seek your help. In my react app i have different components and path for them mentioned in src/App.js To cache them, i am not sure whether i can precache them or use registerroute(), what should i do. I tried with both precache and registerRoute() but the components are not getting cached. I ran only the frontend-'serve -s build' and both nodejs backend and frontend, still the components are not getting cached. Index.html gets cached but the div id='root' is always empty. I am running it in localhost. Please provide an example if possible. |
I succeded adding workbox in CRA but I have some doubts. In the cache storage I keep having old sw-precache storage. So now I have duplicated storages. If you see the image, I'm not calling anymore the old service worker. Also I don't know why but workbox create two, one it finishes with |
@simonedavico I wrote a Medium inspired in your comment. If anyone is interested in how to use the plugin, I am glad to share it: Using Workbox with Create React App (Without Ejecting) |
@gaearon So, what is the progress so far? Can anybody tell me when Workbox will become a part of CRA. I just want to know this because I am going to create a PWA in the near future... |
There's an open PR containing a Workbox implementation: #4169 |
Thanks! |
What's the progress for workbox to work on CRA? |
The current version of You need to opt-in to registering the service worker, though. https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app |
It would be nice to use Workbox instead of
sw-pracache
for genratingservice-worker.js
file since it is officially supported by Google and has more features thansw-pracache
. It has also official Webpack plugin so integration shouldn't be hard.Some more info about Workbox is here https://developers.google.com/web/tools/workbox/
The text was updated successfully, but these errors were encountered: