Desktop PWAs. About time.

I am thrilled to be able to spend some time with you talking about the future of web apps.

You see, this is something I've been curious about for a long time.

So get comfy, grab a drink and join me.

Over the years I've thought about how stereoscopic 3D can change the way we use the website or an app.

Or how VR can revolutionize the core experiences of the web.

Or how to bring a design language from native to web in order to create a unified flow for web apps.

Or even how new form factors like foldable devices can impact our experiences.

This has been all really enlightening and the capabilities nowadays for the platform are mind blowing.

But I personally think that one of the most important things that plays a key role right now for the future of the platform are web apps themselves.

For many reasons.

We are now at a crossroads where we must continue to push the limit of what is capable with the web in order to create a democratic and capable platform that works for everyone.

With the appearance of PWAs some years ago, it felt like the start of something magical, of something truly new.

Millions of developers could leverage their existing skills to deliver their experiences to even more devices in a way that millions of users would expect based on the look, feel and behavior of native applications.

We've come a long way in web development in a very short time, back from when the good practice was to have a web for mobile and web for desktop up to now where it's possible to have one code base that will cover mobile, desktop and even installed applications.

The more time I spend around the web, the more I convince myself that when it comes to the future, what matters is the platform's ability to permeate current widespread paradigms and cement itself as the default medium.

The paradigm at hand is that of apps and the app economy.

By medium, I am referring to development, consumption and distribution.

The benefits are openness, safety and accessibility.

After all, those are some of the main tenets of the web that keep it going strong, even after some other platforms rise, fall, or try to displace it with walled gardens.

Overall, there is an interesting opportunity for the web to set itself as an attractive platform for a strong app ecosystem.

So-apps they've certainly changed the way we consume content and even what we expect from a software user experience perspective.

All of this is scoped by the applications that we use on a daily basis.

But apps can be expensive and have limited reach.

And as I've mentioned before, the web platform can commoditize, modernize and create a better and more accessible user experience in the end.

So let's focus on PWS, a set of technologies that allow the web platform to engage into the future by bridging the so-called native app gap into oblivion.

We mostly know the drill-secure browsing context, plus manifest files, plus a service worker is going to give us a PWA.

And I am old enough to remember the add to home screen.

This was pretty much what these three things that I've just mentioned got us.

And only in some mobile browsers.

You would get prompted that you can install the web app or PWA that you were using.

And this generally meant that you would only have an icon on the home screen.

It was the beginning of web apps gaining more and more parity with their native counterparts.

Fast forward a couple of years.

And now that same add-to-homescreen concept is incomplete, and to be frank quite obsolete.

Now PWAs can properly integrate with the operating system.

We're talking App Drawer, System Settings and access to specialized hardware.

The whole mobile package.

It's about time that we get deeper integration with desktop platforms.

And this is where I can provide you with great insights about how installed web applications can really shine.

I will give you a glimpse into the future of PWAs on desktop platforms, albeit a very close proximity future.

Since everything that I will be showing you is cutting-edge experimental technology that is shipping in either Canary, Beta, or Dev channels of Microsoft Edge and has support in other browsers as well.

Now here you can see the list of cutting-edge features that we will examine today.

Responsive design, OS theme support, custom titlebars, shortcuts, sharing from the app, sharing to the app, handling schemes, links, files, and access to the file system itself.

There are another two things that we won't be covering in the demo, but they're still important to mention for an accurate talk about desktop PWAs, which is Badging and Push Notifications, but they've been already in the market a bit, so we won't be talking about them today.

Now the demo app we will be using has a bit of history behind it.

Many moons ago, the term 'progressive web app' was coined and there was interest among the developer community to have a way of visually gathering around the novel concept.

We needed an icon, a logo, a beacon of hope, some sort of banner on which we can all gather behind-kind of like the concept of why Batman uses a secret identity, but a bit more geekier and, uh, with less black rubber.

At the time Maxime Salnikov the leader of the Rebel Alliance, set his tasks to open up submissions for this noble task.

Long story short, the PWA lettermark was born and it didn't take long for it to appear on stage at Google I/O and Microsoft Build.

Now, one of the ideas behind said lettermark was that like the concept it represented of progressive web apps, it would blend and adapt to the different marketing and branding ideas that the community was looking into.

So while there was some official recommended, you know, color scheme, the, kind of like, better recommendation was to make it your own and have fun with it.

The PWA logo printer, or 'PWinter' as I like to call it, was born.

And as the logo designer, it drastically reduced the amount of custom logo requests that I was getting on my inbox.

And that pretty much rocked.

