I’m working on a React Web app, primarily designed to run in Chrome, that should support views across multiple desktop monitors and tabs. I’m wondering if any of you have seen any examples of web apps that implement any of the following features, or have any leads on a framework to use?
Some features I’m exploring include:
- Launching new tabs into other monitors – From monitor/window/tab 1, I’d like to be able to launch a new full screen window into monitor 2. If a window is already open, I’d like to launch a second tab in that window.
- Closing other tabs automatically – When a specific tab in window 1 is closed by the user, I’d like for a linked tab in window 2 to close as well. Ex: window 1 (parent) launches a new tab in window 2 (child). When window 1 is closed, I’d like window 2 to close as well.
- Switching active tabs automatically – In monitor 1, a user has tabs 1A and 1B. Tab 1A launches tab 2A into monitor/window 2, and tab 1B launches tab 2B into monitor/window 2. As the user switches between tabs 1A and 1B in monitor one, ideally the tabs in monitor 2 would automatically switch between tabs 2A and 2B respectively.
- Passing user inputs between multiple monitors – Tabs 1 and 2 are split across two different monitors. As the user clicks or scrolls through a module in Tab 1, that input information is passed to tab 2 and information is updated.
Some of these features can be tackled individually, and I’ve found some of the following resources:
- Launching new tabs into other monitors
- Google presentation API – seems to be a cool new way to access external displays for presentation. May be limited in the number of tabs it organizes though, and is still in trial mode
- Closing other tabs automatically
- Detecting a browser or tab closing – can potentially use this to send a message to child tab and have them close as well
- Switching active tabs automatically
- Detect if a user has switched away tabs (has 2020 update). Could use this to listen on all tabs, to determine which is the active tab on monitor one. Haven’t found much on how to switch monitor 2 to the respective tab
- Passing user inputs between multiple monitors
Ideally, I would like this to be done in Chrome so that it’s lightweight for the end user. However, I am also exploring converting it to an Electron app depending on if these features are possible in a web app.
Additionally, another idea is forgoing the concept of multiple independent tabs, and only using two dedicated tabs across two monitors. Instead of launching actual independent new tabs, the existing view would just be updated within the webpage (think like how you switch between different conversations in your email. It’s all in one actual tab, but it renders a different “tab” per conversation and you can switch between).
Inbox, snoozed, important, etc are all treated as separate “tabs” from a UI perspective.
Thank you so much in advance – any advice, direction, experience, or suggestions are greatly appreciated!
Other interesting resources:
- Multi-screen apps using neo.mjs – really cool ability to drag items and interact between monitors. Tackles features #4 well, but doesn’t include much on the other features
- Good intro blog on multi-monitor features – talks about opening new windows, but seems to suggest Chrome lacks the ability to launch windows across different monitors.
