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