Minimize use of websocket connections from the frontend

[bjester]

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:

1. 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.
2. 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.

[yash1378]

@bjester @MisRob can i work on this issue ?

[MisRob]

Hi @yash1378, thanks for volunteering. It seems some decisions need to be made here. I'd recommend issues that we marked as ready for contribution.

We currently have contributing opportunities in three repositories. You can see the contributing guidelines including links to issues suitable for contribution for each repository here:

Kolibri: https://github.com/learningequality/kolibri/blob/release-v0.16.x/CONTRIBUTING.md Kolibri Design System: https://github.com/learningequality/kolibri-design-system/blob/main/CONTRIBUTING.md Studio: https://github.com/learningequality/studio/blob/unstable/CONTRIBUTING.md