where to init workbox in vue3 PWA

Question

I have a vu3/cli setup for a PWA APP.

{
  
   "name": "vue-pwa-test",
   "version": "0.1.0",
   "private": true,
  
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
  
   "dependencies": {
     "core-js": "^3.8.3",
     "js-cookie": "^3.0.5",
     "register-service-worker": "^1.7.2",
     "vue": "^3.2.13",
     "vue-pwa-install": "^1.1.0",
     "vue router": "^4.0.3",
     "vuex": "^4.0.0"
   },

   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-plugin-pwa": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0"
   }

}

the installation query works so far, now I've tried to create my own service worker.

here my vue.config.js

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

   transpileDependencies: true,
  
   pwa: {
     name: "VUE-PWA-TEST",

     themeColor: '#00FF00',
     msTileColor: '#0000FF',
     appleMobileWebAppCapable: 'yes',
     appleMobileWebAppStatusBarStyle: 'black',
    
     workboxPluginMode: "InjectManifest",
     workboxOptions: {
       swSrc: "./src/service-worker.js",
       exclude: [/_redirect/, /\.map$/, /_headers/]
     }
   }

})

in the serviceworker.js I trie to cache images

const { precacheAndRoute } = workbox.precaching;
const { registerRoute } = workbox.routing;
const { CacheFirst, StaleWhileRevalidate } = workbox.strategies;
const { Plugin: ExpirationPlugin } = workbox.expiration;
const { Plugin: CacheableResponsePlugin } = workbox.cacheableResponse;

// ?????????? without it throws itself.__WB_MANIFEST not found ????
precacheAndRoute(self.__WB_MANIFEST);


workbox.core.setCacheNameDetails({ prefix: "appname" });

self.addEventListener("message", (event) => {
   if (event.data && event.data.type === "SKIP_WAITING") {
     self.skipWaiting();
   }
});

/**
  * The workboxSW.precacheAndRoute() method efficiently caches and responds to
  * requests for URLs in the manifest.
  */
self.__precacheManifest = [].concat(self.__precacheManifest || []);
precacheAndRoute(self.__precacheManifest, {});

// cache image and render from the cache if it exists or go t the network
registerRoute(
   ({ request }) => request.destination === "image",
   new CacheFirst({
     cacheName: "images",
     plugins: [
       new CacheableResponsePlugin({
         states: [0, 200],
       }),
       new ExpirationPlugin({
         max entries: 60,
         maxAgeSeconds: 2 * 24 * 60 * 60, // cache the images for only 2 days
       }),
     ],
   })
);

Now the build process throws 'workbox' is not defined, I thought the pwa plugin handles the workbox Api.

finally i try to start a set of json and mp3 files before starting the application, maybe someone has some suggestions for this.