vitepress配置PWA

vitepress使用PWA感觉还是挺简单的, 有一个库可以快速配置.

安装依赖

npm

npm install @vite-pwa/vitepress

pnpm

pnpm add @vite-pwa/vitepress

配置PWA

// config.mjs
import { defineConfig } from 'vitepress';
import { withPwa } from '@vite-pwa/vitepress';

export default withPwa(
	defineConfig({
        // 原先的defineConfig内容
		pwa: {
			outDir: '.vitepress/dist',
			registerType: 'autoUpdate',
			includeManifestIcons: false,
			manifest: {
				name: `water's blog`,
				short_name: 'blog',
				descriptionription: '日志',
				theme_color: '#ffffff',
				background_color: '#ffffff',
				display: 'fullscreen',
				start_url: '/',
				icons: [
					{
						src: 'icon-192x192.webp',
						sizes: '192x192',
						type: 'image/webp',
					},
					{
						src: 'icon-512x512.webp',
						sizes: '512x512',
						type: 'image/webp',
					},
				],
			},
			injectManifest: {
				injectionPoint: undefined,
			},
			workbox: {
				// 定制缓存策略
				runtimeCaching: [
					{
						// 匹配文章相关的js文件
						urlPattern: /posts.+\.js$/,
						handler: 'StaleWhileRevalidate',
						options: {
							cacheName: 'article-content',
							expiration: {
								maxEntries: 100, // 最多缓存100篇文章
								maxAgeSeconds: 7 * 24 * 60 * 60, // 缓存一周
							},
						},
					},
				],
				// 预缓存重要资源
				globPatterns: [
					'/',
					'**/*.{css,ico,webp}',
					'index.html',
					'offline.html',
				],
				skipWaiting: true,
				clientsClaim: true,
			},
			devOptions:{
				enabled:false,// 开发环境是否启用
				type:'module'
			}
		},
	})
);

如果需要自己编写sw.js或者需要使用其它sw功能的话, 只需在injectManifest里修改就可以了

injectManifest:{
    swSrc:'/sw.js'//你的sw.js地址
}

测试PWA

配置好之后, 可以在开发者工具的应用里service workers查看sw是否生效, 如果图标齐全网站应该会提示是否安装到主屏幕, 或者右上角会有个安装.