DEV Community

Cover image for Making React App a Progressive Web App (PWA)

Making React App a Progressive Web App (PWA)

Ankit Kamboj on January 10, 2021

What is a PWA? Progressive Web Apps are user experiences that have the reach of the web, and are: Reliable - Load instantly and never s...
Collapse
 
rfinkley profile image
rfinkley

Nice! Thanks for posting.

Collapse
 
oratexa profile image
Oratexa • Edited

@Ankit
Thank you, Nice post!

How can I make a PWA work offline in simple way to access some features & make interactive for weak or no connection?

Collapse
 
morganjay profile image
James Morgan

Don't React apps already come with PWA features?

Collapse
 
ankitkamboj18 profile image
Ankit Kamboj

yes, it used to but now with the latest release, they made it optional.
Now you have to use this additional template if you want yo use service workers and PWA i.e npx create-react-app my-app --template cra-template-pwa

Collapse
 
mustafaanaskh99 profile image
Mustafa Anas

Any idea why they made it optional?
Does it make the app any "heavier"?

Great tip by the way <3

Thread Thread
 
ankitkamboj18 profile image
Ankit Kamboj

They made it optional because every organization/individual has their own way of implementing service workers and PWA. And they don't want to force something which in the end is not required and replaced by some custom code.
Making the app heavier is not right to say as to when we add our own custom code for service workers and PWA implementation that also takes some memory, so it's not because of making the app heavier. Just they provided choice if we want we can use else skip.

Collapse
 
morganjay profile image
James Morgan

Thanks!

Collapse
 
nkirase profile image
Patriotic Nigerian

How do I get the PWA in my system

Collapse
 
ankitkamboj18 profile image
Ankit Kamboj • Edited

@Patriotic Nigerian - First you need to decide which tech stack you need to use whether it's Vanilla Javascript with HTML or some framework like React, Angular, Vue, or some other, and based on that you need to configure service workers and manifest.json to make your app a PWA. Service worker part and manifest.json is mandatory for any app to be a PWA. Hope this helps.!!

Collapse
 
aalphaindia profile image
Pawan Pawar

Thanks for posting.

Collapse
 
joluga profile image
joluga

How can I cache a WordPress website? Just cache "/" or there is something special about it? I mean a WP with a blog that updates weekly or monthly and updates the web app. Thanks for any help.

Collapse
 
evalcraciun profile image
Craciun Ciprian

You can use a plugin for wordpress.

Collapse
 
joluga profile image
joluga

Yes, that would be easy, I seen some plugins, but they mostly do all the work, including the design and I want to avoid that, so the solution would be to design it myself and update every time without having to write every new path in the webapp code. Thanks for answering anyway.