vite: pwa/sw(workbox配置) - cheatsheet

# 针对 build(dist) 目录里的文件
globPatterns: ['**/*.{js,css,html,ico,png,svg}']

globbedFiles = glob.sync(globPattern, {
  cwd: globDirectory,
  follow: globFollow,
  ignore: globIgnores,
  strict: globStrict,
});

# 这部分类似于 http://127.0.0.1:5174/locales/en-US.json?v=__VERSION__ 这类国际化文件
urlPattern: ({ url }) => url.pathname.startsWith('/assets/locales/'),
handler: 'StaleWhileRevalidate', // 先用缓存，有网络上的更新，会更新缓存中的

{
  urlPattern: /^https:\/\/cdnjs\.cloudflare\.com/,
  handler: 'CacheFirst',
  options: {
    cacheName: 'cdnjs-scripts'
  }
}

{
  // unpkg.com|cdn.jsdelivr.net
  urlPattern: /^https:\/\/(unpkg\.com|cdn\.jsdelivr\.net)/,
  handler: 'CacheFirst',
  options: {
    cacheName: 'unpkg-jsdelivr-cache',
    cacheableResponse: {
      statuses: [0, 200]
    }
  }
}

让我解释一下 `registerType` 的不同选项：

在 VitePWA 中，`registerType` 有以下几种可选值：

1. `"autoUpdate"`（当前使用的选项）
   - Service Worker 会自动检查更新
   - 发现新版本时会自动下载并应用
   - 适合需要保持应用始终最新的场景

2. `"prompt"`
   - 当发现新版本时，会提示用户是否要更新
   - 用户可以选择立即更新或稍后更新
   - 适合让用户控制更新时机的场景

3. `"classic"`
   - 传统的注册方式
   - 新的 Service Worker 会等待所有标签页关闭后才会激活
   - 适合对更新时机要求不严格的场景

4. `false`
   - 完全禁用自动注册
   - 需要手动编写注册逻辑
   - 适合需要完全控制注册过程的场景

你可以根据应用的具体需求选择合适的注册类型。目前配置的 `"autoUpdate"` 是最常用的选择，它能确保用户始终使用最新版本的应用。

`injectRegister: false` 这个配置项的含义是：

禁用 VitePWA 自动注入 Service Worker 的注册代码。具体来说：

1. 当设置为 `true` 时（默认值）：
   - VitePWA 会自动在你的应用中注入 Service Worker 的注册代码
   - 你不需要手动写注册逻辑

2. 当设置为 `false` 时（当前配置）：
   - 需要你手动在代码中注册 Service Worker
   - 通常在应用的入口文件（如 `main.tsx` 或 `main.jsx`）中添加注册代码
   - 手动注册的示例代码：
   ```typescript
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.register('/sw.js')
   }
   ```

设置为 `false` 的优势：
- 可以完全控制 Service Worker 的注册时机
- 可以添加自定义的注册逻辑
- 可以处理注册成功或失败的回调
- 更灵活地管理 PWA 的生命周期

这种配置通常用于需要对 Service Worker 注册过程进行精细控制的场景。

pwaAssets: {
     disabled: false,
     config: true
}

如果没有添加桌面图标的要求，可以省略这个项目。

`pwaAssets` 配置项用于控制 PWA 资源的生成，让我解释其中的选项：

```typescript:/Users/ap7/aric-notes/pwa-offline/vite.config.ts
      pwaAssets: {
        disabled: false,  // 是否禁用 PWA 资源生成
        config: true,    // 是否生成 PWA 资源配置文件
      },
```

具体含义：

1. `disabled: false`
   - 启用 PWA 资源的自动生成
   - 包括图标、启动画面等资源
   - 如果设为 true，则需要手动处理这些资源

2. `config: true`
   - 生成 PWA 资源的配置文件
   - 会自动生成不同尺寸的图标和启动画面
   - 生成的配置文件包含了这些资源的路径和用途

这些配置确保了你的 PWA 应用有完整的图标和启动画面支持，这对于提供原生应用般的体验很重要。生成的资源会被用在：
- 添加到主屏幕时的图标
- 应用启动画面
- 不同设备和平台所需的各种尺寸图标