Thread by @html5test

I've been playing with the new Multi-Screen Window Placement API and trying to show content from an iframe on an external screen.

So why would I need something like this?

I have the Point of Sale web app.

I want to support a dual screen setup. That means it runs the cash register on the main screen. And it has a second screen facing the customer on which I want to show the receipt.

You probably seen a similar setup in a shop somewhere.

The good thing... using the window.getScreenDetails() API I can get an overview of all the connected screens on my system. Determine the relative placement, names and sizes.

So I can create a pretty UI for selecting the right screen to use for the receipt.

So how can we display content on the second screen...

Well, we need to open a second window there somehow and then we can communicate between the two windows using BroadcastChannel. Send the data from the main window and render it. That part is relatively easy.

But how can we open a window on the second screen?

We could open a new window using the trusty (aka ancient) window.open() API. We can position the window using x and y coordinates... But we're then stuck with browser UI on the customer screen. Ugh!

Oh... and the windows get blocked by the popup blocker unless open them in response to a user gesture. So we cannot open them automatically when our web app starts up... That is unfortunate for our use case.

And before we do all of that, we need to see if the window is already open... Because window management is really bad we need to send a ping over the BroadcastChannel and listen for a response. If we get a response, we don't actually have to open the window, it already is open.

To get rid of the browser UI we need to tell the window to go full screen. And that means we need to call the requestFullscreen() API. And that is fine. We can do that and the API was even extended so that we can request full screen on a specific display. Yay!

But we have to do that from the window itself. We cannot do that from the main window. And we cannot use our BroadcastChannel to send a message to tell it to go full screen. Because the API requires a user gesture again.

So essentially that means we have to put a button on our main UI to manually open a second window on the main screen. Fine.

That window will show our receipt, but for now we will hide it and show a big button instead. Then we have to manually click it to go to full screen.

Another approach I tried was using an iframe instead. Instead of opening a window I could just create an iframe and call requestFullscreen on that!

And it worked!

The receipt was full screen on the right screen. Yay.

But it also caused the main window to be hidden.

So nope.

Which was reasonable because the iframe is an element in the main window. But what if we full screen the contents of the iframe...

Well we can't do that from the main window, because it requires a user gesture...

So for now I guess our Electron app will just work automatically. While the browser version will require the user to click on two extra buttons and deal with permission requests.

But it works and that is amazing!

\cc @tomayac