I have a web dashboard built using Vue.js that relies on WebSockets (Pusher) to receive orders in real-time. When an order is received, a sound plays to notify the user. Everything works fine when the tab is active, but as soon as the browser tab becomes inactive or snoozed, the WebSocket connection seems to stop receiving data, and the sound notification doesn’t play until the tab is revisited.
What I’ve tried:
I’ve tried implementing a Web Worker to keep the WebSocket connection alive, but it doesn’t seem to work when the tab is snoozed.
I also explored using service workers, but I’m not sure how to make them interact with WebSocket and play sound on the page.
What I need:
Is there any way to achieve the following:
- Keep receiving WebSocket data (or simulate it) when the tab becomes
inactive or snoozed. - Send a push notification to the user’s browser (outside the web page)
when a new order arrives, so the user can be notified and return
to the tab. - Play a sound or show some visual notification when an order is
received, even if the tab is not active.
Any suggestions or best practices for handling WebSocket communication and notifications while the tab is snoozed would be greatly appreciated!
You need to sign in to view this answers
