如何从registerServiceWorker.js调用Vue应用程序$ refs.components或Vuex $ store中的方法？

Question

我正在使用Vue CLI搭建的Vue PWA，默认情况下使用register-service-worker包来公开registerServiceWorker.js中的serviceWorker生命周期方法：

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.')
},
offline () {
  console.log('No internet connection found. App is running in offline mode.')
},
error (error) {
  console.error('Error during service worker registration:', error)
}

[registerServiceWorker.js导入到main.js：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'
import './registerServiceWorker'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

问题是，如何从registerServiceWorker.js的范围访问我的Vuex $ store或App.vue $ refs.components中的方法的作用域，例如>

updated () {
  // Something like
  this.$store.commit('showUpdateNotification')
  // OR
  this.$refs.updateNotification.show()
}
我知道我可以在我的应用程序中设置其他eventListener来做到这一点，但似乎最好使用registerServiceWorker.js？

我正在使用Vue CLI搭建的Vue PWA，默认情况下，它使用register-service-worker包在registerServiceWorker.js中公开serviceWorker生命周期方法：ready（）{...

Answer 1

将Vuex存储导入到registerServiceWorker.js文件中。