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
 
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
 
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
 
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
 
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
 
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
 
bhendi profile image
Jyothikrishna • Edited

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

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.