Managing Windows

[00:00:00]
>> But because now when we are a PWA, now we have our own window, we're not in a browser tab. So, we can manage Windows in a different way. I'm not sure how many of you were on the web when that browser was there, that's Netscape 1.0. I actually started with Netscape 2.0.

[00:00:20]
So I'm not so old. On that time, we didn't have tabs. Everything was a window. And from that time and even IE, that's IE3, there was a way to move windows. Window.moveTo, resizeTo, open. And today, they are kind of dead. You cannot move the window from JavaScript because you don't own the window.

[00:00:46]
There are other tabs in the window, in the Chrome window or the Safari window. So if you try to use those old APIs from the 90s, they don't work unless you are a PWA. So when you start a PWA, you have your own window and you can create more windows of the same app.

[00:01:04]
So here, I have a demo that I did with a PWA. So you install the PWA, and then those buttons are just executing JavaScript, they can open more windows of the same app. You can see the same orange on the title bar, and you can resize them, move them around, talking to the OS directly, okay?

[00:01:30]
So it's a very simple API, moveTo, resizeTo, it works over the window. And also, we have new APIs. For example, there is one known as multi-screen windows placement API. That can also work with websites, not just with installed PWAs. In this case, you can actually get information about screens and screens in plural.

[00:01:55]
Because now you can connect more than one screen to a computer to display, so you can get how many screens do we have? And you can even pick, if you wanna move a window from your PWA to another screen and you can get details about that, okay? Another API, windows-controls-overlay.

[00:02:16]
This one is brand new, I haven't seen so many PWAs using it. The idea is that you change the property in the manifest. For those of you without experience yet in PWA, now you have a homework. After this course, you need to go and take the PWA one. But, there is a file known as the manifest file and the manifest file will give you metadata, will give the OS metadata about your app.

[00:02:43]
Well, that's changing that metadata. When you set that property, now you can do things like this. Your own window will let you render HTML and CSS content in the title bar, okay? So this is a Wikipedia PWA and you can see there is a search bar directly in the title bar, okay?

[00:03:10]
So that's a new API and it's currently available in Chrome and Edge on desktop.