Vue.js 如何在更新可用时在Vuejs pwa应用程序中支持用户？

我已经阅读了几个vuejs PWA更新示例，它似乎对我不起作用，让我对这些问题感到困惑：

1. When I build the app and run it, 
   it will instantly download the content and shows the new content.

2. It will ask every time that there is a new version.

我应该如何解决这些问题？ 我只想提示用户看到有一个新版本（例如，

v1

），如果他/她想要，在接受后更新应用程序，在有新版本（例如，

v2

）之前不要打扰他/她下一次刷新。

多亏了

pwa

更新的工作解决方案：

//vue.config.js
module.exports={
公共路径：“./”，
pwa：{
主题颜色：“42b983”，
msTileColor:#42b983“，
appleMobileWebAppCache：“是”，
选择：{
背景颜色：“42b983”
}
}
};

//registerServiceWorker.js:
从“工作盒窗口”导入{Workbox}；
让wb；
if（导航器中的“serviceWorker”）{
wb=newworkbox（`process.env.BASE\uurl}service worker.js`）；
wb.addEventListener（“控制的”，（）=>{
window.location.reload（）；
});
寄存器（）；
}否则{
wb=null；
}
导出默认wb；

//main.js
从“Vue”导入Vue；
从“/App.vue”导入应用程序；
从“/registerServiceWorker”导入wb；
Vue.prototype.$workbox=wb；
新Vue({
渲染：h=>h（应用程序）
}).$mount（“#app”）；

//App.vue
找到了一个新版本。刷新以加载它？
更新
取消
从“/components/HelloWorld.vue”导入HelloWorld；
导出默认值{
名称：“应用程序”，
组成部分：{
HelloWorld，
},
方法：{
异步更新（）{
this.prompt=false；
等待此消息。$workbox.messageSW（{type:“SKIP_WAITING”}）；
},
},
数据（）{
返回{
提示：false，
};
},
创建（）{
如果（此.$workbox）{
此.$workbox.addEventListener（“等待”，（）=>{
this.prompt=true；
});
}
},
};
#应用程序{
字体系列：Avenir、Helvetica、Arial、无衬线字体；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
边缘顶部：60像素；
}
.更新对话框{
位置：固定；
左：50%；
底部：64px；
转化：translateX（-50%）；
边界半径：4px；
盒影：0.10px rgba（0,0,0,0.5）；
填充：12px；
最大宽度：576px；
颜色：白色；
背景色：#2c3e50；
文本对齐：左对齐；
&__行动{
显示器：flex；
边缘顶部：8px；
}
&__钮扣{
右边距：8px；
&--证实{
左边距：自动；
}
}
}

我不确定Vue， 但我使用了以下代码，在React项目中工作得很好

首先，通过调用registerValidSW方法注册ServiceWorker：

函数registerValidSW（swUrl:string）{
navigator.serviceWorker
.register（swUrl）
。然后（注册=>{
registration.onupdatefound=（）=>{
const installingWorker=registration.installing；
如果（installingWorker==null）{
返回；
}
installingWorker.onstatechange=（）=>{
if（installingWorker.state==='installed'）{
if（navigator.serviceWorker.controller）{
const event=新事件（“app event newContentAvailable”）；
窗口。dispatchEvent（事件）；
}
}
};
};
})
.catch（错误=>{
console.error（'服务人员注册期间出错：'，错误）；
});
}