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

vite 中使用

yarn add --dev vite-plugin-pwa

典型配置

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      injectRegister: 'inline',
      // base: '/',
      // registerType: 'autoUpdate',
      workbox: {
        globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
        globIgnores: ['**/fallback.js?v=*'],
        ignoreURLParametersMatching: [/^v$/], // 正则匹配查询参数的名称 'v'
        skipWaiting: false,
        clientsClaim: false,
        runtimeCaching: [
          {
            // /assets/locales/zh-CN.json?v=1725113024176
            urlPattern: ({ url }) => url.pathname.startsWith('/assets/locales/'),
            handler: 'CacheFirst', //
            options: {
              cacheName: 'locales-cache',
              expiration: {
                maxEntries: 3
              },
              cacheableResponse: {
                statuses: [0, 200] // 仅缓存状态码为 0 或 200 的响应
              }
            }
          },
          {
            urlPattern: /^https:\/\/cdnjs\.cloudflare\.com/,
            handler: 'CacheFirst',
            options: {
              cacheName: 'cdnjs-scripts'
            }
          },
        ]
      }
    })
  ],
  server: {
    host: '0.0.0.0'
  },
  preview: {
    // disable gzip
    headers: {
      // Service-Worker-Allowed
      'Service-Worker-Allowed': '/'
    }
  }
});

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]
    }
  }
}