通知App.vue正在调用Service-Worker事件

Question

我有一个使用Vue CLI 3创建的项目，其中包括Vue的PWA插件。我想显示横幅提示用户点击描述一个在应用程序“刷新”链接在这里的“方法3”部分。

但是在我的Vue.js应用程序中，因为service-worker代码是在中执行的main.js，并且快餐栏横幅已内置到App.vue组件中，所以我不确定showRefreshUI()一旦updated()调用service-worker 事件后如何触发我的方法。

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()生命周期挂钩以完成相同的基本操作？

Answer 1

对我来说，最终的工作解决方案是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>