Next-level web apps on desktop

00:07 - I’m a product manager on the Chrome Web Platform team.

00:10 - This session is on next level web applications.

00:13 - And while the capabilities I’m going to describe are most applicable to desktop screens, let me emphasize that powerful web apps work everywhere, on phones and on TVs too.

00:24 - I love the phrase “one web, many screens. ” You can build powerful applications for any device using web technologies.

00:32 - With a good responsive layout, you could show the same code base amongst all of them.

00:37 - Compare that to the alternative, a minimum of three, if not five or more code bases, and it’s clear why we see more and more developers are choosing the web for their applications.

00:48 - To understand how transformational this moment is for the web, let’s start with a little internet history.

00:53 - Gmail’s a market leading email client, but when it launched in 2004, there were many incumbent products.

00:59 - There were already dozens of popular clients, and virtually all internet users had an email account and a client.

01:06 - If you’ve worked at a startup, you know that a new product typically has to be at least 10 times better than the incumbents to win market leader status.

01:14 - So what was Gmail’s secret sauce? Well, what made Gmail different was being a web-based client which meant reach and universal access.

01:23 - There was no software to install. All users needed was a web browser, and by 2004, most computers had one.

01:30 - This made user acquisition trivial. All anyone had to do was have a link.

01:36 - There was one more requirement, though, and it was a critical web capability that started landing in browsers just a few years before Gmail launched.

01:44 - For those of you who have been developing web software for a while, you might remember this new capability called Ajax.

01:51 - Ajax transformed the web as an applications platform.

01:54 - Before Ajax, server requests could only take place with a page refresh, so client interactivity without reloading the page was basically impossible.

02:03 - Imagine you had to hit refresh every time you wanted to check for a new email.

02:07 - Gmail would never have succeeded. Ajax was transformational.

02:11 - And in addition to enabling Gmail, within a couple of years, we started to see applications like Rightly that formed the foundations of G Suite.

02:20 - I think we’re now on the cusp of another transformational moment.

02:23 - I broke up these APIs into three rough categories: environment access, application flow control and engagement.

02:31 - With these APIs, web apps can load and save files from the user’s file system trivially used tabs in standalone windows, developers can automate the focus of the user flow between standalone windows tabs and the browser.

02:46 - They can also place windows across multiple screens and give users the option of running the software on application start-up.

02:54 - Finally, with notification triggers, we unlock new types of applications such as alarm clocks and calendars that need robust assurances about the timing of when notifications are displayed.

03:05 - Quick word of caution. The timelines given here in this table are rough estimates.

03:10 - You could always get the latest info on the Fugu API Tracker at the URL in the center right of the slide.

03:16 - Before we get into the specifics of the APIs, let’s hear an example of what’s now possible on the web.

03:23 - - Hi, I’m Alex, co-founder and CEO of Clipchamp.

03:26 - Clipchamp is the world’s first and only completely in-browser video editing platform.

03:31 - We’ve taken what’s arguably one of the most complex and complicated application categories and got it to work purely based on web technologies, including a computationally very intense video export process.

03:44 - Google Chrome’s always been our platform of choice.

03:47 - One of the features that we’ve adopted very early was progressive web apps.

03:50 - And we can already see now that users who have installed our PWA retained three times as well as the average user.

03:58 - Some of the new features that are gonna be landing to Chrome and progressive web apps, such as Native File System and Font Access, will make the app indistinguishable from any other app that they might have installed on another operating system.

04:11 - We’re incredibly excited to see these features in the wild and our users adopting them at scale.

04:18 - - Thanks so much, Alex and Clipchamp team. For all the developers out there watching this, you might want to stand in front of a mirror and say completely in-browser video editing platform three times to fully believe it.

04:32 - Let’s get into more details on these APIs. Many of them aren’t in stable yet, so you might need Canary or another Dev channel version of Chrome, and you might need to activate some flags.

04:42 - I’ve specified the flags needed where appropriate.

04:46 - Let’s say that you want to create an application that opens CSV files.

04:49 - Your manifest would look something like this.

04:52 - We’re declaring in this section that when a user double clicks on a MIME type text CSV file with a dot CSV extension, you can see the accept member there, the action is handled by the apps slash open CSV route.

05:07 - Now here’s an example of receiving a file handle.

