Vite-PWA plugin
In the Vite ecosystem of plugins, there is an excellent zero-configuration Vite-PWA plugin (https://vite-pwa-org.netlify.app/). Out of the box, it provides us with great functionality without much manual work. We install the plugin as a developer dependency with the following command in the terminal:
$ npm install –-save-dev vite-plugin-pwa
Once it has been installed, we must register it in the Vite configuration. Modify the vite.config.js
file to match the following:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
plugins: [
vue(),
VitePWA({
registerType: "autoUpdate",
injectRegister: 'auto',
devOptions: { enabled:true },
workbox: {
globPatterns: ['**/*.{js,css...