(jazzy music) Hello TPAC. This is Diego from the Microsoft Edge Team working on PWAs.

And today, I'm gonna share with you a demo that showcases how the features that we're working on allow your installed web app to integrate with the desktop operating system, be it Windows, Linux, or even Mac OS. So, the first thing that we need to know is how to acquire the PWA.

In this case, there are two simple ways of doing it.

The first one is through the browser and most modern browsers are going to prompt you to install the application.

So, in this case, I'm getting prompted to install the PWA logo printer, and you're gonna see that the apps gonna come out of the browser window, and it's going to also ask me if I wanna pin it to the taskbar, pin it to the start menu, create a desktop shortcut, which in this case, I'm gonna allow and autostart on device login.

So there might be the case that you want your PWA running always.

I'm allowing all of these.

You can see how we have now the icon here on the desktop.

We have the entry here on the start menu, and we also have an entry here in the taskbar.

The other way that you can get a PWA is by submitting your PWA to the store.

What's really good about this is that you actually don't need any change in the code itself.

You can just go through the PWA Builder process, which is what I did, and you'll get the file generator that you need in order to upload it to the store.

And in a couple of days, you're gonna have your PWA discoverable through the Microsoft store.

So now that we've gotten the acquisition out of the way, we're gonna start talking about a couple of things.

First of all, responsive design and theming.

This might be quite obvious, but if it's a modern web application, you expect this web application to be able to be responsive to the layout that you're going to be using this application in.

Now, this is not a surprise for our PWA printer, and you can see how it's actually adapting to the layout of the screen.

Another thing that's also adapting to is the theme of the operating system.

So I'm gonna go ahead, and I'm going to click the light theme and we can see how the installed web application is well aware of the theme and it's actually changing accordingly.

So those are a couple of good things that we would want to have integration of the installed web app with the native OS.

Another thing is the window controls overlay.

And this is an interesting new feature, which allows the developers to take control of the area that would be normally assigned to the title bar.

In this example that we have on screen, we see that there is the traditional title bar, which has the title of the application.

And on the other side, we have the window controls, which would be the minimize, maximize, and close.

Now with this API, you can use JavaScript and CSS in order to put certain content into the title bar.

In this case, I want this, you know, custom title that I have, and these buttons is action buttons for a new logo, for save the logo, and for sharing the logo to go in the title bar just at it's displayed at the moment.

Now, this to everyone is the one that allows me to show the title bar or to hide the title bar.

If I go ahead and close this application and I'm gonna open it now from the start menu, we're gonna see that the state of window controls overlay is remembered through different openings and closings of the app.

So, in this case, again, what I'm gaining is that I'm getting the area that was before reserve for the title bar, and I can create a better and nicer user interface for my application.

The next thing that I wanna show you is the shortcuts, which is another great way of integrating your installed web application with the operating system.

If I were here to click on new logo, it's just going to change the colors of the logo into something that's completely gray.

And then here I would be able to, let's say, start customizing the logo as I wanted.

The default way that the application is always gonna launch is with a random combination of colors.

So again, you see, I'm launching it here.

It's random.

I'm gonna launch it again.

It's gonna be random again.

But there are ways that I can deep link into different sections of the PWA, and this is where the shortcuts now.

The shortcuts will be defined in the manifest file, and if you're in a mobile device, then those are the ones that appear when you press and hold.

And on Windows, they're the traditional jump list.

In this case, we can see how I can create a random logo, which is the default way of starting.

And also, I can just click on create a blank logo, which is just gonna open the installed web app deep linked to the state or the page that I wanted.

So another very easy way of integrating your application into the operating system.

I wanna share with you now a bit about the web share API just so you can see it in action.

And I'm gonna go ahead and open the application from the start menu.

Once we have it here, okay, I'm just gonna change this color of the A.

Actually, let's just regenerate this logo into something, this is nicer.

Just put something more bluish.

Okay.

So I like this one.

So when I'm ready to share this logo, I can, in this case, use the web share API.

The application is generating an SVG file, and I'm taking this SVG file, and when you're implicating the API, it will call the native OS share prompt.

And in this case, you can see that there is an item that is attached, and I can go and share, in this case, I'm gonna email it from myself to myself.

And there you go, sent.

So again, this is the same experience that you would be having if you would be sharing something from a native application.

