Add PWA support to the blog
Installation
First, you need to install the @vite-pwa/vitepress plugin
sh
npm i -D @vite-pwa/vitepresssh
pnpm add -D @vite-pwa/vitepresssh
yarn add -D @vite-pwa/vitepressConfiguration
-> .vitepress/config.ts
ts
import { defineConfig } from 'vitepress'
import { withPwa } from '@vite-pwa/vitepress'
export default withPwa(
defineConfig({
//...
pwa: {},
}),
)Then inject the component into the slot
-> .vitepress/theme/index.ts
ts
import { h } from 'vue'
import Theme from 'vitepress/theme'
import RegisterSW from './components/RegisterSW.vue'
export default {
...Theme,
Layout() {
return h(Theme.Layout!, null, {
'footer-after': () => h(RegisterSW),
})
},
}For more details, refer to the @vite-pwa/vitepress documentation