VitePress 添加 PWA 支持

PWA 全称是 渐进式 Web 应用，它是一种可以安装到系统，并具有像应用一样体验的新式 Web 应用。

对 VitePress 来说，添加 PWA 支持非常简单。

首先，安装 @vite-pwa/vitepress 插件：

npm i @vite-pwa/vitepress -D

之后在 VitePress 的 config 文件中将自己的配置通过 withPwa 方法包装一下，并在其中添加 PWA 相关的配置项。

import { defineConfig } from 'vitepress'
import { withPwa } from '@vite-pwa/vitepress'

export default withPwa(defineConfig({
  // 自己的 VitePress 配置

  // PWA 配置
  pwa: {
    mode: 'development',
    registerType: 'autoUpdate',
    injectRegister: 'script-defer',
    includeAssets: ['favicon.svg'],
    manifest: {
      name: '佳佳的博客',
      short_name: 'JiaJia Blog',
      theme_color: '#ffffff',
      icons: [
        {
          src: 'pwa-192x192.png',
          sizes: '192x192',
          type: 'image/png',
        },
        {
          src: 'pwa-512x512.png',
          sizes: '512x512',
          type: 'image/png',
        },
        {
          src: 'pwa-512x512.png',
          sizes: '512x512',
          type: 'image/png',
          purpose: 'any maskable',
        },
      ],
    },
    workbox: {
      globPatterns: ['**/*.{css,js,html,svg,png,ico,txt,woff2}'],
      // 这个配置默认是 2M，如果网站文件很多，打包的文件大小若超过这个值，build 会失败，可以根据自己需要调整
      // maximumFileSizeToCacheInBytes: 5 * 1024 * 1024
    },
    experimental: {
      includeAllowlist: true,
    },
    devOptions: {
      enabled: true,
      suppressWarnings: true,
      navigateFallback: '/',
    },
  },
}))

刚开始看了官网仓库主页的文档，以为只要添加一个空的 pwa: {} 配置就可以了，结果没有任何效果。上面的配置主要摘自 官网示例的配置文件 。

在 public 目录添加配置中使用的图片后，项目发布就可以在 Chrome 浏览器中看到安装应用的图标了。