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

Question

I have the following registerServiceWorker.ts in my application

/* eslint-disable no-console */

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
    register(`${process.env.BASE_URL}service-worker.js`, {
        ready() {
            console.log(
                'App is being served from cache by a service worker' 

            )
        },
        registered() {
            console.log('Service worker has been registered.')
        },
        cached() {
            console.log('Content has been cached for offline use.')
        },
        updatefound() {
            console.log('New content is downloading.')
        },
        updated() {
            console.log('New content is available; please refresh.')
            //@ts-ignore
            self.skipWaiting();
        },
        offline() {
            console.log('No internet connection found. App is running in offline mode.')
        },
        error(error) {
            console.error('Error during service worker registration:', error)
        }
    })
}

How would I trigger the skipwaiting from code in the updated event?

Answer 1

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: {
       ...
    }
};