Electron - How to duplicate a BrowserWindow?

Question

I'm trying to get a dynamic window system working in my application. Something very similar to what Google Chrome does when you have two browsers opened and you want to move one tab to the other instance of chrome by dragging & dropping it.

I can probably listen to the dragged events to get the DOM reference of the tab, copy its state/route inside my front-end application, passe it to the secondary BrowserWindow, and recreate the tab instance to the other BrowserWindow. But I will loose the current modifications of the first tab. In chrome, when you move a tab, you don't lose the content of what is loaded inside your tab.

I can't really find a way to duplicate the content of a BrowserWindow, sharing/moving the content of the DOM without losing its state, or having some heavy construction logic of my tab instances to prevent losing anything.

If you have a direction about how I can achieve such a thing, I'm a little lost. Thank you.

question from:https://stackoverflow.com/questions/65854643/electron-how-to-duplicate-a-browserwindow

Answer 1

I finally found a way to achieve this.

A BrowserWindow can have a BrowserView attached to it.

So when I create a BrowserWindow, I pass an additional argument like so :

var win = new BrowserWindow({
   webPreferences:{
      additionalArguments: ['mainbrowserwindow']
   }
})

//Then I load my index.html file for this BrowserWindow
win.loadFile('/path/to/index.html');

This will tell to my Front-End that this instance is generated by a "Main Window" view. This way I can use a single index.html file for every part of my application. I just need a little bit of routing based on this additional Arguments.

After that, I create a new BrowserView, I pass it another additional Argument to tell it to load a specific page of my application (let say a user-info tab)

var view = new BrowserView({
   webPreferences: {
      additionalArguments:['page=userinfo']
   }
})

//Then I load the same index.html for this view
view.loadFile('/path/to/index.html')

I finally add my BrowserView to my BrowserWindow

win.setBrowserView(view)

In my front-end side, the route 'mainbrowserwindow' will only generate the tabs of my application. The 'userinfo' route is the content of the tab.

Now I can create another BrowserWindow, and fill it the 'userinfo' view with the same command.

win2.setBrowserView(view)

This will move the first userinfo page to the other browserwindow without losing the data in memory.

In theory this should work. But there is obviously a lot more to do (IPC communication to synchronize the tabs between multiples BrowserWindow, be sure an empty tab cannot exist, destroy a tab completely to avoid a memory leak). And, of course, the application will render & hold in memory a lot of pages, and I don't think it's possible to serialize a BrowserView inside a file.