JSPM

Features

• Generate Service Worker with Offline support (via Workbox)
• Auto inject Web App Manifest
• Prompt for new content refreshing
• Automatic reload when new content available
• WIP: Icons generation for different dimensions

Usage

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
  }
})

Prompt for new content

// main.ts
import { registerSW } from 'virtual:pwa-register'

const updateSW = registerSW({
  onNeedRefresh() {
    // show a prompt to user
  },
  onOfflineReady() {
    // show a ready to work offline to user
  },
})

// when user clicked the "refresh" button
updateSW()
// the page will reload and the up-to-date content will be served.

You can find an example written in Vue 3: ReloadPrompt.vue.

Automatic reload when new content available

With this option, once the service worker detects new content available, then it will update caches and will reload all browser windows/tabs with the application opened automatically to take the control.

The disadvantage of using this option is that the user can lose data in other browser windows / tabs in which the application is open and is filling in a form.

If your application has forms, it is recommended that you change the behavior to use default prompt option to allow the user decide when to update the content of the application.

Configuration

With this option, the plugin will force workbox.clientsClaim and workbox.skipWaiting to true.

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

Runtime

// main.ts
import { registerSW } from 'virtual:pwa-register'

const updateSW = registerSW({
  onOfflineReady() {
    // show a ready to work offline to user
  },
})

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