The app we will be using to showcase these features is a reimagination or rejuvenation of the first version of the printer from several years ago.

Kind of like, I guess what The Matrix 4 is trying to do at the moment.

Mostly because I lost access to the GitHub account where it was hosted and the fact that it wasn't really well-documented.

So let's take a quick look at the application itself to understand what it does.

It's as simple and straightforward application that provides an easy way to showcase these features.

We're going to go to the website, we're going to install it.

And then we're going to get a glimpse of where and how the magic starts.

I am opening the website at the moment.

And as you can see, okay, full screen, as you can see, you can pretty much create a custom colored logo.

The way that's coded is that every single time you go into the application or you reload, it's just going to create some random combination for these colors.

Once you design, or you know, decide that you want a color and let's just change this maybe to something that will contrast better with a dark background.

There you go.

You can preview it in light or dark backgrounds and you can, you know, start from a neutral blank logo.

If you wanted, by clicking here and new logo, you can save the logo or you can share this logo.

Okay.

So we're going to proceed to install this application.

Let's take a look at the app itself to understand what it does.

It's a simple and straightforward application that provides an easy way to showcase all the features that we're going to be talking about today.

We're going to go to the website, install it and get a glimpse at what the application does.

As you can see, we have three controls that allow me to change the colors of the logo in order to create my custom logo.

Once I'm happy with it, I can preview this logo both in light or dark backgrounds, and I can start a new logo from scratch.

Save this logo or exported, and this is pretty much it.

Now the website itself is prompting me that there is an application available and that I can install it if I want it.

So I get this prompt and I proceed to install this application.

What we're going to see now is that the application itself is coming outside of the browser.

And it's telling me that it's, you know, that it's been installed and that it can safely run in its own window.

It'll integrate with other windows features and I can launch it pretty much from the start menu from the Windows task bar or from the desktop.

I also get additionally a way to directly pin it to task bar, start, create a shortcut or allow it to run once I log in to my computer.

So in this case, I'm even going to create a desktop shortcut and I'm going to allow this, and there you go.

We can see, now that it's running in this window, I'm going to close here the browser window.

I'm going to quickly open the start menu.

We can see that it's integrated here with its own entry, and I can also have it on the taskbar.

So back into the topic, we're going to start by getting the pretty visual stuff out of the way.

Responsive design.

It might seem as an obvious thing.

And rightfully so, we are in 2021, but yet this year there are still photo sharing, social networks that when you install them on tablets, they just display as a zoomed in version of their mobile counterpart with black borders.

And this is kind of like going into an IMAX cinema to watch a 16:9 movie, but worse because it's on your tablet.

So, be sure to use your media queries appropriately and rejoice that, you know, advanced layout systems are already baked into the platform with CSS Flexbox and Grid.

I, for one love CSS, but sadly I do not have the time, nor is it the scope of our chat today to praise CSS.

Second on our list is support for the OS theme, a trend that is more and more common in modern operating systems.

That generally means that the whole system can have a light or a dark aesthetic.

And, the one feature that I, as a remote work in London with the team based in Seattle are very grateful for, since it keeps my retinas from burning when I'm working late at night.

Now the way we achieve this is with the 'prefers-color-scheme' media query, and in our application, we can see how we are using this query to load the appropriate styles, which for now it pretty much will only change one of the stops of the gradient color that is set as the background.

This is a very subtle change.

But you might notice mostly when you are using the application maximized, and, you know, in the end, it's these sort of subtle details the one that delight the user and the web is certainly not short on ways to delight the user.

While we are on the topic of subtle details..

third on our list is custom title bars, or as the feature is properly called, Window Controls Overlay.

This feature allows an installed web application to extend the area that normally would be occupied by the title bar itself.

To achieve this, you have new CSS environmental variables that define the area that encompasses title bar, and only the window controls are left in the corner.

You also need to set the display_override property of your manifest file to `window-controls-overlay`.

Let's take a look at what this enables and at the effect of the theme of OS and responsive design at play.

Now, when you install the application, it is showing the default title bar, and you can toggle this feature on and off by clicking into the chevron.

I'm going to open here the application itself.

Okay.

And here we go.

As we saw before we have light/dark, but this is not the seeming support that we get on the operating system.

So I'm going to maximize just so you can notice the change that's going to happen.

And I'm going to bring in the settings.

I'm going to change the theme of the operating system itself, and probably you noticed that the first thing, one of the first thing that changed was the background of the application.

So again, if I were to let's say, reload, this application, bring it.

You can see now that it's themed to start in a dark environment.

In a similar way, you know, it's a responsive design.

