Search code examples
javascriptvue.jsprogressive-web-appsservice-worker

Service worker not generated when building vue 3


I have installed "@vue/cli-plugin-pwa": "^4.5.12", in my package.json, I have also added workbox configuration in my vue.config.js. The problem is, when I'm building the project with npm run build:prd which has my script: vue-cli-service build --mode prod.example, there is no service-worker.js in my dist folder.

this is my vue.config.js:

module.exports = {
    // ...other vue-cli plugin options...
    pwa: {
        // configure the workbox plugin
        workboxPluginMode: 'InjectManifest',
        workboxOptions: {
            // swSrc is required in InjectManifest mode.
            swSrc: 'src/service-worker.js',
            // ...other Workbox options...
        }
    }
}

I've tried to move the pwa plugin configuration inside package.json, but it doesn't work as well. I just can't find my service-worker.js in my dist folder.

The current workaround is I place my service-worker.js inside my pubic folder. The problem with this approach is that the service worker will not be updated at all every time there is a new release. Currently the purpose is to notify the client if the new version is available, but I can't trigger the update event because the service-worker.js is static


Solution

  • I found the problem, @vue/cli-plugin-pwa will only generate service-worker if process.env.NODE_ENV === 'production'. meanwhile in my project, when i run npm run build the NODE_ENV is not automatically set to production but it's still development I don't know what is causing this behavior, but the problem is solved if i add NODE_ENV=production in all of my .env. With this, precache-manifest....js will be generated on every build.