Tengo un componente VueJS donde escucho 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> Y quiero activar este pushMessageEvent cuando reciba un evento Push en mi trabajador de servicio:
/* 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([]); pero no puedo usar document.dispatchEvent ya que el document is not defined , ¿es una solución alternativa activar este evento y capturarlo en mi componente?
He leído sobre workbox-window pero no sé cómo activar mi evento desde el trabajador del servicio para capturarlo en el componente.
Mi solución:
trabajador-servicio.js:
// 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())); }); }); } });mi componente.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) } }