And the other thing that you can share, you can see, well, here, how a notification is coming for the email a client that I've actually received this.

Another thing that you can share our links in this case, let's say that I wanted to share the whole experience, the application itself, I can just click on here.

And in this case, I am sharing a link.

I am going to share it with Twitter.

So just so you get an idea, it's already pre-populating with the text title and URL that I want and okay.

Oh, and it's because I've just tweeted it because this is the second time that I'm recording this demo, but you can see how I can just pretty much tweet.

I'm just gonna put here a heart, and there you go.

I've just actually tweeted from sharing through the native operating system.

Now, something interesting as well is the idea of actually sharing, not from the application but to the application.

And to showcase this, I am just going to open a browser window and I'm going to this repository of colors 'cause I wanna select one on which to base the PWA logo.

So this type of hot pink coral kinda looks very nice.

I actually like this color, so let's go here and share.

Now, this is going to bring the share dialogue of the browser, but I have the option of going into the native share dialogue of the operating system.

And you can see here that while when I click on this one, I can share with an application and I am able to register the PWA, the printer, in this case, as a shared target.

So once I share this, it's just gonna pretty much parse the, I think it's the title of the page and I'm extracting the color.

So you can see how I'm creating a PWA logo that's based on this webpage.

All of this with a web share target.

The next thing that I want to show you is how can you handle schemes, either custom schemes or pre-defined schemes with your application.

So I'm gonna open another browser window and I am gonna navigate to this PWA logo palette repo that I created.

Basically, what you need to know is that I am defining a custom protocol, which starts with WebPlus pointer.

And you can see it, well, probably you can't see it 'cause it's very small, but it's here in the lower-left corner of the browser.

And in this case, I can just click, for example, in this case, is gonna give me the official PWA logo colors.

So, it's asking me for permission to open the printer, which is the application that is registered to handle these type of schemes.

And there you go.

I'm gonna try another one here, Edgy Ocean Wave.

Again, same process.

I can actually tell it to remember my choice just in case.

And you can see how we are creating this logo based on a protocol.

Now one more time so you can see it.

This one's based on the flag of France.

What I wanna show you here is that basically, you can have different applications, both native and web applications, let's say PWAs, that can handle a protocol.

So this dialogue is the one that's meant to let you select, which is the application that will handle this protocol.

So again, I'm going to allow it, and you can see here, I have my custom PWA logo.

Really, really nice.

I'm going to continue now with file handlers.

And for this part of the demo, I'm actually gonna open a notepad and I am going to create a comma-separated value with three colors.

We're gonna create red, R, G, green, and B, just because we all know these colors and it's a good way to keep it simple.

I'm gonna save this file, yes, on the desktop.

And I'm just gonna save it as rgb.csv, save.

Okay.

We can see how we have a logo.

Sorry, a file.

A new SVG file.

I registered the installed web application as a file handler, so if I go here into open with, I can see that I can open it with Excel, with Visual Studio Code, WordPad, but I can also open it with our PWA application.

And in this case, it's asking for permission.

I need to kinda like ask for permission the first-time that I'm running this, and I'm going to allow it.

And it's telling me that, you know, it just loaded the colors that were in the file, the R, the G, and the B.

So these are file handling from the application.

And I wanna show you as well.

This might be interesting.

I'm gonna close here.

Let's start a new logo.

Okay.

I'm just gonna change this to a tone of, there you go.

That's nicer.

I'm gonna show you now the file system access API.

In this case, I can save the logo and through parameters that are in the code, I'm telling the application to open a save dialogue, starting in the pictures folder, because we are handling images for this type of application to set the custom PWA logo name as the file name that's going to appear and to save it as an SVG file.

In this case, I'm not gonna save any pictures.

Just for this demo, I'm gonna put it here on the desktop.

And this is my new PWA logo.

And I'm gonna click on save.

So we can see that we've gotten this file generated.

It's just been saved from the PWA.

I can pretty much just open it.

It's gonna open on the default.

Yeah, there you go.

It's opening the SVG file in Edge, but we can see how we have the SVG file that now we can use.

So there you go.

I think I've given you 10 quick tips on how to integrate your installed PWA with your desktop operating system.

Hopefully, this will help you create a better user experience for all your users.

Thank you very much.

(upbeat music)