Cross-tab window synchronization via BroadcastChannel
The UX Puzzle: Multitasking across screens
When I was designing the occurrences flow, I noticed that operators frequently open multiple browser windows—displaying live alert feeds on one screen and the situational GIS map on another. In traditional SPA configurations, selecting an occurrence in the alert feed automatically redirects that active page, stealing the context of the list view. To solve this, I needed a mechanism to detect if the map was already active in another tab, and if so, pan/fly the map there instead of performing a local redirect.
Discovering the BroadcastChannel API
Instead of adding complex server-side roundtrips via WebSockets, I decided to leverage the browser's native BroadcastChannel API. I realized this lightweight Web API could act as a local event bus, allowing same-origin browsing contexts (tabs, windows, frames, or service workers) to communicate on the same machine with zero server roundtrips. By instantiating a new channel under a shared name, I established a dedicated and secure local pub/sub system.
The Local Ping-Pong Check Pattern
To make the check work, I designed a local ping-pong verification handshake. The source page broadcasts a 'PING_MAP_ACTIVE' event and waits. In the map window, if the page is active, it publishes a 'MAP_ACTIVE_PONG' reply. If the source tab receives the pong within a brief 150ms window, I cancel any navigation and send the coordinate payload; otherwise, I let the system fall back to a clean SPA page routing redirect.
Engineering the coordination layer
I encapsulated this coordination inside a generic Angular service wrapping the postMessage APIs. On the mapping layer, the OpenLayers service constructor subscribes to incoming events, verifying both map initialization and route match before responding. On the UI side, I wired this check to components like occurrences view header, card floating menu, and the sidebar cameras list. This architecture creates a silent, zero-latency coordination layer that elevates the multi-window workspace experience.