Need help with vite-plugin-pwa?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

antfu
167 Stars 10 Forks MIT License 73 Commits 0 Opened issues

Description

Zero-config PWA for Vite

Services available

!
?

Need anything else?

Contributors list

# 6,332
vue3
TypeScr...
vscode
Visual ...
57 commits
# 184,441
TypeScr...
HTML
vite
webexte...
7 commits
# 73,986
HTML
Shell
wamp-pr...
Vue.js
1 commit
# 669,287
TypeScr...
HTML
workbox
vite
1 commit
# 1,307
Vue.js
JavaScr...
Svelte
mdl
1 commit
# 182,590
HTML
lodash
Webpack
vite
1 commit
# 648,538
Vue.js
TypeScr...
HTML
1 commit

vite-plugin-pwa - Zero-config PWA for Vite


Features

  • Generate Service Worker with Offline support (via Workbox)
  • Auto inject Web App Manifest
  • WIP: Strategies option
  • WIP: Meta injection
  • WIP: Icons generation for different dimensions

Usage

ℹ️ Vite 2 is supported from

v0.3.x
, Vite 1's support is discontinued.

npm i vite-plugin-pwa -D # yarn add vite-plugin-pwa -D

Add it to

vite.config.js
// vite.config.js
import { VitePWA } from 'vite-plugin-pwa'

export default { plugins: [ VitePWA() ] }

Configuration

Simple (generateSW)

VitePWA({
  manifest: {
    // content of manifest
  },
  workbox: {
    // workbox options for generateSW
  }
})

WIP: Advanced (injectManifest)

// sw.js
import { precacheAndRoute } from 'workbox-precaching'
// self.__WB_MANIFEST is default injection point
precacheAndRoute(self.__WB_MANIFEST)
// vite.config.js
VitePWA({
  strategies: 'injectManifest',
  manifest: {
    // content of manifest
  },
  injectManifest: {
    // workbox options for injectManifest
  }
})

Full config

Check out the type declaration src/types.ts and the following links for more details.

Sponsors

This project is part of my Sponsor Program

License

MIT License © 2020 Anthony Fu

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.