Estoy tratando de hacer PWA con mi proyecto vue 3 pero algo no va bien. Aquí está mi código:

vue.config.js

 module.exports = { css: { loaderOptions: { sass: { prependData: `@import "@/styles/_variables.scss";`, }, }, }, pwa: { name: "vue-petinder", themeColor: "#4DBA87", msTileColor: "#4DBA87", appleMobileWebAppCapable: "yes", appleMobileWebAppStatusBarStyle: "black", // configure the workbox plugin workboxPluginMode: "InjectManifest", workboxOptions: { //wSrc is required in InjectManifest mode. swSrc: "/src/registerServiceWorker.js", // ...other Workbox options... }, }, };

registrarseServiceWorker.js

 import { register } from "register-service-worker"; if (process.env.NODE_ENV === "production") { register(`${process.env.BASE_URL}service-worker.js`, { ready() { console.log( "App is being served from cache by a service worker.\n" + "For more details, visit https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" ); }, registered() { console.log("Service worker has been registered."); }, cached() { console.log("Content has been cached for offline use."); }, updatefound() { console.log("New content is downloading."); }, updated() { console.log("New content is available; please refresh."); }, offline() { console.log( "No internet connection found. App is running in offline mode." ); }, error(error) { console.error("Error during service worker registration:", error); }, }); }

Estoy tratando de ver los mensajes del trabajador del servicio en la consola, pero no funciona. ¿Qué estoy haciendo mal?