应该使用inject manifest parametr并通过工作盒准备方法编写自定义serviceWorker（工作盒文档非常糟糕，我认为是这样。你可以使用我的配置中的一些方法）
vite.config.ts：

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/js/app.tsx', ],
      refresh: true,
    }),
    react({
      fastRefresh: false
    }),
    VitePWA({
      registerType: 'autoUpdate',
      outDir: path.resolve(__dirname, 'public'),
      manifest: manifest,
      manifestFilename: 'manifest.webmanifest', // Change name for app manifest
      injectRegister: false, // I register SW in app.ts, disable auto registration

      // HERE! For custom service worker
      srcDir: path.resolve(__dirname, 'resources/js/'),
      filename: 'serviceWorker.js',
      strategies: 'injectManifest',

      workbox: {
        globDirectory: path.resolve(__dirname, 'public'),
        globPatterns: [
          '{build,images,sounds,icons}/**/*.{js,css,html,ico,png,jpg,mp4,svg}'
        ],
      },
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'resources/js'),
      '@hooks': path.resolve(__dirname, 'resources/js/hooks'),
      '@assets': path.resolve(__dirname, 'resources/js/assets/'),
      '@components': path.resolve(__dirname, 'resources/js/components')
    },
    extensions: ['.js', '.ts', '.tsx', '.jsx'],
  },

  // define: {
  //     // By default, Vite doesn't include shims for NodeJS/
  //     // necessary for React-joyride. And probably for another libs
  //     global: {},
  // },
});

/resouces/js/serviceWorker.js：

import {ExpirationPlugin} from 'workbox-expiration';
import {createHandlerBoundToURL, precacheAndRoute, cleanupOutdatedCaches} from 'workbox-precaching';
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response/CacheableResponsePlugin';

// Register precache routes (static cache)
precacheAndRoute(self.__WB_MANIFEST || []);

// Clean up old cache
cleanupOutdatedCaches();

// Google fonts dynamic cache
registerRoute(
    /^https:\/\/fonts\.googleapis\.com\/.*/i,
    new CacheFirst({
        cacheName: "google-fonts-cache",
        plugins: [
            new ExpirationPlugin({maxEntries: 500, maxAgeSeconds: 5184e3}),
            new CacheableResponsePlugin({statuses: [0, 200]})
        ]
    }), "GET");

// Google fonts dynamic cache
registerRoute(
    /^https:\/\/fonts\.gstatic\.com\/.*/i, new CacheFirst({
        cacheName: "gstatic-fonts-cache",
        plugins: [
            new ExpirationPlugin({maxEntries: 500, maxAgeSeconds: 5184e3}),
            new CacheableResponsePlugin({statuses: [0, 200]})
        ]
    }), "GET");

// Dynamic cache for images from `/storage/`
registerRoute(
    /.*storage.*/, new CacheFirst({
        cacheName: "dynamic-images-cache",
        plugins: [
            new ExpirationPlugin({maxEntries: 500, maxAgeSeconds: 5184e3}),
            new CacheableResponsePlugin({statuses: [0, 200]})
        ]
    }), "GET");

// Install and activate service worker
self.addEventListener('install', () => self.skipWaiting());
self.addEventListener('activate', () => self.clients.claim());

// Receive push notifications
self.addEventListener('push', function (e) {
    if (!(
        self.Notification &&
        self.Notification.permission === 'granted'
    )) {
        //notifications aren't supported or permission not granted!
        console.log('nononono')
        return;
    }

    if (e.data) {
        let message = e.data.json();
        e.waitUntil(self.registration.showNotification(message.title, {
            body: message.body,
            icon: message.icon,
            actions: message.actions
        }));
    }
});

