Problem for register service worker vue.js

Question

I tried to turn my application into weight but I have the following errors.

registerServiceWorker.js:26 Error during service worker registration: TypeError: Failed to register a ServiceWorker for scope ('https://test/page/') with script ('https://test/service-worker.js'): ServiceWorker script evaluation failed

Service worker

/* eslint-disable no-console */

import { register } from 'register-service-worker'

register(`${process.env.BASE_URL}service-worker.js`, {
  registrationOptions: { scope: '.', type: 'module' },
  ready() {
    console.log('Service worker is active.')
  },
  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)
  }
})

vue.config.js

pwa: {
    // configure the workbox plugin
    name: 'Test',
    themeColor: '#d06161',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',
    iconPaths: {
      favicon32: 'img/icons/favicon-32x32.png',
      favicon16: 'img/icons/favicon-16x16.png',
      appleTouchIcon: 'img/icons/icon-152x152.png',
      maskIcon: 'img/icons/safari-pinned-tab.svg',
      msTileImage: 'img/icons/icon-144x144.png',
    },
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      swSrc: 'src/registerServiceWorker.js',

      swDest: 'src/service-worker.js',
      // skipWaiting: true,
      importWorkboxFrom: 'disabled',
      importScripts: 'https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js',

      // ...other Workbox options...
      exclude: [/\.htaccess$/],
    },
  },

manifest and index.html

{
  "name": "Test",
  "short_name": "Test",
  "theme_color": "#172b4d",
  "icons": [
    {
        "src": "/img/icons/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
    },
    {
        "src": "/img/icons/icon-256x256.png",
        "sizes": "256x256",
        "type": "image/png"
    },
    {
        "src": "/img/icons/icon-384x384.png",
        "sizes": "384x384",
        "type": "image/png"
    },
    {
        "src": "/img/icons/icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
    }
],
  "display": "standalone",
  "background_color": "#fff",
  "start_url": "/"
}

 <link rel="manifest" href="/manifest.json" />

So I searched everywhere for information, I was told that all this is correct but I do not know how to proceed Do you have another solution on how to proceed with this weight application? Is there a solution to this error or did I do something wrong? I just want it to be fixed and a popup to appear so that I can install it on the homescreen but there are still problems when registering the service worker

Answer 1

I don't think you've your own service-worker. The mode workboxPluginMode: 'InjectManifest' you used is for people who have their own service worker implementation. I think you should use workboxPluginMode: 'GenerateSW'. The file 'src/registerServiceWorker.js' you thought is your service worker is not. It's to help you do stuff like register your service worker. For more details, see https://www.npmjs.com/package/register-service-worker

Vue-cli constructs the service worker based on google workbox, so visit the next link for more details about when to use a specific mode : https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/

Now, when you change the mode, the option swSrc of workboxOptions is where the build process will put your generated service worker file. By default it's your build destination folder (if you don't provide a value to swSrc, it would be e.g: dist/ directory). So make sure the registration of the service worker made by the script in 'src/registerServiceWorker.js' locates the generated service worker according to the value you provide to swSrc.