So if I were to put this application in a landscape or portrait type of way, it will respond appropriately.

And even if I'm viewing it in full screen way, I am getting the application displaying properly.

So we're going to go back just for the sake of seeing the change here, back to a light mode and what I want to show you now, now we can close the settings, what I'm going to show you now is, now that the application is installed this is the default view that we are getting.

And you can see that in the title bar, we get the name of the application that's registered on the manifest file and the chevron here.

Now, this chevron allows me to hide the title bar itself and just the web content will, will take this area that was previously occupied by the title bar.

So I'm going to hide it and you can see how now we have the title and the custom controls that we built into the application seemingly into the title bar itself.

So just so you can see again, this is how the application is installed, and this is with the `window-controls-overlay` enabled.

If I close this application and I open the application again - I'm going to open it here from the start menu - you can see that it pretty much remembers the state on which you saved it.

And we're now always going to have our custom control.

You can also specify which elements in the title bar are draggable surfaces in order to move the window.

In this case, I don't want the buttons here to be able to drag it, but an expected behavior of title bar says that I should be able to grab this and just drag it and move the window along.

So this is something that you can do as we can see here in the CSS by defining the `app-region` as, `drag`.

Pretty pretty dope.

Following, we will focus on capabilities that allow the installed web application to integrate deeper with the operating system, by enabling different entry points to the app, cross-application communication, and even better ways to interact with files - all things that we take for granted when we are developing native apps and that, you know, make a huge difference when it comes to the subtle details that make, and these are actions or jump lists, sharing from and to the app.

And the APIs that we will be discussing are manifest, - the shortcuts field in the manifest, webshare and webshare target.

So the first and most simple of them is shortcuts.

These have been around for a bit, they're already on mobile and now in desktop and provide an easy way to launch or deeplink into your PWA.

These are set on the manifest file and once the app is installed, they displace the deep links to the app formatted with the name and icon specified.

For our example, we are enabling the user to directly launch into a blank or random colored logo, because sometimes we need the extra inspiration.

So we're going to bring the task bar and I'm going to click on the menu where you can see here that you can create a blank logo or you can create a random logo.

And these, and these actually are the same options that you are getting in the shortcuts manifest entry that you've got.

Now, we're going to also check here in the start menu entry for the PWinter.

We can double click and you can see that we are getting as well the two shortcuts or jump lists options here directly from the list of applications.

We all know that sharing is caring.

And when you've worked so hard in designing that perfectly branded lettermark, you want to share your creation with the world or the marketing team that's asking for the logo.

The webshare API allows for content to be shared and in their application, we are sharing both the app itself, because remember in the land of walled gardens, frictionless discovery is king, and more importantly, the work of art itself.

To do so we use the `navigator.share` promised-based method and pass an object, which includes URLs, text or files that we want to share.

So I'm going to open the application here.

And we're going to see how to share.

The application is going to just load a randomly created logo.

Uh, let's say I like this one looks well in dark.

Equally okay in bright.

So what I'm going to do is that I am going to, first of all, click here on "share logo".

And what we see here is that there's an item that's attached, which is the SVG file that's generated that contains the logo itself.

In this case.

Um, yeah, I want to share this and I think it would be interesting...let's see what other options- this is piggybacking on the operating system share.

So in this case, I want to create a new email.

I'm going to send it from this email and we can see here that we have okay, 'custom PWA logos', so, um, 'send'.

Now we've actually sent the logo from, uh, the application itself.

Now, another thing that we can do is pretty much to share a link to the application itself.

So there we go - we've just got the email.

If I click this icon, I'm going to be sharing the link itself.

So in this case, I am sharing the link, which just has the URL, title and text, and we can actually - in this case I'm also going to - actually I'm going to post it in Twitter.

I think that might be interesting.

So it's creating that tweet, a "PWinter design, your own PWA logo", and it has the link to the app itself.

Now if I tweet this, there you go.

It is live now.

I'm going to close Twitter for the moment, cause I don't want to get distracted.

But what's interesting here is that, uh, there's what we just saw, which is a way of sharing links by just calling `navigator.share` and the other way, which is sharing files.

In order to share files, notice that in this code, I am checking if the call would be successful with files through the `canshare` method, this is a way to test if file sharing is supported in the browser, and if that specific file that you are sharing would work.

Now, this integrates with the native OS dialog and allows you to easily share through Bluetooth, email or other applications that can act as a target for the type of content you are sharing.

Which let's be honest, you're already thinking, can our PWA be one of those acting targets?

Interesting question.

Bingo!, You know, through the manifest file, your wildest sharing dreams can come true.

