loading...

How can I make PWA’s with react

tejasbaid profile image Tejas Baid ・1 min read

I am interested in making progressive web apps but was unable to find a clear roadmap or tutorial on how to do so.

Discussion

markdown guide
 

Don't focus on learning PWAs with React. Focus on learning PWAs. Learn the ins and outs of web manifests, service workers and caching/offline-first capabilities, and responsive design.

There are lots of tutorials here on DEV. Search the #pwa tag.

As @sphrases suggests, Lighthouse can guide you through the parts missing from your app and how to add them.

Once you have an understanding of these concepts, you can use something like what @harveyhalwin or
@shubhamverma1811 suggest (in the latter example, provided you're using and have an understanding of Next - and Node.js hosting, Vercel, etc. to run it).

If you skip over understanding what makes a PWA, you could be providing users a poor experience they can't easily remove from cache if/when you fix it.

 
 

Hi,
If you created your react app using create-react-app, all you need to do is enable your service worker by registering it. All the necessary code required to make your app into a PWA is already handled by create-react-app. You shoud check it out.

 

I think I just used lighthouse in chrome, it gives you the missing steps for a pwa. Then you could just do what lighthouse wants basically :)

 

You should use NextJs and then install the next-pwa npm package.

3 lines of code will convert your website to pwa.

That's what I did for my website
Shubham Verma