- Generate Service Worker with Offline support (via Workbox)
- Auto inject Web App Manifest
- Prompt for new content refreshing
- Automatic reload when new content available
- Advanced (injectManifest)
- WIP: Icons generation for different dimensions
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()
]
}
VitePWA({
manifest: {
// content of manifest
},
workbox: {
// workbox options for generateSW
}
})
// 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.
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.
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
}
})
// main.ts
import { registerSW } from 'virtual:pwa-register'
const updateSW = registerSW({
onOfflineReady() {
// show a ready to work offline to user
},
})
You will need to include workbox-*
dependencies as dev dependencies
.
// 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
}
})
You can use Typescript to build your service worker, you can find an example written for a Vue 3 project:
sw.ts.
To resolve service worker types, just add WebWorker
to lib entry on your tsconfig.json
file, for example:
"lib": ["ESNext", "DOM", "WebWorker"],
Check out the type declaration src/types.ts and the following links for more details.
If your TypeScript build step or IDE complain about not being able to find modules or type definitions on imports, add the following to the compilerOptions.types
array of your tsconfig.json
:
// tsconfig.json
{
"compilerOptions": {
"types": [
"vite-plugin-pwa/client"
]
}
}
Since this plugin will not generate the service worker on development
, you can test it on local following these steps:
- install
https-localhost
as adev
dependency:npm i --save-dev https-localhost
- add
https-preview
script to yourpackage.json
:
"https-preview": "serve dist"
- build your app and run
https-preview
:npm run build && npm run https-preview
.
First time you run it, it will ask you about installing a certificate (that will be generated for you),
confirm installation on OS (keychain on macosx and certificate manager on windows) and open https://localhost
on browser.
This project is part of my Sponsor Program
MIT License © 2020 Anthony Fu