vite-pwa: 网站更新-带提示的 workbox-cli

全局依赖，如果系统中已经存在，这里不用执行了

yarn global add workbox-cli

项目 app 相关

yarn add @jswork/react-pwa-promotion

提示导入 pages/_app.tsx ，核心代码看在这里

• import ReactPwaPromotion from '@jswork/react-pwa-promotion';
• <ReactPwaPromotion disabled={!isProd} interval={10 * 1000} />

/**
 * @Author: aric 1290657123@qq.com
 * @Date: 2024-10-13 09:05:33
 * @LastEditors: aric 1290657123@qq.com
 * @LastEditTime: 2025-04-13 20:55:57
 */

import { Outlet, useNavigate } from 'react-router-dom';
import { QueryClientProvider } from '@tanstack/react-query';
import { scanVite } from '@jswork/scan-modules';
import StateProvider from '@jswork/react-tiny-state';
import ModalManager from '@/shared/providers/modal-manager';
import ReactPwaPromotion from '@jswork/react-pwa-promotion';

// when vite
const moduleFiles = import.meta.glob('../shared/stores/*.ts', { eager: true });
const stores = scanVite(moduleFiles, { modules: '/stores/' });

const App = () => {
  const isProd = import.meta.env.PROD;
  // nav + back
  nx.$nav = useNavigate();
  nx.$navBack = () => nx.$nav(-1);

  return (
    <QueryClientProvider client={nx.$client}>
      <ModalManager>
        <StateProvider store={stores}>
          <Outlet />
          <ReactPwaPromotion disabled={!isProd} interval={10 * 1000} />
        </StateProvider>
      </ModalManager>
    </QueryClientProvider>
  );
};

export default App;

workbox-config.cjs 示例

module.exports = {
  maximumFileSizeToCacheInBytes: 100 * 1024 * 1024,
  globDirectory: 'dist/',
  globPatterns: ['**/*.{js,png,svg,json,txt,css,map}'],
  globIgnores: ['*/fallback.js'],
  globFollow: true,
  globStrict: false,
  swDest: 'dist/sw.js',
  skipWaiting: false,
  clientsClaim: false,
  // runtimeCache: unpkg.com
  runtimeCaching: [
    {
      urlPattern: /\/static\/js\//,
      handler: 'CacheFirst',
      options: { cacheName: 'static-js' }
    },
    {
      urlPattern: /\/static\/css\//,
      handler: 'CacheFirst',
      options: {
        cacheName: 'static-css'
      }
    },
    {
      urlPattern: /\/static\/media\//,
      handler: 'CacheFirst',
      options: {
        cacheName: 'static-media'
      }
    },
    {
      urlPattern: /^https:\/\/(unpkg\.com|cdnjs\.cloudflare\.com|at\.alicdn\.com)/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'cdn-assets',
        cacheableResponse: {
          statuses: [0, 200]
        }
      }
    }
  ]
};

package.json 配置

• 核心配置："postbuild": “workbox generateSW workbox-config.cjs"

"postbuild": “workbox generateSW workbox-config.cjs"

{
  "name": "vite-admin-business",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "postbuild": "workbox generateSW workbox-config.cjs",
  }
}