You need to specify the `share_target` field, which will tell the operating system what type of content it is registering to be a target for say, if you want to be an incoming target for texts or links or images, for example, and the action, which is pretty much the URL that will process said activation.

Now, let me show you the power of share and hopefully share my enthusiasm for what you might be already seeing is indeed a brilliant feature for apps.

So I'm going to just quickly open, uh, a, you know, a repo of colors because there might be a color that I might want to use as inspiration for the PWA logo that I'm about to create.

And I specifically think that these sort of peach colors, papaya colors are really, really nice.

So something, you know, like this, I think this is really interesting.

So I'm just going to go ahead and click share and look at, at the moment this share is bringing up the browser's sharing prompt.

But if I bring the native OS sharing prompt, it's interesting to see that I can share with the application that I've just installed.

So I'm going to click this and look, what's going to happen.

I've just created a PWA logo that's based on the color that is on this page.

So closing, and let's see this again.

I'm going to go and choose another color I think that is interesting.

This is...this kind of like mint color is kind of nice.

So again, I'm going to share with our application and voila.

Now I'm going to preview it in dark.

Uh, maybe I want to create some sort of distinction here in the w and you know, it looks really, really nice.

So again, this is how we've seen to create a logo that's based on something that the application is receiving and to share.

Again, if I wanted, I can just share this and it'll send it on an email.

So, again, very powerful functionalities that are already incorporated into the web platform themselves.

I will close now this and we can continue then our recommendations.

Now I'll jump now to tell you about scheme and URL handling.

These are slightly more advanced and possibly less common yet their potential to enhance the user experience of your application is huge.

And to be fair, depending on the type of application that you are developing, say, if you're developing a web based email client for example, these might actually be your bread and butter.

I'll start with scheme or protocol handlers.

As its name implies it allows your application to be registered through the manifest file again, when installed, to handle a specific scheme.

The easiest way for me to explain this to you is with an example.

And this example is the mailto://.

When you click on a mailto:// URI, you generally expect the email client to pop up and get you ready to compose an email.

Now imagine that, but in this case, the client is a PWA.

There are several safe listed schemes that you can handle.

Among the most known are mailto, magnet for torrents, MMS, SMS, and tel to name a few, but the fun doesn't stop there and you can create your own custom scheme to handle, and that's quite priceless.

It's like having your own set of links that you can activate through your incredible PWA.

I've registered a custom protocol that defines color palettes and published on a website, a bunch of these pallettes.

Now the magic happens when you open one of these links, as you can see, they trigger the associated PWA or provide a disambiguation link if several apps can be handled by the same protocol.

So, we will see this in action through the PWA palette repo in the upcoming demo.

And again, I am linking here - I'm just opening this website- it says "welcome to the PWA logo pallette", and you can find a nice array of, you know, color combinations.

So we are going to click first on the official PWA logo.

It's asking me, it's prompting permission to say that, you know, "this website wants to open this application".

And once I click on open, then it's telling me, "how do you want to use this application?" I'm going to select in this case, the PWA PWinter.

Now this is important because if we had several PWAs that do handle the same protocol - for example, you might have Outlook, you might have your custom email, a client that all handle the same mailto protocol - then you might want to choose which is the one that you want to select.

So in this case, we only have the PWinter and once I click it, voila.

We have the application that is being opened with the official PWA color.

So let's close this and try another one.

These are some browser inspired combinations.

So in this case, what I'm going to do is that I'm going to open an edgy ocean wave.

And voila!

We have another protocol that's being invoked.

Now, just so you can understand what's going on, I'm going to make the browser window here a bit smaller, and to finish - here it says "much flag approve" , we have the "bratwurst und bier", and you can see that the link that's going to be triggered as a web + pwinter, and it has certain color combinations that are the ones that are going to be received by, in this case, the action that is defined by the URL in the protocol handler that we are registering.

So I'm going to click here "open".

I'm going to select - and we can see here that now I have a PWA logo that is with a certain combination that's coming directly from a protocol handler.

Let's close here and let's close here.

And that's pretty much protocol handling explained.

Moving on to URL handlers.

This is a feature that will enable your installed web app to register to open links that are inside its scope.

This requires again, a field in the manifest file and a web-app-origin-association file in the domain that links to the PWA's manifest file.

This is as a way to approve it to open its links inside of the installed web app.

This is a nifty trick that some music or video streaming apps do.

When you get a link to a song or to a movie, for example, and when you click on this link, it opens the PWA instead of opening that link in the browser.

