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

Question

我有一个使用 Vue CLI 3 创建的项目，其中包含 Vue 的 PWA 插件。我想显示一个横幅，提示用户单击应用程序内的“刷新”链接，如所述 here在“方法 #3”部分。

但在我的 Vue.js 应用程序中，因为服务 worker 代码是在 main.js 中执行的，而我的 snackbar 横幅是内置在我的 App.vue 组件中的，我不确定如何在服务 worker updated() 事件被调用后触发我的 showRefreshUI() 方法。

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>

如果我不能从 main.js 调用 showRefreshUI() 方法，我怎么可能从 updated() 传递一些东西事件到 App.vue 的 mounted() 生命周期钩子(Hook)来完成同样的基本事情？

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>