DEV Community

Cover image for Turn your react + vite app into a PWA

Turn your react + vite app into a PWA

Jyothikrishna on February 23, 2023

Introduction A Progressive Web Application (PWA) is a web application that has a native app-like experience. PWAs are designed to be fas...
Collapse
 
orelba profile image
Orel •

Thanks for the article, it helped a lot! I was wondering why would you install the workbox-window as a part of the tutorial as it seems that it's not being used anywhere, is there a specific reason to do so?

Collapse
 
bhendi profile image
Jyothikrishna •

Back then the vite pwa docs recommended we install workbox. So I did.

Collapse
 
temitayo profile image
Temitayo •

Workbox is google's library that makes working with service workers easy.

Collapse
 
jv18creator profile image
Jeet Viramgama •

if possible, could you please share the github repo for this tutorial?

Collapse
 
bhendi profile image
Jyothikrishna •

Here is the GitHub repo link
github.com/bhendi-boi/WeatherUps

Hope this helps

Collapse
 
jv18creator profile image
Jeet Viramgama •

thanks, appreciate it.

Collapse
 
loginveb profile image
loginVeb@yandex.ru •

Hello, a good example of pwa, I would like the same template on github, only in JavaScript without ts

Collapse
 
jothykrishnan_mc profile image
Jothy Krishnan M C •

hi I need a guidance in my pwa application

Collapse
 
bhendi profile image
Jyothikrishna •

Ok. Are you facing any issues?

Collapse
 
jothykrishnan_mc profile image
Jothy Krishnan M C •

yes, for my pwa application when I reload the page or goin to the new route the application not act like offline application

Collapse
 
germansaracca profile image
German Gonzalo Saracca •

This article is awesome! Many thanks! And also the pwa-asset-generator works like a charm!

Collapse
 
bhendi profile image
Jyothikrishna •

🙌

Collapse
 
juanvillans profile image
juanvillans •

wao thanks, but what can I do to show something when it is offline ( like data from local, cache or some)??

Collapse
 
bhendi profile image
Jyothikrishna •

You can sync the latest data to local storage everytime you make a fetch request and you can show that when it's offline.

Collapse
 
loginveb profile image
loginVeb@yandex.ru •

Hello, a good example of pwa, I would like the same template on github, only in JavaScript without ts

Collapse
 
bhendi profile image
Jyothikrishna • • Edited

Just remove : Partial <VitePWAOptions> and you are good to go

Collapse
 
santhosh20112003 profile image
Santhosh20112003 •

i need assistance i want to implement pwa in react vite its working in local but after deployment it is not showing

Collapse
 
bhendi profile image
Jyothikrishna •

Could you please share the url ?