如何在Vite-React-TypeScript项目中通过vite-plugin-pwa添加自定义Service Worker

在Vite-React-TypeScript项目的/src路径下添加了自定义Service Worker文件sw.js，使用vite-plugin-pwa实现PWA功能，但本地开发模式运行时，系统仍自动生成Service Worker，而非使用自定义的sw.js。

用户当前的vite.config.js配置如下：

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";
import { VitePWA } from "vite-plugin-pwa";
import compression from "vite-plugin-compression2";
import * as path from "path";

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
    // Load env file based on `mode` in the current working directory.
    // Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
    const env = loadEnv(mode, process.cwd(), '');
    return {
        plugins: [
            svgr(),
            react(),
            compression(),
            VitePWA({
                injectRegister: "auto",
                registerType: "autoUpdate",
                devOptions: {
                    enabled: env.VITE_ENV === "local",
                    type: "module",
                },
                srcDir: "src",
                filename: "sw.js",
                /*includeAssets: [
                    'favicon.ico',
                    'apple-touch-icon.png',
                    'mask-icon.svg',
                ],*/
                // strategies: 'injectManifest',

                manifest: {
                    name: "Safer",
                    short_name: "Safer",
                    description: "Safer - invitation only social media",
                    theme_color: "#ffffff",
                    icons: [
                        {
                            src: "pwa-192x192.png",
                            sizes: "192x192",
                            type: "image/png",
                        },
                        {
                            src: "pwa-512x512.png",
                            sizes: "512x512",
                            type: "image/png",
                        },
                        {
                            src: "maskable-icon-512x512.png",
                            sizes: "192x192",
                            type: "image/png",
                            purpose: "any maskable",
                        },
                    ],
                },
                // add this to cache all the imports
                workbox: {
                    globPatterns: ["**/*"],
                    importScripts: [""],
                    swDest: "dist/sw.js",
                },
                // add this to cache all the
                // static assets in the public folder
                includeAssets: ["**/*"],
            }),
        ],
        server: {
            port: 3000,
            open: "/",
        },
        resolve: {
            alias: {
                "@": path.resolve(__dirname, "./src"),
            },
        },
    };
});

问题核心是未启用injectManifest策略：

• vite-plugin-pwa默认使用generateSW策略，该策略会自动生成Service Worker文件，完全忽略自定义的sw.js；
• 要使用自定义SW，必须显式设置strategies: 'injectManifest'，这个策略会以你指定的SW文件为基础，注入PWA所需的代码逻辑，而非重新生成。

修改步骤：

1. 取消注释strategies: 'injectManifest'这一行；
2. 调整workbox配置（可选）：在injectManifest模式下，workbox配置主要用于辅助自定义SW，比如注入预缓存清单，可移除globPatterns: ["**/*"]这类全局缓存设置（如果自定义SW已自行处理缓存逻辑）；
3. 确认srcDir和filename正确指向自定义SW文件（当前配置srcDir: "src", filename: "sw.js"已正确，无需修改）。

修改后的VitePWA核心配置片段：

VitePWA({
    injectRegister: "auto",
    registerType: "autoUpdate",
    devOptions: {
        enabled: env.VITE_ENV === "local",
        type: "module",
    },
    srcDir: "src",
    filename: "sw.js",
    strategies: 'injectManifest', // 启用自定义SW策略
    manifest: {
        // 保持原有manifest配置不变
        name: "Safer",
        short_name: "Safer",
        description: "Safer - invitation only social media",
        theme_color: "#ffffff",
        icons: [
            {
                src: "pwa-192x192.png",
                sizes: "192x192",
                type: "image/png",
            },
            {
                src: "pwa-512x512.png",
                sizes: "512x512",
                type: "image/png",
            },
            {
                src: "maskable-icon-512x512.png",
                sizes: "192x192",
                type: "image/png",
                purpose: "any maskable",
            },
        ],
    },
    workbox: {
        injectManifest: {
            swSrc: 'src/sw.js',
            swDest: 'dist/sw.js',
        },
    },
    includeAssets: ["**/*"],
}),

修改后重启开发服务，系统就会使用src/sw.js中编写的自定义Service Worker，而非自动生成。

内容的提问来源于stack exchange，提问作者Ahashan Alam Sojib