IndexedDB shared between windows?

[HarveyKandola]

Context:

1. Create main/renderer windows via new BrowserWindow()
2. Create additional "background" processing window that is hidden via new BrowserWindow()
3. Additional window at step 2 handles data fetch processing without affecting main rendered window.

Problem:

IndexedDB is different for renderer window and additional window.

Expected:

IndexedDB should be the same/shared between all windows within application.

FYI, this is how electron-forge "works" -- all windows share the same IndexedDB instance/

Make sense?

[HarveyKandola]

Some more context:

There are three packages: main, renderer and worker.

I suspect the issue is the wahy Vite starts up renderer and worker windows -- probably separate processes in node terms -- but I am no expert!

[cawa-93]

As far as I know, the chrome engine is responsible for share of states. So for the state of your windows to be synchronized, its must work on one origin and one session.

I tried to reproduce your example but did not encounter a problem. The only time the state of the windows was out of sync was when one of them opened as http://localhost:3030/ and other as file://c/path/to/project/file/index.html.

Try opening two identical windows with same url.

const options = { ... }

mainWindow = new BrowserWindow(options)
mainWindow2 = new BrowserWindow(options)
    
...

await mainWindow.loadURL(pageUrl)
await mainWindow2.loadURL(pageUrl)

By default, things like localStorage or IndexedDB should be synchronized.

[HarveyKandola]

I should add: your project rocks, expecially compared to the usual webpack+electron-forge template!

[cawa-93]

Because http://localhost:3000/ and http://localhost:3001/ -- are different origins 🤷🏻‍♂️

[HarveyKandola]

Yup, because each window has to load it's own script:

Renderer:

        <script src="./src/renderer.ts" type="module"></script>

Worker:

        <script src="./src/worker.ts" type="module"></script>

Hence you have two index.html files -- one for Renderer and one for Worker.

This works well with Webpack under Electron-Forge.

[HarveyKandola]

Some more info on this pattern:

https://medium.com/swlh/how-to-run-background-worker-processes-in-an-electron-app-e0dc310a93cc

[cawa-93]

As I said before, both windows must work on the same origin. Two URLs have the same origin if the protocol, port (if specified), and host are the same for both.

You may find it useful to look at multi-page-app

Or just use workers ...

[HarveyKandola]

Just managed to get this to work (without resorting to Workers: https://www.electronjs.org/docs/tutorial/multithreading).

Approach (in case it helps others):

1. Open each window (Renderer and Worker) using same HTML and JS entry script.
2. During new BrowserWindow({...}) call, mark the window as follows:

webPreferences: {
            ...,
            additionalArguments: ["--my-window-identifier"],

(Where Renderer and Worker windows have differing additionalArguments.

3. Within renderer.ts read the process.argv array to see which window is being processed and boot accordingly.

That seems to work well.