How to do skipwaiting with register-service-worker in vue app?

I figured out how to configure the service worker to automatic skip waiting in my vue application, using vue.config.js.

const webpack = require('webpack');module.exports = {    lintOnSave: false,    chainWebpack: (config) => {        ...    },    configureWebpack: {        ...    },    pwa: {        ...        workboxPluginMode: 'GenerateSW',        workboxOptions: {            skipWaiting: true        }    },    pluginOptions: {      ...    },    css: {        // Enable CSS source maps.        sourceMap: process.env.NODE_ENV !== 'production'    },    devServer: {       ...    }};

The problem here is that you're trying to call skipWaiting from the browser context of the code, not from the Service Worker context.

The code you pasted in your question is executed by the browser execution thread, it so calledly "normal JS execution". However, skipWaiting does NOT exist in that execution context. skipWaiting is part of the Service Worker execution context. You can call skipWaiting from the Service Worker script file itself that your browser context JS registers.

This line

register(`${process.env.BASE_URL}service-worker.js`, {

registers a new Service Worker which lives inside a file called "service-worker.js". In THERE (that file!) you are able to call self.skipWaiting().

Check out the MDN documentation here. There's an example of calling the method. https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting

I just found this article after 2 days of fighting through various service worker articles. It's a super elegant and working (copy/paste) solution to show a snackbar prompt (using vuetify) asking the user if they want to refresh. Highly recommended!