Coding Shorts: Using the Vite PWA Plug-in

While most SPA frameworks have their own PWA plugins, the Vite development tool also has one. What I like about it is that you have the same plugin whether you're using Vue, React, SvelteKit, or Pure JavaScript. Since it's at the Vite level, it is easier to manage. Let's take a look:

00:00 - Introduction
00:54 - The Project
02:51 - Installing the Plugin
04:05 - The PWA Files
05:12 - Customizing the Manifest
07:27 - Testing Offline
09:00 - Adding a Runtime Cache in the workbox
12:39 - Wrapping Up

If you like this video, you might like other videos in my Instructional Videos:

You can hire me too! You can reach me at my new website:

[naveduddin]

This is the only video I needed. I have been stuck on how should I make my web app offline and found this guy explaining pwa in very simple terms. Thank you sir, it was a very informational video

[hvogeler]

Rarely had such precise and easy to understand explanation of something. Very well done AND without the fuzz that often make such videos sound like an overhiped TV commercial! Thank you

[alexanderx]

wanna say it's pretty usefull review! no huge explanations of obvious things, which are so popular nowadays, just essentials that experienced developer have to know to get how it works in general. keep going man! thumbs up!

[kanucu]

Been learning about PWA's for the past 2 weeks, and you made it simple as it can be. Thanks alot!

[fabiohenrique]

Very useful information, Shawn. Thanks for sharing.

[atrex]

I'm surprised I haven't come across your channel before but it's a godsend. I'm about to start a contract at work to build a POS and one of the requirements is that it has to be a PWA for offline mode. This saved me loads of time wading through all of the project scaffolding and documentation to get started. Thank you.

[eswilhite]

Spinning up a new app that has offline-first as it's primary requirement. This is a big help! We are using SolidJS (app needs to work well on lower end mobile so the rendering performance is necessary) and Vite. I found Vite PWA today but got lost in the config. Timely video, thanks!

[josephcobbinah]

This is brilliant!!! Will be writing my first PWA with React and Vite. You have a new subscriber!!!

[mongoosethe]

This is a great guide! Thank you. Subscribed.

[theAutomaTom]

Thanks for this part of the chat! I would love to hear more about how the Asp project must be acting as the pwa's server. It's got me a little stumped, and the plugin's deploy docs don't include .Net. You are the best! 👉👉💯

[weamadel]

That was so helpful, thank you so much.

[Miscafer]

Thanks so much!, your tutorial works for me a lot.

[johnycache]

Subscribed.
Great stuff. Thanks.
It's good to know this is available.
Have you built something with it that was released as an app? (working on android and ios?)

[JohnDoe-szjh]

I have an application I'm working on that requires this very thing. I was tryiung to make reactPWA work with React 18 (in Vite) and Material UI v5. Thanks! Much appreciated!

[hulmee]

This was very helpful thank you

Code U do a video on vite-electron-plugin ?

[onedev]

Thank you very much excellent content as always. As you asked for it can you please do a coding short for user impersonation using JWT/Identity. 😃 Thanks

[ColinRichardson]

Hmmm, 6:49 seems to be where this breaks for me.. I ended up having to run the full build and then and used `npx local-web-server` from the dist folder to get the install icon..
Shame it doesn't seem to work from simple dev server

[jean-baptistebalmont]

very efficient demo thanks a lot swildermuth

[shubham]

Thank you! Where GPT and Bing AI, couldn't help, this video saved my day❤

[AlexanderSchulz]

Very good video. I was stuck hat the caching part for at least a day.. now it works. Another thing that does still not work, ist to set a scope for the service worker. I set the scope in the manifest. I have a backend path, that is not served from the frontend but eith the service worker enabled the packend path ist not proxied through. Can anyone help?