Vue 3 Layer0 Static Example with Service Worker Enabled

[rishi-raj-jain]

Finally, service worker with Vue (2 and 3) enabled, and working demos deployed with Layer0! 🚀

Vue 3:
GitHub: https://github.com/rishi-raj-jain/vue3-layer0-starter
Layer0 Link: https://rishi-raj-jain-vue3-layer0-starter-default.layer0.link/

Vue 2:
GitHub: https://github.com/rishi-raj-jain/vue2-layer0-starter
Layer0 Link: https://rishi-raj-jain-vue2-layer0-starter-default.layer0.link/

Steps taken other than Layer0 Docs (docs do not enable service worker as of now):

• Creating a service-worker.js at the root of the vue project with layer0 example service worker code
• Using vue.config.js to inject the service worker with the package workbox-webpack-plugin and not by vue add pwa (https://github.com/rishi-raj-jain/vue3-layer0-starter/blob/main/vue.config.js)
• Creating a registerServiceWorker.js to register the service worker only in production (same as how vue add pwa generates this file only)
• Two additional dependencies used: register-service-worker (by Evan You) and workbox-webpack-plugin (by GoogleChrome)

P.S. It's been a good learning and my first experience configuring webpack and registering service worker in a non-intuitive manner, after trying hands-on with different config, walking through workbox n vue Github issues (GoogleChrome/workbox#1513, vuejs/vue-cli#5119) and the confusing Vue documentation (https://cli.vuejs.org/core-plugins/pwa.html#example-configuration, while this seems like the instant solution, the service-worker.js is not compiled and is appended as is to the generated service-worker.js by cli-plugin-pwa).