It's the small details that matter, and it's noteworthy to state that URL handlers can expand the scope of an application through its origin associations.

So potentially you could allow the installed web application to handle URLs from different domains.

Let's see how this works and how it is enabled again from the manifest file.

We have an entry called `url_handlers` that states all the origins that the PWA will try to handle the links for.

In this case, we have `origin`, which is the same origin of the pwinter.

We can have different origins as well.

And then in the domain itself, we have the web app origin association file that defines a link to the manifest, kind of like as a key to the applications that is granting permission to hand its links.

So what I'm going to do here, and this is kind of like very meta, because what we're doing here is that PowerPoint is linking to the app itself.

And I've actually been doing it throughout the whole presentation.

When, when I click on this link, you can actually see, let me see if I can hover here.

You can actually see that this case I am opening the website.

And here we have the website itself.

Now I am purposely did not make it navigate to a secure location because I wanted it to open the website.

But I have another image here embedded that is actually pointing and linking to the to the PWA from the secure location.

So once I click here, it's asking me if I want to open it in the browser, or if I want to open it with the installed PWA and I can actually tell it to remember my choice.

So when I click the PWA and I click open, voila!, I'm actually getting the PWA opening links that are meant to be in the scope of the application.

So it's a pretty cool trick.

It's very subtle and it's definitely very, very elegant.

Let's close this round of features with the ones that are related to files.

We will see file handling in action and accessing the file system to save a copy of our custom logo, which is pretty much the only thing that we haven't done.

Let's learn how to open a specific file and then save a file to the file system by defining our PWA as a handler for CSV files.

I believe this is a fairly straightforward way of demonstrating this feature.

Hence, I will create a file that contains the hex values for each of the letters, and we will open it through the context menu of the operating system.

Now you can see how the file will be read and simply we'll apply each of the colors to the P, the W and the A, and, you know, it's kind of nice and easy integration of our application with windows.

I am linking in this case to this file.

And in this file, I just have three hex colors that I will apply to each one of, of our letters.

So just as an example, I've clicked on it to see that it's - the default way of opening is with Excel, but I am quickly going to go into the browser.

This is the file itself again, opening, so you can see that it's exactly the same file.

But if you notice, if I right click on the file, I can go into "open with", and now the Pwinter is actually listed as one of the default file handlers.

So if I click this, it's telling me that, you know, it wants to open this file.

I can actually, I need to grant permission for the PWA to, to get access to the files.

And once I allow it, it loaded the colors and it painted the logo in those colors.

So these are the colors that are defined in the CSV file.

And I can now just open CSV files with my installed PWA.

And think that this could be JPEG files, this could be text files, any type of file...pretty much that is textual or image or video, you should be able to handle with your PWA.

Again, you know, I like this logo, so now we're going to go through the next step, which is pretty much just saving it to the file system itself.

We want the logo as an SVG - we want that SVG file.

Through JavaScript APIs we can now request to get an open or save file dialog.

Once we get the file handle, then it's just a matter of reading or writing to disk the data that we want.

For our application and considering that we are writing to disk, then we are configuring the OS dialog to start in the pictures folder, suggesting a default name to use and setting the file type to SVG.

And this is the options object that you can see here, where we are telling it to start in pictures, we are giving it a suggested name of custom PWA logo dot SVG, and we're specifying the type as an SVG file.

So with this, I am going to open the PWA again, and I'm going to click on "save logo".

Now, what you see here is that indeed we are starting, we are - actually let me close this so I can move the window and let's do it a bit like this.

Okay.

So you can see here that when I click "save" it's opening the dialogue on the Pictures folder.

It's setting the custom PWA logo as the name - suggested name, and it's telling me that I'm going to save it as an SVG file.

So I'm going to take this and I'm going to save it on my desktop.

Save.

And we should have gray pink and some sort of green.

So I'm going to go again to the desktop.

And I see here that I have a custom PWA logo one, and I'm going to open it.

In this case - let's actually see what's the default way of opening this logo.

Hmm.

So I'm just going to open this logo with Microsoft Edge.

And as we can see, we have the logo that we just created.

Oh, there you go.

It was Inkscape, but basically, yeah, you can see how the logo is being opened.

The logo, you can see how the logo that we just saved is being opened by Inkscape by Microsoft Edge or by, you know, any other app that can handle SVG files.

Now there's a full session by uncle Thomas dedicated to files and PWAs.

So I won't dive into many more details right now.

What I can tell you is that apart from the method being used here, which is `showSaveFile` Picker, you can also call, `showOpenFilePicker` and `showDirectoryPicker`, depending on if you are reading, writing, or enumerating files.

