RegisterServiceWorker.js에서 Vue 앱 $refs.components 또는 Vuex $store 메서드를 호출하는 방법

RegisterServiceWorker.js에서 Vue 앱 $refs.components 또는 Vuex $store 메서드를 호출하는 방법

디폴트로는 Vue CLI를 사용하여 Vue PWA를 구축하고 있습니다.register-service-worker패키지: serviceWorker 라이프 사이클 메서드를 표시합니다.registerServiceWorker.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.')
},
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에 Import 됩니다.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')

문제는 Vuex $store 또는 App.vue $refs.components의 콜 메서드에 대한 스코프에 접속하는 방법registerServiceWorker.js,예.

updated () {
  // Something like
  this.$store.commit('showUpdateNotification')
  // OR
  this.$refs.updateNotification.show()
}

다른 event Listeners를 앱에서 설정할 수 있다는 것은 알고 있습니다만, 이 기능을 활용하는 것이 좋을 것 같습니다.registerServiceWorker.js?

에 Vuex 스토어를 Import 합니다.registerServiceWorker.js파일.

즉,

/* eslint-disable no-console */

import { register } from 'register-service-worker'
import appConfig from './app.config.json'
import store from './store'

if (process.env.NODE_ENV === 'production') {
  register(`${appConfig.router.baseUrl}service-worker.js`, {
    ready() {
      console.log(
        'App is being served from cache by a service worker.'
      )
    },
    cached() {
      console.log('Content has been cached for offline use.')
    },
    updated() {
      console.log('New content is available; please refresh.')
      store.commit('showUpdateNotification')
    },
    offline() {
      console.log(
        'No internet connection found. App is running in offline mode.'
      )
    },
    error(error) {
      console.error('Error during service worker registration:', error)
    },
  })
}

언급URL : https://stackoverflow.com/questions/60763119/how-to-call-methods-in-vue-app-refs-components-or-vuex-store-from-registerserv