Service worker event click is not called on multiple tabs
I am using Web Push protocol to send push notifications. I have registered a service worker and signed a contract with pushManager in one tab. When I post messages, the push event can receive notifications and log messages to the console.
I open the same url and the same service worker registers and returns the same subscription using the snippet below.
serviceWorkerRegistration.pushManager.getSubscription()
But when I post messages, the first tab only logs messages to the console. the second tab doesn't log messages to the console.
When I close the first tab and send messages, I can now see messages in the second tab, recorded by the service worker.
Note. Both tabs are loaded from the same source. Example:https://localhost:8080/WebPush
Below is the code of my service worker
self.addEventListener('push', function(event) {
if (event.data) {
console.log('This push event has data: ', event.data.text());
}
else {
console.log('This push event has no data.');
}
});
At the same time, when I try to use firebase, I can get messages on both tabs.
Can anyone help me get messages on both tabs using web push.
Thanks in advance.
source to share
I figured out one possible way to achieve this use case.
After triggering a push event, using the service worker clients API, I will find out the number of open clients in the same source and send a message to all clients.
Below is the piece of code that needs to be added inside the push event in the production service.
clients.matchAll({
type: 'window',
includeUncontrolled: true
})
.then(function(windowClients)
{
windowClients.forEach(function(windowClient){
windowClient.postMessage({
message: 'Received a push message.'+event.data.text(),
time: new Date().toString()
});
});
});
And add a service worker listener.
navigator.serviceWorker.addEventListener('message', function(event) {
console.log('Received a message from service worker: ', event.data);
});
This will help you receive push messages across multiple tabs.
source to share
the service worker will respond to the push event once. This will happen on the thread spawned by the push notification. It won't expand for every browser tab. In fact, it will or should be a separate instance of the service worker, other than the instance used by any customer. The push notification client is an OS, sort of a headless client, if you will.
Yes, you will see console messages. I suspect that Chrome internals are on the thread looking for the first open client with a console to send these messages.
I can't talk about the actual streaming model used by Chrome, FireFox, Opera, Samsung, or Edge in regards to how different responses to events are streamed, but they should be essentially separate when it comes to fetch, push and background synchronization.
Hopefully this helps you understand the concept, but what you see is what I expect to see, one console logs messages from a push initiated sw stream.
source to share