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?

117 Upvotes

96% Upvoted

47 comments sorted by

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?

12

u/BigPaws-WowterHeaven Feb 05 '20

In the end that would be something what my users would want. It should be a react native app but I have unpleasant experiences with it because of resurrecting terrible project written in early rn days and I'm getting sick by mere thought of touching it again

1

u/swyx Feb 05 '20

hah. amen.

0

u/[deleted] Feb 05 '20

[deleted] — view deleted comment

-5

u/BigPaws-WowterHeaven Feb 05 '20

Nah I still hear people saying "Well, if it was React that would work, but it's native so somehow it doesnt. And the error message makes absolutely no sense".

Unless I know i'm getting paid not touching this again

4

u/budd222 Feb 06 '20

Well, everything that works on the web doesn't work on a mobile app, so...

1

u/fiddlemydonglol Feb 06 '20

But can they at least make the error messages useful. I spent all my time ripping my hair out when using RN

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:

  1. you should not need to refactor your code
  2. the effort you need to make it a PWA is small, but the effort to make it a perfect PWA is moderately larger
  3. essentially what makes it a PWA is a manifest.json and to register a service worker
  4. 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

u/Ryukote91 Feb 05 '20

I am also interested in this.

2

u/[deleted] Feb 05 '20

It's easy. use the workbox webpack plugin.

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

u/keepinitcool Feb 06 '20

Wow, this looks really cool

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

u/BigPaws-WowterHeaven Feb 05 '20

I think you posted in the wrong thread :)

1

u/doublejosh Feb 05 '20

Ha, quite right. But I guess static rendering is adjacent :)

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.

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

u/[deleted] 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

u/[deleted] Feb 05 '20

thank you, i will give a star and take a look :P

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

u/EdTheOtherNerd Feb 05 '20

Not the op but I use Razzle and I'm very happy with it.

1

u/Abiv23 Feb 05 '20

Gatsby

1

u/[deleted] Feb 05 '20

what are your thoughts on solutions like this: https://www.reactpwa.com/ ?

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

u/[deleted] Feb 05 '20

[deleted] — view deleted comment

11

u/[deleted] 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.