madmod / 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.

• Manifest
• Workbox

Sponsors

This project is part of my Sponsor Program

License

MIT License © 2020 Anthony Fu