서비스 워커 이벤트가 호출되고 있음을 App.vue에 알리다

서비스 워커 이벤트가 호출되고 있음을 App.vue에 알리다

Vue의 PWA 플러그인이 포함된 Vue CLI 3을 사용하여 작성한 프로젝트가 있습니다.여기 '접근 #3' 섹션에 설명된 대로 사용자에게 앱 내 "새로 고침" 링크를 클릭하도록 지시하는 배너를 표시합니다.

단, Vue.js 앱에서는 서비스 워커 코드가 다음과 같이 실행되기 때문에main.js스낵바 배너는 내 안에 내장되어 있다.App.vue컴포넌트, 이 컴포넌트를 기동하는 방법을 모르겠습니다.showRefreshUI()서비스 워커가 한 번 실행한 방법updated()이벤트가 호출되었습니다.

main.js(해당 부분)

import Vue from 'vue';
import App from './App';
import './registerServiceWorker';

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

register-service-worker(해당 부분)

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

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    updated (registration) {
      console.log('New content is available; please refresh.');
      // I'd like to call App.vue's showRefreshUI() method from here.
    },
  });
}

App.vue(해당 부분)

<script>
export default {
  name: 'App',
  mounted () {
    // Alternatively, I'd like to call this.showRefreshUI() from here
    // when the service worker's updated() method is called.
  },

  methods: {
    showRefreshUI () {
      // My code to show the refresh UI banner/snackbar goes here.
    },
  },
};
</script>

전화할 수 없는 경우showRefreshUI()로부터의 방법.main.js, 어떻게 하면, 에서 무언가를 건네줄 수 있을까요?updated()에 대한 이벤트.App.vue의mounted()라이프 사이클 훅을 사용하여 동일한 기본 작업을 수행할 수 있습니까?

내가 마지막으로 할 수 있는 해결책은main.js손도 대지 않고, 대신:

register-service-worker(해당 부분)

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

const UpdatedEvent = new CustomEvent('swUpdated', { detail: null });

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    updated (registration) {
      console.log('New content is available; please refresh.');
      UpdatedEvent.detail = registration;
      document.dispatchEvent(UpdatedEvent);
    },
  });
}

App.vue(해당 부분)

<script>
export default {
  name: 'App',
  data () {
    return {
      registration: null,
    };
  },
  mounted () {
    document.addEventListener('swUpdated', this.showRefreshUI);
  },
  beforeDestroy () {
    document.removeEventListener('swUpdated', this.showRefreshUI);
  },
  methods: {
    showRefreshUI (e) {
      this.registration = e.detail;
      // My code to show the refresh UI banner/snackbar goes here.
    },
  },
};
</script>

잘 모르겠습니다만, 커스텀 이벤트를 이용하실 수 있을 것 같습니다.이런 게 너한테 효과가 있을지도 몰라.

1) 커스텀 이벤트를 만듭니다.main.js..

main.js

import Vue from 'vue';
import App from './App';
import './registerServiceWorker';

const updateEvent = new Event('SWUpdated');

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

2) 서비스 워커가 갱신되면 커스텀이벤트를 디스패치합니다.

register-service-worker

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

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    updated (registration) {
      console.log('New content is available; please refresh.');
      document.dispatchEvent(updateEvent);
    },
  });
}

3) 이벤트 리스너를 의 문서 오브젝트에 첨부합니다.mounted사용자 지정 이벤트를 수신하는 후크입니다.에서 이벤트 리스너를 삭제합니다.beforeDestroy갈고리를 채우다

App.vue

<script>
export default {
  name: 'App',
  mounted () {
    document.addEventListener('SWUpdated', this.showRefreshUI);
  },
  beforeDestroy () {
    document.removeEventListener('SWUpdated', this.showRefreshUI);
  },
  methods: {
    showRefreshUI () {
      // My code to show the refresh UI banner/snackbar goes here.
    },
  },
};
</script>

언급URL : https://stackoverflow.com/questions/53680243/inform-app-vue-a-service-worker-event-is-being-called