05:10 - To access launch files, the site should specify consumer for a launch queue object attached to the window.

05:16 - Launches are queued until they’re handled by this consumer which is invoked exactly once for each launch.

05:22 - With this approach, you can ensure every launch is handled.

05:26 - Your application can then choose to handle these files however you’d like.

05:30 - We’ve got so much to cover today, I better speed things up.

05:33 - So it’s time for a double whammy. These two capabilities make sense to run through together because display override will help us with tabbed application mode.

05:43 - First, I’m gonna show you what tabbed application mode looks like.

05:47 - Hey, look at that. Easy tabs in a standalone window.

05:51 - This is groundbreaking for many productivity apps where it’s common to have more than one file open at the same but you want those all associated inside of the same window.

06:00 - Here’s how you use the new display override member in a manifest file.

06:05 - Notice that we start with the widely supported display mode standalone.

06:10 - The display override member is ignored by browsers that don’t have support for it.

06:14 - So the app can continue to fall back to display standalone on unsupported browsers.

06:18 - Display override takes a list of display modes which are tried in order falling back to the next one each time if it’s not available.

06:27 - You might be wondering what link capturing and URL handlers are all about.

06:31 - Link capturing and URL handlers lets you control what happens to the user journey once your app is installed and in standalone or tab browsing mode.

06:40 - For example, should clicks from the browser that are inside of the scope of your web application open in the browser tab or in an existing standalone window if one exists? Maybe they should open a new standalone window or maybe they should open a tab in a tab window.

06:55 - All of these are possible. And unfortunately, we’ll only have time to scratch the surface on what this API can do.

07:00 - Here’s a sample manifest that has link capturing in it.

07:04 - The capture links member is specified in this instance as existing client event.

07:08 - That is, when a link is clicked leading into this PWA scope, the user agent finds an existing PWA window and, if more than one exists, the user agent chooses arbitrarily, and it fires a launch event on that window’s top level context containing the launched URL.

07:26 - We can see in the defined URL handlers that you can see how origins are specified for handling.

07:32 - In this case with a wild card, the permission for the app to handle URLs for these origins is verified by the browser through a web app origin association file hosted at each handled origin.

07:45 - The window placement API enables complex productivity apps that require multiple window layouts across multiple screens.

07:52 - For example, apps in presentation, finance, medical, creativity, or gaming apps.

07:58 - There’s a lot to this API, far more than we can deep dive into today, but I’m going to show you a couple of highlights.

08:04 - The highlighted code here returns metadata, including how many screens the user has connected and the coordinate system of those screens.

08:11 - This snippet opens a new window on the device’s internal or primary screen.

08:17 - Here’s how you’d request full screen on an external screen, like a TV or projector.

08:23 - This is how you know if the user’s screen setup has changed.

08:25 - For example, if a new monitor was plugged in or one was removed.

08:30 - I love demoing this feature because it’s so easy to use.

08:33 - You’ll wanna be using Canary and enable the appropriate flag.

08:37 - One way to use this is to simply let users opt into the experience with the install prompt.

08:43 - We’re still working on the exact user experience for this, so some of the UI may change before it hits stable.

08:49 - The other way to use this API is programmatically.

08:52 - And you can specify the mode as being either windowed or minimized.

08:56 - For example, some types of applications might want to start in a minimized state.

09:00 - Let’s take a chat app, for example. Notification triggers allow notifications to be shown when certain conditions are being met.

09:09 - The trigger can be time-based, location-based or otherwise.

09:13 - For today, we’re going to focus on time-based triggers.

09:16 - You might be asking yourself, why not just use regular notifications for this? Well, the reason is that the push API is not reliable for trigger notifications that need to go off at a very specific time.

09:25 - So for applications like calendars, alarm clocks and so on, you need something that has higher accuracy and timeliness.

09:32 - Just a quick note. This API is currently in origin trial, and we’re welcoming developers to try it out and give us feedback.

09:39 - The APIs I showed in this presentation aren’t the only ones to get excited about.

09:43 - Check out the Digital Goods API, local fonts, the badging APIs if you want to know about a few more exciting capabilities coming to the web platform.

09:51 - Whew, well, that was a whirlwind. Thanks so much for joining, and please keep those questions coming on Twitter.

09:58 - (upbeat music).