Minimize use of websocket connections from the frontend #4160
Description
Background / Context
We need to optimize how changes get synced from the frontend to the backend in multi-tab scenarios.
Current behavior
Each tab in which a Studio channel is open, creates its own websocket connection with the backend. This includes tabs that have the same channel open, meaning the frontend would receive duplicate change objects from the backend.
Desired behavior
There are a few different approaches, the following are two:
- Move change syncing and websocket connections to a service worker, and have each tab send messages to the worker which synchronizes them to the backend. Since the service worker would be controlling the websocket connections for each open channel, it could de-duplicate multiple connections.
- Simply use a service worker to relay changes from one tab to another where the websocket connection is open. This is similar to how we initially had the sync polling, but could be problematic because of the browser's timer throttling or memory saver.