// Click and open notification
self.addEventListener('notificationclick', function(event) {
    event.notification.close();

    if (event.action === 'farm') clients.openWindow("/farm");
    else if (event.action === 'home') clients.openWindow("/");
    else if (event.action === 'training') clients.openWindow("/mining-training");
    else if (event.action === 'dns') clients.openWindow("/shops/dns");
    else if (event.action === 'ali') clients.openWindow("/shops/aliexpress");
    else if (event.action === 'avito') clients.openWindow("/avito");
    else if (event.action === 'friends') clients.openWindow("/friends");
    else if (event.action === 'locations') clients.openWindow("/locations");
    else if (event.action === 'vk-chat') clients.openWindow("https://vk.me/join/au1/k0nOTjLasxMO6wX50QuyPfYosyWdPEI=");
    else clients.openWindow(event.action); // Open link from action
}, false);

vite-pwa-plugin只有一些关于创建webpush - documentation的信息
我在这个repo中找到了一些service-worker的代码，并从vite.config.ts config生成的旧默认值中复制了一些代码

今天必须用Firebase通知来做这件事。我是这样做的，以防将来这能帮到别人
创建了服务工人文件（包括完整版本，因为我发现很难找到有关如何添加通知的信息）

importScripts("https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js");

if ("serviceWorker" in navigator) {
    navigator.serviceWorker
        .register("../firebase-messaging-sw.js")
        .then(function (registration) {
            console.log("Registration successful, scope is:", registration.scope);
        })
        .catch(function (err) {
            console.log("Service worker registration failed, error:", err);
        });
}

// Initialize the Firebase app in the service worker by passing the generated config
var firebaseConfig = {
    apiKey: "your apiKey",
    authDomain: "your authDomain",
    projectId: "you get the point by now right?",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
};

firebase.initializeApp(firebaseConfig);

// Retrieve firebase messaging
const messaging = firebase.messaging();

messaging.onBackgroundMessage(function (payload) {
    console.log("Received background message ", payload);

    const notificationTitle = payload.notification.title;
    const notificationOptions = {
        body: payload.notification.body,
        icon: "/images/yourLogo.png",
    };

    self.registration.showNotification(notificationTitle, notificationOptions);
});

在我的（React）应用程序中，我注册了这样的前台通知

import { initializeApp } from "firebase/app";
import { getMessaging, getToken, onMessage } from "firebase/messaging";

const firebaseConfig = {
    apiKey: "your apiKey",
    authDomain: "your authDomain",
    projectId: "you get the point by now right?",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
};

const firebaseApp = initializeApp(firebaseConfig);
const messaging = getMessaging(firebaseApp);

export const getFirebaseToken = (setTokenFound) => {
    return getToken(messaging, {
        vapidKey: "key is generated for you on firebase",
    })
        .then((currentToken) => {
            if (currentToken) {
                console.log("current token for client: ", currentToken);
                setTokenFound(true);
                // Track the token -> client mapping, by sending to backend server
                // show on the UI that permission is secured
            } else {
                console.log("No registration token available. Request permission to generate one.");
                setTokenFound(false);
                // shows on the UI that permission is required
            }
        })
        .catch((err) => {
            console.log("An error occurred while retrieving token. ", err);
            // catch error while creating client token
        });
};

export const onMessageListener = () =>
    new Promise((resolve) => {
        onMessage(messaging, (payload) => {
            console.log("payload", payload);
            resolve(payload);
        });
    });

并在我的App.tsx文件中这样调用它。现在我们得到一个请求通知权限的提示，如果用户接受，我们可以在控制台中看到用户令牌

getFirebaseToken(setTokenFound);
    isTokenFound ? console.log("Token found") : console.log("Token not found");

    onMessageListener()
        .then((payload) => {
            toast.success(payload.notification.title, payload.notification.body);
            console.log(payload);
        })
        .catch((err) => console.log("failed: ", err));

在我的vite.config.js中，在从defineConfig()返回的对象的顶层，我所要做的就是像这样导入脚本

workbox: {
    importScripts: ["./firebase-messaging-sw.js"],
},

这最后一点花了我最长的时间来弄清楚…希望它能帮助到别人