How to export data received by event in service worker to vue components? - vue.js

Question

I am building a notification system with Pusher. Currently I have a service worker registered with Pusher and I can receive "notifications" sent from my backend, but I can only show them in console:
importScripts("https://js.pusher.com/beams/service-worker.js");
PusherPushNotifications.onNotificationReceived = ({ pushEvent, payload }) => {
pushEvent.waitUntil(
self.registration.showNotification(payload.notification.title, {
body: payload.notification.body,
icon: payload.notification.icon,
data: payload.data
})
);
let notification = `Data recieved from notification ${payload.data.message}`;
console.log(notification);
};
I want to export the variable "notifications" to my vue components to manipulate the information coming from the backend.
I have tried to export, but it didn't work.
The service worker is placed in the "public" folder.
How can I do it?

Answer 1

Service workers communicate with a page only through messages.
function postMsg(message) {
return self.clients.matchAll().then(function(clients) {
clients.forEach(function(client) {
client.postMessage(message)
});
});
}
And then you can listen to the message inside your page :
navigator.serviceWorker.onmessage = function (evt) {
const message = evt.data
if (message.type === 'notification') {
doSomething(message)
}
}

Answer 2

I used Broadcast Channel to be able to send the notifications to my vue components.
Create a new instance of BroadcastChannel. Name it (in this case, the name of the Broadcast Channel is 'sw-messages') and use the method "postMessage" to send the message:
importScripts("https://js.pusher.com/beams/service-worker.js");
const channel = new BroadcastChannel('sw-messages');
PusherPushNotifications.onNotificationReceived = ({ pushEvent, payload }) => {
pushEvent.waitUntil(
self.registration.showNotification(payload.notification.title, {
body: payload.notification.body,
icon: payload.notification.icon,
data: payload.data
})
);
channel.postMessage({ title: payload.data});
};
In the vue component, I create (again) a new BroadcastChannel instance and then put an event handler, like this:
const channel = new BroadcastChannel("sw-messages");
channel.onmessage = function (event) {
this.pushNotification = event.data;
console.log(this.pushNotification.title);
}