Member-only story
How To Use BrowserView With Electron
See how to manage multiple windows
One of the problems I’m facing with my gest-dashboard project is managing several windows with Electron. It is a more complex problem than I thought and it prompted me to study the issue. After some testing I discarded iframe and webview. Instead, I focused on how to use Browser View with Electron.
The target? Get something similar to this: being able to load external pages into Electron, while maintaining control of the Browser Window.
Since this post is about a very specific topic I don’t cover all the steps to set up a new Electron project. For simplicity, I have used the el3um4s/memento-svelte-electron-typescript template but it is not mandatory.
Instead, it is important to understand one thing, before starting: how to use ipcMain and ipcRenderer to make the various windows communicate with Electron. There are some interesting guides on the net. In this tutorial I start from this:
But first: why use a browser view?
The question must be answered: why use a browser view instead of a simpler webview tag?
The first reason is that Electron’s own documentation recommends doing this. The web views are now being discontinued. To quote developer.chrome:
chrome.webviewTag: This API is part of the deprecated Chrome Apps platform. Learn more about migrating your app.It follows that it is better to turn to other shores. An interesting solution is to use iframes. Unfortunately, it creates more problems than it solves. Maybe in the future I will do more in-depth tests.
Fortunately, the problem has already been solved by others smarter than me. I recommend reading these two stories, they are very informative:
