vitepress配置PWA

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

安装依赖

npm

npm install @vite-pwa/vitepress

pnpm

pnpm add @vite-pwa/vitepress

配置PWA

import { withPwa } from '@vite-pwa/vitepress'
// config.mjs
import { defineConfig } from '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是否生效, 如果图标齐全网站应该会提示是否安装到主屏幕, 或者右上角会有个安装.