Coding Shorts: Using the Vite PWA Plug-in
In the world of web development, progressive web apps (PWAs) have become a hot topic. These web applications combine the best features of web and mobile apps to provide a seamless experience for users.
One of the popular tools for creating PWAs is Vite, a frontend build tool that takes a different approach to traditional bundlers. In this article, we will explore using the Vite PWA plug-in to convert a regular web app into a PWA.
Setting up Vite
Before we start adding PWA functionality to our app, we need to set up Vite. This can be done by installing Vite globally or by creating a new Vite project using the Vite CLI. Once Vite is installed, we can create a new project and start adding our app’s code.
Adding the Vite PWA Plug-in
The Vite PWA plug-in is a simple and straightforward way to add PWA functionality to a Vite project. To get started, we need to install the plug-in using npm:
$ npm install @vitejs/plugin-pwa
After installing the plug-in, we need to add it to our Vite configuration. This can be done by creating a vite.config.js file in the root of our project and adding the following code:
import { defineConfig } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
plugins: [
VitePWA()
]
})
With the Vite PWA plug-in added to our configuration, we can now start adding PWA features to our app, such as a service worker, offline support, and app manifest.
Configuring the PWA
The Vite PWA plug-in provides a simple way to configure PWA features by adding options to the Vite configuration. For example, we can specify the name of our app, its theme color, and the icons to be used in the app manifest.
VitePWA({
manifest: {
name: 'My Awesome App',
short_name: 'AwesomeApp',
theme_color: '#ffffff',
icons: [
{
src: '/icon-192x192.png',
sizes: '192x192',
type: 'image/png'
}
]
}
})
With the Vite PWA plug-in, adding PWA functionality to a Vite project is a breeze. By following the simple steps outlined in this article, you can convert your web app into a fully-fledged progressive web app that provides a seamless experience for your users. Happy coding!
Thnaks for this! btw what does the as const does??
THANKS!!!
Amazing content, new follower.
you're great Sir. Thanks
Mf looks like an AI generated character model
Nice explanations, but I have a question ? think we have admin and user functionalities in a same app, can we disable PWA feature for admins ?
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!
Great video, thank you, however, i can't make it work.
Everything works just fine until i try to add a runtime cache in the workbox. I write something very similar to you and none of my data that is fetched on the distant api is cached (i don't see it in the Application/Cache Storage and my web app doesn't work when i turn on the offline mode). Is there something to do when the data is fetched to cache it ?
It is weird because i don't get any errors …
[edit] it finally worked even though i didn’t do anything, i am not really sure why but i guess chrome needed some time to update
Thanks so much!, your tutorial works for me a lot.
Been learning about PWA's for the past 2 weeks, and you made it simple as it can be. Thanks alot!
Thanks a lot . This is a great guide!
My example doesn't cache (in dev at least), after npm run build + npm run dev. SW and Manifest are working and also Lighthouse passed as a PWA application, Below is my config. Help please.
export default defineConfig({
plugins: [
react(),
VitePWA({
registerType: 'autoUpdate',
devOptions: {
enabled: true
},
workbox: {
globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
},
includeAssets: ['favicon.ico', 'apple-touch-icon-180×180.png', 'maskable-icon-512×512.svg'],
manifest: {
name: 'My Awesome App',
short_name: 'MyApp',
description: 'My Awesome App description',
theme_color: '#ffffff',
icons: [
{
src: 'pwa-64×64.png',
sizes: '64×64',
type: 'image/png'
},
{
src: 'pwa-192×192.png',
sizes: '192×192',
type: 'image/png'
},
{
src: 'pwa-512×512.png',
sizes: '512×512',
type: 'image/png'
},
{
src: 'pwa-512×512.png',
sizes: '512×512',
type: 'image/png',
purpose: 'any'
},
{
src: 'pwa-512×512.png',
sizes: '512×512',
type: 'image/png',
purpose: 'maskable'
}
]
}
})
],
})
This is a great guide! Thank you. Subscribed.
I have an issue with runtime caching for api?
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.
Observation: Seems like it has to be a 512×512 icon. I just selected a random 32×32 png, and it does not work. I had to select a 512×512 png to get the Install icon to display.
Some damn great stufff
For API requests, it only caches it on the second reload. Is there any workaround to make it cache on first visit
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
great video 🙂