Progressive Web App

One Vite plugin adds service worker, manifest, and offline support to your Vue app — no Workbox config to write by hand.

4 min read Level 2/5 #vue#pwa#service-worker

What you'll learn

Install vite-plugin-pwa
Configure manifest and registerType
Handle the auto-update flow

A PWA gets you an installable app icon, offline caching, and push notifications — all powered by a service worker. vite-plugin-pwa wires up Workbox so you don’t have to write the service worker yourself.

Install

npm i -D vite-plugin-pwa

Configure

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'My App',
        short_name: 'App',
        theme_color: '#4FC08D',
        icons: [
          { src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
          { src: '/icon-512.png', sizes: '512x512', type: 'image/png' },
        ],
      },
    }),
  ],
})

Update Strategies

autoUpdate — install new SW immediately, reload on next nav.
prompt — let the user choose when to refresh.

For prompt, use the registration helper:

import { useRegisterSW } from 'virtual:pwa-register/vue'

const { needRefresh, updateServiceWorker } = useRegisterSW()

Show a toast when needRefresh.value becomes true and call updateServiceWorker(true) on click.

What You Get

Offline: pre-cached app shell.
Installable: meets browser PWA criteria.
Update flow: managed for you.

Testing

Service workers only register on https:// (or localhost). Use npm run build && npm run preview to test PWA behavior locally.

Build & Bundle Analysis →