How can I use a custom service worker events in vue-cli with typescript How can I use a custom service worker events in vue-cli with typescript typescript typescript

How can I use a custom service worker events in vue-cli with typescript


First thing I had to do was add "devserver" to vue.config.js:

  devServer: {        https: true,  },  pwa: {    // configure the workbox plugin    workboxPluginMode: 'InjectManifest',    workboxOptions: {      swSrc: 'src/service-worker.js',      swDest: 'service-worker.js',    }  }...

Further I did not manage to run the vue-cli service without Certificate-Error and serving the production environment (even though I build via production mode, with the correct service worker in the /dist folder).

My current workaround is using a .NetCore application where I copy the code to wwwroot and then run the solution with IISExpress. I use the npm run ship.

"scripts": {    "serve": "vue-cli-service serve",    "build": "vue-cli-service build",    "copydist": "xcopy .\\dist ..\\wwwroot\\ /s /y",    "ship": "npm run build && npm run copydist",    "test": "set NODE_ENV=production && npm run build && serve -s dist"  },

Things I still haven't figured out are:

  • How I can use typescript for the serviceworker.
  • How to avoid the .NetCore workaround with a valid localhost cert.


As a solution for serving the application using https locally you can use the npm serve package (https://www.npmjs.com/package/serve).

Generate your certificate using mkcert (https://github.com/FiloSottile/mkcert).

serve -s -l 8080 --ssl-cert localhost.pem --ssl-key localhost-key.pem dist