如何使用工作箱在推送接收时分派事件？

Question

我有一个VueJS组件，可以监听pushMessageEvent：

<template>
  <div>
    <VueBotUI
        :options="options"
        :is-open="isOpen"
        :bot-typing="botTyping"
        :input-disable="inputDisable"
        :messages="messages"
        @msg-send="onSend"

    ></VueBotUI>
  </div>

</template>
<script>
export default {
  components: {
    VueBotUI
  },
  data: function () {
    return {
      options: {botTitle: 'test',},
      user: {msg: null,},
      msgRegex: /^[a-zA-Z ]+$/,
      messages: []
    }
  },

  mounted() {
    document.addEventListener('pushMsgEvent', this.printPush);
  },
  beforeDestroy () {
    document.removeEventListener('pushMsgEvent', this.printPush);
  },
  methods: {
    printPush (e) {
      console.log(e)
      console.log("------------------")
      console.log(e.detail)
    },
  }
}
</script>

当我在我的服务人员中有一个推送事件时，我想启动这个pushMessageEvent：

/* eslint-disable */
importScripts(
  "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"
);

// Load all ENVERYWHERE enviroment variables
importScripts('./env-vars.js')

const PushMsgEvent = new CustomEvent('pushMsgEvent', { detail: null });

workbox.core.skipWaiting();
workbox.core.clientsClaim();

self.__WB_MANIFEST;

// Listen to push event
self.addEventListener("push", (event) => {
  if (event.data) {
    console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);

    PushMsgEvent.detail = event.data.text();
    //document.dispatchEvent(PushMsgEvent);
  }
});

workbox.precaching.precacheAndRoute([]);

但是我不能使用document.dispatchEvent，因为我得到了document is not defined，触发这个事件并在组件中捕获它是一种解决办法吗？

我读过关于workbox-window的文章，但我不知道如何从服务工作者那里激发事件，以便在组件中捕获它。

Answer 1

我的解决方案：

服务-工人.：

// Listen to push event
self.addEventListener("push", (event) => {
  if (event.data) {
    self.clients.matchAll().then(clients => {
      clients.forEach(client => {
        client.postMessage(JSON.stringify(event.data.text()));
      });
    });
  }
});

我的component.vue：

mounted() {
    navigator.serviceWorker.addEventListener('message', event => {
      let msg = event.data;
      this.printPush(msg);
    });
  },
  beforeDestroy () {
    navigator.serviceWorker.removeEventListener('message', event => {
      this.printPush(event);
    });
  },
  methods: {
    printPush (e) {
      console.log(e)
    }
}