We've seen in a small app how many of these capabilities enhance the feel of being integrated into the operating system.

There are two other functionalities that are not demoed in this presentation that have been available for a while now, and that also help enhance the experience.

These are the ability to set or remove badges on your app's icon on the task bar or home screen, and the ability to send push notifications.

And yes.

Please please be responsible with side notifications.

Ever since the capability was available, many apps have abused their use, and it has started to create notification fatigue.

So similar to the other features discussed here: with great power comes great responsibility, and some haven't understood that asking for permission to send notifications as soon as you load a website without any proof of interest or utility makes your website feel and look like spam.

So the point of all these features is to provide a good user experience.

Now the point of all these features is to provide a good user experience just because you can doesn't mean that you should.

Be mindful of your users and create experiences that delight them.

All these are capabilities that we hope will allow your web code base to feel more refined.

We've seen how many of them allow for patterns that are akin to that of native apps.

We are doing this because we believe that by empowering the web platform, we all win.

This is our responsibility to ensure that we commoditize development, but also distribution and UX.

I think that the time will come when speaking about the term PWA for web or app development will be like speaking about responsive design, it'll become a commodity where having an app or a website that doesn't integrate with the platform where it is running will be just considered a web - a bad web or a bad application.

All of the capabilities that I have shown you today are available in Edge Canary.

If you want to try them out yourself I encourage you to download an insider version of the browser and get hands-on.

It is surprisingly easy to incorporate most of these features into your existing web apps and with progressive enhancement, you can make sure that no one is left behind.

Now, most of these features are behind flags and you can access these flags by going to about://flags on your browser.

They generally appear while searching for the term PWA.

You're welcome.

And look at the time!

I've got carried away with all the cool stuff coming to install web apps on desktops that I forgot to emphasize on the four things that I consider to be really, really important.

First, I would recommend to register to an origin trial, to test a feature appropriately.

This is useful as it guarantees that users with compatible browsers won't have to be switching flags on and off to experience these benefits.

Second.

You might have noticed that the majority of these characteristics are enabled on your platform in the manifest file.

This file is becoming an essential part of any modern website, as it encompasses, not only all the information about your application in order to be included in application repositories, but it also includes now ways of enabling advanced features.

So be mindful of your manifest file.

Third, I've talked about great new features being developed and tested for PWA's in the desktop platform.

And once you have your web app ready, you can go and submit to application stores and maximize distribution and discovery.

I recommend for the next step in your PWA journey, taking a look at PWAbuilder.com.

It's a great open source project that helps you making sure that your application is ready for prime time.

And fourth, I'm all ears seriously.

And we, the folks behind your favorite browser, are all ears.

These APIs are being built in the open, discussed in community groups, accessible to everyone.

So if you have any questions, comments, or suggestions, don't be shy about letting us know.

If you're keen on getting involved, then by all means be our guests.

Nobody knows how the technology can help you better than yourself.

And if there's something that we are overlooking while creating the tech, then it's important for us to know.

If I can be of any help, either answering questions or redirecting you to the right person to answer your questions, then by all means, send me a message and I'll be happy to jump in.

I hope you're as excited about the future of the platform as I am and sincerely, I hope these features help you in enabling the best experience for your users.

This is just the beginning of what I am sure will be an exciting journey for PWAs.

We've started seeing changes that allow for a more open, rich and healthy app ecosystem that provides equal opportunities to any experience.

And that empowers an already great platform that keeps on getting more capable and useful and accessible to all.

So stay safe and see you around soon.

The future of Web Apps

PWAs, a set of technologies that allow the web platform to engage into the future

PWA

Three icons of a padlock representing https://, a sheet of paper overlaid with paintbrush representing a manifest, and two gears representing service workers, the three elements of progressive web apps

engage into the future

PWA

Three icons of a padlock representing https://, a sheet of paper overlaid with paintbrush representing a manifest, and two gears representing service workers, the three elements of progressive web apps

Image of the A2HS (Add to Home Screen) feature logo

A2HS

Three add app to homescreen interfaces as seen on (from left to right): Chrome, Samsung, and Edge browsers, with progressively clearer images

Desktop PWAs…about time.

Desktop PWAs…about time.

Image of a calendar showing icons representing the Canary, Dev, and Beta channels of Microsoft Edge, representing the latest technology for PWAs currently shipping in those channels

Desktop PWAs…about time.

Word cloud of all the cutting-edge features that Diego will be covering in the talk, which are:

  • Responsive Design,
  • OS Theme support,
  • Custom Titlebars,
  • Actions/Jumplists.
  • Sharing from the app.
  • Sharing to the app.
  • Handling schemes,
  • Handling links,
  • Handling files,
  • Accessing the file system

