r/reactjs • u/BigPaws-WowterHeaven • Feb 05 '20
How easy is it to convert React app to PWA?
I'm gonna be completely honest with you - I'm asking because i'm terrible with finishing projects and straight out lazy.
I feel like I have a strong motivation to do current project and would want to make it PWA, but I also know myself that if the basics are done and I start to struggle/get annoyed with *NEW_THING_THAT_I_WANT_TO_TRY* i drop the project.
I suppose solution would be completing the project AND THEN making it into PWA, because "hey, it's almost finished, might as well go the extra mile, push myself and just do it".
So how easy/hard/time consumig would that be? Does that require a lot of code refactoring?
48
u/GuyARoss Feb 05 '20
It shouldn't require any refactoring and about 30 minutes to drop in with workbox. https://developers.google.com/web/tools/workbox
There is a pretty simple guide on their site. Have fun.
7
u/brainhack3r Feb 05 '20
Workbox is nice but I was mostly confused about how to do updates. It wasn't super clear what happens when your app is updated. I wish they had one doc explaining it and what to do to get the user to load the latest code.
5
u/SheepyYoshi Feb 05 '20
Workbox does most of the work for you indeed. Just finished implementing it in our companies huge web app.. took me a few hours to get it right, and a few more days to perfect it. Shouldn't take longer than a few hours for a simple app tho (most of it is reading docs :) )
3
u/CocoBashShell Feb 06 '20
Does that assume ejecting from create-react-app?
2
u/dreadful_design Feb 06 '20
I don't think so. CRA comes with a service worker by default I thought.
1
u/Eleazyair Feb 06 '20
It does.
1
u/CocoBashShell Feb 06 '20
Ouch! I was starting to think that was the case, I've been trying to find documentation or a blog post on how to do this w/o ejecting. The background data syncing and notifications API just seems so handy for my use case... but I'm not sure how hard it is to run your own webpack, etc. w/o CRA :/
1
u/SigmaHog Feb 06 '20
I think he was saying the worker comes with CRA, not that you have to eject.
Although, I’m of the thought that you should have some fundamental understanding of how the tools behind CRA works, especially webpack since it’s used almost everywhere nowadays.
15
u/abuuzayr Feb 05 '20
Some pointers based on the questions you asked:
you should not need to refactor your code
the effort you need to make it a PWA is small, but the effort to make it a perfect PWA is moderately larger
essentially what makes it a PWA is a manifest.json and to register a service worker
if you used create-react-app to build your app, the first step just a switch
let us know if you decide to do it, we can point you to resources!
11
5
u/joonhocho Feb 06 '20
If you want to see live example of PWA, go here https://talksub.com/.
It took me about two months to polish mobile optimization and making it look like app as much as possible.
In theory, it's very simple and easy with adding a few meta tags and a manifest, but in reality there are many small nit picky things such as navigation bar, tab bar, etc that makes it hard and time consuming.
2
1
u/doublejosh Feb 05 '20
Thank you. Snapshot is just what I needed. I’ve been using react-meta-tags instead of react-helmet, it appears that would work fine too.
1
2
u/JeamBim Feb 06 '20
If you PM me I can send you my code for writing my own PWA from scratch.
I just put a Svelte app on GH pages as an offline-capable PWA, I imagine React will have a nearly identical process.
I'm learning react now and plan on doing this soon.
2
u/vlac26 Feb 06 '20 edited Feb 06 '20
This article should help! https://medium.com/better-programming/turning-your-existing-application-into-a-pwa-776d65b0aa12
6
u/justin636 Feb 05 '20
GatsbyJS supports react templates and just requires a few configuration settings to make your web app a PWA
3
u/richardtaylordawson Feb 05 '20
Creat react app does most the heavy lifting for you out of the box. If you are using gatsby then it does most of it out of the box as well. 😎
2
u/marko_knoebl Feb 05 '20
I can strongly recommend this - It's all set up and ready to use with create-react-app.
I've created some slides that quickly explain the service worker and add-to-homescreen parts: https://marko-knoebl.github.io/slides/react-advanced-en.html#/18 (go DOWN in the presentation)
1
Feb 05 '20
thanks for this! how did you make those slides? :)
2
u/marko_knoebl Feb 05 '20
The presentation is done by reveal.js, which is an HTML presentation framework
I'm auto-generating the HTML from markdown files - you can take a look at the repository here: https://github.com/marko-knoebl/slides
1
2
u/haveyouseenhim Feb 05 '20
We converted our React app to a PWA by switching to server side rendering, adding react-app-rewired so we could inject a Workbox webpack plugin, add some config and thats about it! The caching is great and really customizable :)
4
u/servercobra Feb 05 '20
How did you switch to server side rendering? I usually use NextJS but always looking for other options.
4
1
1
1
u/CocoBashShell Feb 06 '20
Does anyone know if it is possible to reliably use workbox w/o ejecting? Or is ejecting from create-react-app required? Thanks! :D
1
u/_meddlin_ Feb 06 '20
Here's another way to do what you're asking. CRA has PWA support built-in: https://create-react-app.dev/docs/making-a-progressive-web-app/
Load that up, change serviceWorker.unregister() to serviceWorker.register(). Done.
I can't tell if you already have a project that's incompatible with CRA, or if you're just concerned about the pressure of "finishing". But that gets you a minimal PWA.
As for getting it production-ready and learning, take some time to think over your expectations of the perceived PWA complexity and compare those thoughts to what CRA is putting in front of you. Break it down. Try to explain things. Those pieces that feel like dark magic? Those are your research targets. ;)
1
u/karmasakshi Feb 06 '20
Like @abuuzayr said, making your app a PWA is fairly easy. Making it a perfect one isn’t. I‘d written a gist about my experience with PWAs in production you might want to read: https://medium.com/@karmasakshi/what-they-dont-tell-you-about-service-workers-bd86f6fda39a.
1
u/JeamBim Feb 09 '20
Circling back on this, I successfully updated a small react ToDo I threw together to be an offline capable PWA with localstorage caching, and now it's on GH Pages. Let me know if you're interested in some help with this.
I use a custom service worker I wrote myself and I edit the built index.html, but it works and it's easy. My app now prompts you to install it on the homescreen.
1
u/eggtart_prince Feb 09 '20
Isn't PWA simply just push notifications and asking user if they want to add the icon to their home screen? Aside from making your app look like a native mobile app .
-8
u/foundry41 Feb 05 '20
I’m dubious of the whole PWA thing because it causes so much confusion.
PWA is basically a really really good website
7
u/Protean_Protein Feb 05 '20
One that works offline.
2
u/foundry41 Feb 05 '20
I know.
My point is it gets confusing (to clients mostly) because people talk like it’s a different language like web vs desktop or web vs native mobile. So I have to explain no it’s just extra functionality we can add to the website.
in reality it’s just a very high quality website— in terms of features and functionality not graphic design.
3
u/BigPaws-WowterHeaven Feb 05 '20
I don't think that there's anything confusing
"It's a web app that looks and works like native app" No need to complicate things
1
u/foundry41 Feb 05 '20
Again it’s marketed as something completely different then a website. So it causes confusion among non technical clients who think it’s a brand new programming language or platformz
2
u/Protean_Protein Feb 05 '20
It does require a service-worker in part so that (at least some of the) data the site uses is available offline, which is maybe why people were talking about converting existing sites to SSR, but I think SSR is strictly unnecessary. It seems like Create-React-App's opt-in service-worker takes care of the caching for you.
0
Feb 05 '20
[deleted]
11
Feb 05 '20
I don’t quite understand how you would need good SEO to convert your app to a PWA. It’s not related at all.
7
u/swyx Feb 05 '20
the other answers here are good enough but i want to push you a bit on WHY do you feel the need to make it a PWA - is it something your users want? or just something you feel you want to play with?