Utilizing the Vite PWA Plug-in in Coding Shorts

Posted by

Coding Shorts: Using the Vite PWA Plug-in

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!

0 0 votes
Article Rating
30 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@pablom8854
10 months ago

Thnaks for this! btw what does the as const does??

@iiErr0R
10 months ago

THANKS!!!

@1046sacm
10 months ago

Amazing content, new follower.

@polocholocho
10 months ago

you're great Sir. Thanks

@rodrigososa5281
10 months ago

Mf looks like an AI generated character model

@ranulagihara1113
10 months ago

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 ?

@JohnDoe-sz5jh
10 months ago

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!

@baptisteauscher2063
10 months ago

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

@Miscafer
10 months ago

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

@kanucu252
10 months ago

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

@kamruzzaman6252
10 months ago

Thanks a lot . This is a great guide!

@philippemelo5431
10 months ago

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'

}

]

}

})

],

})

@mongoosethe
10 months ago

This is a great guide! Thank you. Subscribed.

@alimaher1
10 months ago

I have an issue with runtime caching for api?

@atrex4943
10 months ago

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.

@JohnnyMentat
10 months ago

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.

@kamichikora6035
10 months ago

Some damn great stufff

@user-gj7ih4hy5f
10 months ago

For API requests, it only caches it on the second reload. Is there any workaround to make it cache on first visit

@ColinRichardson
10 months ago

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

@jasonhamm7174
10 months ago

great video 🙂