Image of the original PWA lettermark logo on a wireframe desktop interface, representing the demo app Diego will be exploring in the talk. The P of the lettermark is colored pink, the W is colored green, and the A is colored blue. These represent the fact that as the designer of the logo, Diego wanted it to be customizable by individual users to their needs

Animated demo of installing the application on a website and a demonstration of the tools which allow users to create a custom colored logo according to their branding or marketing preferences

Demo continues, showcasing the three in-app controls which can change the logo colours and the buttons which offer a preview of the logo on both light and dark backgrounds, as well as the start new logo, save logo, or export logo functions

Animated demo of the website prompts which inform the user that there is an app available and that it can be installed. Once installed, a popup appears explaining some of the key functions of the app and giving options for pinning it or creating shortcuts of it to various areas for easy access

Animated demo of the features available from the app's Start Menu

Desktop PWA

  • Responsive Design
  • OS Theme Support
  • Custom Title bars
  • CSS Layout System + MQs
  • prefers-color-scheme
  • Window Controls Overlay

demo

Desktop PWA

Window Controls Overlay

Image of the PWA interface showing the window controls overlay alongside a code demo

manifest.json

"display_override": ["window-controls-overlay"]

style.css

#titleBar {
    position: fixed;
    left: env(titlebar-area-x, 0);
    top: env(titlebar-area-y, 0);
    width: calc(env(titlebar-area-width, 100%) - 2em);
    height: env(titlebar-area-height, 40px);
    app-region: drag;
}

Animated demo of the functionality, customization options, and responsiveness of the Window Controls Overlay feature

Desktop PWA

  • Actions/Jumplists
  • Sharing from the app
  • Sharing to the app
  • Manifest Shortcuts
  • Web Share
  • Web Share Target

demo

Shortcuts

Image of the PWA interface showing the Shortcuts menu alongside a code demo

manifest.json

"shortcuts": [
      {
        "name": "Create blank logo",
        "url": "index.html?blank=true",
        "description": "Creates a new PWA logo",
        "icons": [
			{"src": "./images/short-new-logo.png",
			 "sizes": "96x96"}]
      },
      …
    ]

Animated demo of the functionality, customization options, and responsiveness of the Shortcuts feature

Web Share (Links)

Image of the PWA interface showing the Share Links menu alongside a code demo

script.js

const shareData = {
    title: 'PWinter',
    text: 'Design your own PWA Logo.',
    url: 'https://diek.us/pwinter',
};
await navigator.share(shareData)
    .then(() => console.log('PWinter shared!'))
    .catch((error) => console.error(error));

Animated demo of the options available in sharing, from sharing a custom logo via email directly within the application or via a link to the app

Web Share (Files)

Image of the PWA interface showing the Share menu which facilitates file sharing via mail or social media integration alongside a live code demo of sharing via Twitter

script.js

if (navigator.canShare && 
navigator.canShare({ files: filesArray })) {
	await navigator.share({
    	files: filesArray,
    	title: 'My PWA Logo',
    	text: 'Custom PWA logo from The PWinter.'
    })
    .then(() => console.log('Share was successful.'))
    .catch((error) => console.log('Sharing failed', error));
}
else {
	console.log(`System doesn't support sharing.`);
}

Web Share Target

Image of the PWA interface alongside a live code demo showing how the Share link menu can be connected to the manifest file via the 'share-target' field. The demo shares colors from a browser-based program directly into the PWA desktop app

manifest.json

"share_target": {
	"action": "index.html?shared-color",
    "method": "GET",
    "params": {
    	"title": "title",
       "text": "text",
       "url": "url"
	}
}

Desktop PWA

  • Handing schemes
  • Handling Links
  • Protocol Handling
  • URL Link Handling

demo

Protocol Handling

Image of the PWA interface alongside a live code demo showing how protocol handling is enabled in the manifest and managed within the app interface

manifest.json

"protocol_handlers": [
	{
    	"protocol": "web+pwinter",
       "url": "index.html?colors=%s"
    }
]

Desktop PWA

URL Handling

Image of the PWA interface alongside a live code demo showing how URL handling is enabled in the manifest and managed within the app interface

manifest.json

"url_handlers": [
	{
    	"origin": "https://diek.us"
    },
	…
]

web-app-origin-association

"web_apps": [
	{
    	"manifest": 
"https://diek.us/pwinter/manifest.json",
		"details": {
       		"paths": ["/*"]
		}
	}
]

