title: How to dispatch event on Push receive using Workbox?
body: <p>I have a VueJS component where I listen for <code>pushMessageEvent</code> :</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;VueBotUI
          :options=&quot;options&quot;
          :is-open=&quot;isOpen&quot;
          :bot-typing=&quot;botTyping&quot;
          :input-disable=&quot;inputDisable&quot;
          :messages=&quot;messages&quot;
          @msg-send=&quot;onSend&quot;
  
      &gt;&lt;/VueBotUI&gt;
    &lt;/div&gt;
  
  &lt;/template&gt;
  &lt;script&gt;
  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(&quot;------------------&quot;)
        console.log(e.detail)
      },
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>And I want to fire this <code>pushMessageEvent</code> when I get a Push event in my service-worker:</p>
  <pre><code>/* eslint-disable */
  importScripts(
    &quot;https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js&quot;
  );
  
  // 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(&quot;push&quot;, (event) =&gt; {
    if (event.data) {
      console.log(`[Service Worker] Push had this data: &quot;${event.data.text()}&quot;`);
  
      PushMsgEvent.detail = event.data.text();
      //document.dispatchEvent(PushMsgEvent);
    }
  });
  
  workbox.precaching.precacheAndRoute([]);
  
  </code></pre>
  <p>but I can't use <code>document.dispatchEvent</code> since I get <code>document is not defined</code>, is it a workaround  to fire this event and catch it in my component ?</p>
  <p>I have read about <code>workbox-window</code> but I can't figure out how to fire my event from the service-worker in order to catch it in the component</p>