vue.js - 如何在 vue 应用程序中使用 register-service-worker 进行跳过等待？

Question

registerServiceWorker.ts我的申请中有以下内容

/* 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)
        }
    })
}

如何从更新事件中的代码触发跳过等待？

标签： vue.jsservice-worker

Answer 1

我想出了如何使用 vue.config.js 将服务工作者配置为在我的 vue 应用程序中自动跳过等待。

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