Desktop PWA

  • Handing Files
  • Accessing the file system
  • Protocol HandlingFile Handlers
  • File System Access API

demo

File Handling

Image of the PWA interface alongside a live code demo showing how URL handling is managed within the manifest and within the app interface

manifest.json

"file_handlers": [
	{
    	"action": "index.html?open",
       	"accept": {
       		"text/csv": [".csv"]
       },
       "icons": [
       		{
       		"src": "./images/csv-file.png",
		"sizes": "144x144"
			}
       ]
	}
]

File System Access API

Image of the PWA interface alongside a live code demo of the File System Access API's functionality and settings

script.js

async function getNewFileHandle() {
    const options = {
        startIn: 'pictures',
        suggestedName: 'custom PWA logo.svg',
        types: [
            {
                description: 'SVG Files',
                accept: {
                    'image/svg+xml': ['.svg'],
                },
            },
        ],
    };
    const handle = await window.showSaveFilePicker(options);
    return handle;
}

Desktop PWA

  • Badging
  • Push Notifications
  • Badging API
  • Push API
  • Notifications API

honorary mentions

The present of Web Apps

Screenshot of the Microsoft Edge Insider homepage promoting and offering download links to the ME preview channels which are now available on mobile.

edge://flags

Screenshot of the edge://flags homepage and available features

1. to conclude,

Edge Origin Trials

aka.ms/origin-trials

Screenshot of the MS Edge Origin Trials Developer Console homepage

2. keep an eye on

Image of a Manifest file icon and sample code from The PWinter Manifest

{
    "name": "The PWinter",
    "short_name": "The PWinter",
    "start_url": "index.html?randomize=true",
    "description": "The PWinter allows the creation of custom colored PWA logos.",
    "display": "standalone",
    "display_override": ["window-controls-overlay"],
    "background_color": "#AFAFAF",
    "theme_color": "#3A006A",
    "orientation": "any",
    "icons": [{
        "src": "images/pwinter-512.png",
        "sizes": "512x512",
        "type": "image/png"
      }],
    "shortcuts": [
      {
        "name": "Create blank logo",
        "url": "index.html?blank=true",
        "description": "Creates a new PWA logo",
        "icons": [{"src": "./images/short-new-logo.png", "sizes": "96x96"}]
      },
      {
        "name": "Create random logo",
        "url": "index.html",
        "description": "Creates a new PWA logo with random colors",
        "icons": [{"src": "./images/short-rand-logo.png", "sizes": "96x96"}]
      }
    ],
    "file_handlers": [
      {
        "action": "index.html?open",
        "accept": {
          "text/csv": [".csv"]
        },
        "icons": [
          {
            "src": "./images/csv-file.png",
            "sizes": "144x144"
          }
        ]
      }
    ],
    "share_target": {
      "action": "index.html?shared-color",
      "method": "GET",
      "enctype": "application/x-www-form-urlencoded",
      "params": {
        "title": "title",
        "text": "text",
        "url": "url"
      }
    },
    "protocol_handlers": [
      {
        "protocol": "web+pwinter",
        "url": "index.html?colors=%s"
      }
    ],
    "url_handlers": [
      {
        "origin": "https://diek.us"
      },
      {
        "origin": "https://diekus.github.io"
      },
      {
        "origin": "https://diekus.com"
      },
      {
        "origin": "https://diekus.net"
      },
      {
        "origin": "https://d13kus.github.io"
      }
    ],
    "screenshots" : [
      {
        "src": "./images/screenshot1.png",
        "sizes": "1042x718",
        "type": "image/png",
        "label": "PWA Logo Printer in light mode.",
        "platform": "wide"
      },
      {
        "src": "./images/screenshot2.png",
        "sizes": "1042x718",
        "type": "image/png",
        "label": "PWA Logo Printer in dark mode.",
        "platform": "wide"
      },
      {
        "src": "./images/screenshot3.png",
        "sizes": "1042x718",
        "type": "image/png",
        "label": "PWA Logo Printer sharing.",
        "platform": "wide"
      },
      {
        "src": "./images/screenshot4.png",
        "sizes": "524x1280",
        "type": "image/png",
        "label": "PWA Logo Printer mobile.",
        "platform": "narrow"
      }
    ]
}

3. expand your distribution

PWA Builder

(pwabuilder.com)

Image of the PWA Builder homepage

4. talk to me (us)

@diekus -@MSEdgeDev
diekus (demo repository: pwinter)
https://github.com/w3c/manifest-app-info/

Image of a listening icon

thank you

The future of Web Apps
is within your reach.