@chengpeiquan/vite-plugin-pwa

Zero-config PWA for Vite

Usage no npm install needed!

<script type="module">
  import chengpeiquanVitePluginPwa from 'https://cdn.skypack.dev/@chengpeiquan/vite-plugin-pwa';
</script>

README

This is a modification package for debugging base on v0.5.2, please do not use. Please use the original package vite-plugin-pwa .

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