Moving the web forward with Microsoft Edge - BRK3074

Thank. You for joining us here especially, those, of you have that just walked, over from the edge state of the union session. Today. When you develop, your sights you don't know if they will work exactly the same way in edge because. Of missing web capabilities or, you. Don't know if you can even test your site in edge if you're not on Windows 10, that's. Not the world that you want and that's, not the world that we want to give you as you. Probably heard, in the keynote at, State. Of the Union and, may have even read online, we, are completely changing this paradigm, with, the next major version of, edge. So. My name is Jatinder, man and I'm the group program manager for the edge web, platform, team hi. And I'm Gaurav sait I lead, our product thinking around developer, experiences, and helping move the web ecosystem forward. Everyone. And, I'm a Sudhir Mayer Amanda I'm from the office platform. Team awesome. So, over the course of this hour Gaurav. And I will walk you through some. Of the pain points that, you have shared with us with, the edge web platform, web, apps and developer. Tools and how, our new strategy begins. To address those concerns will. Also, invite, severe. To talk through his experiences. Building, on web technologies, and finally. I will, walk you through how we're working with other browser vendors in open, source projects, to, help build a better web, for, all of you. Last. December we, announced that, the next major version of, edge will be based off of the, chromium project, and we, also shared, that it's not only our intent, to adopt, chromium. But, we also want to become significant. Contributors. To this project in a way that, will not only make edge better, but. Will help make all other chromium. Based browsers, better, as well but. Before I get into those details I wanted, to share why, are we making this change. Over. The course of this talk you, will see us try to drive a new, habit, to every, stage of product. Planning, where. We, are being, driven by a relentless. Drive to discover. Your, unmet, needs. Chuck. Shared a few, core audience, constituencies. For. The edge team, developers. Consumers. Enterprises. And educators. And, we spent the last year, listening to. This group through, user studies, focus, groups standards. Bodies meetings, and partner. Events around the world and in. This session we're, going to share what listening, taught us about web. Developers, web developers like yourself, and how. We're, beginning, to address some of your pain points in. The next major version of, edge and a little bit more of what, still to come. So. What did you tell us. The. First thing you told us is inconsistent. Capabilities. Across browsers. Increases. Your development, and test cost what. This usually, means is, you're developing your site in one browser and when, you're done you, go to test your site in another browser and you, find that that capability. You were relying on isn't. Consistently. Available. This. Forces, you to decide, either, to re-implement, that feature in two, different ways which. Increases, your development, and maintenance, cost, or you. Just can't rely on that technology. That you wanted to use, web. Browsers, have spent a significant. Amount of energy trying. To support a consistent. Set of web capabilities, if, we. Look at the html5, test. Com, benchmark, which, is a test of browser, conformance. With emerging, web standards, we, can see that over the course of the last decade. Microsoft. And other browser vendors have.

Spent A significant, amount of energy trying. To support a consistent. Set of web, standards so, you can rely, on a consistent, set of web capabilities. So. While we've made great, progress over. Last several years there's. Still a non-trivial. Gap, and when, we look at a web of, 35. Trillion. URLs, even. A small gap can have a significant. Impact on, your, customers. Experience, through. Compatibility. And broken, sites. By. Adopting. Chromium. And becoming, a significant. Contribution. Of. Edge supports. A more consistent, set. Of web capabilities with. More browsers so. This will help make your development, easier. And, will also help our users see. Less compatibility. Issues. You've. Also shared that fragmentation. Across, browser, versions, and operating. Systems, also, increase, your, development, and test cost so. Today even, when the latest version, of edge supports. The same web capabilities as, other, browsers, you, may still see fragmentation. And that's. Because, edge ships, major updates, today with. Every major update, of the operating system and, each. Of these windows 10 versions, have a certain, support, lifetime, so. At a given time you may end up supporting, multiple, versions, of edge each. With possibly, different, capabilities, which again increases. Your development, and test, cost. With. The next major version of, edge we. Are now supporting. A consistent. Web platform, across, every, where where edges available, so, you no longer have, to worry about, capability. Fragmentation. Once. You can use the capability, in one place you. Can assume, it's available wherever edge is. So. Even if we solve. Fragmentation. Across browser, versions, you may still see fragmentation. Across, operating. Systems, today. Edge is. Only supported, on Windows, 10, so. If you are a developer, developing. On Mac it's, very, hard for you to develop and test on edge either. You need a separate computer for edge or, you, need to have a separate, video or worse, you. May rely on testing. And production which is not a great experience for, your customers a, year. And a half ago we made edge available. On iOS, and Android and the, next major version of, edge will, be supported, across more platforms that, you use and it will be a consistent, web platform, that you can just rely on. You. Also told us that you want updates at the speed of the web to, maximize, your code reuse. Today. Edge ships, major updates, with every major update, of the operating system we, also ship security. Patches. With, patch Tuesday every month but, other browsers, have set a cadence where. They ship new features, as early, as every six weeks. You've. Also told us that you want to be able to test, the stable, version of the browser so, you know, what your customers, are experiencing. In the wild on the web right now but. You also want to test a preview, version so, you can see what, compatibility. Issues were, created, and get ahead of them or experiment, with a new set of web capabilities before. They're broadly, available. Today. Edge is. Supporting. A preview version but it's only available on, the windows insider. Platform. So, as a developer you're. Forced to choose either a stable, version, of the operating system or a preview, version it's very hard for you to test edge both, stable and preview side by side. With. The next major version of, edge we, will ship, at a faster, cadence. We. Will also, let you install up to four different versions of edge side-by-side, on any, supported operating, system. Last. Month we made available both, the canary and dev channel builds the, canary is our daily build you, can think of this as the bleeding edge this, is what the edge engineering. Team uses, to validate, bug fixes, and testing out new features, so. You may discover, bugs before, we've had a chance to fix them. Every. Week we will promote, the Canaries to the dev channels, this. Is a little bit more stable build, we use some more performance, testing, user, feedback. So. If you're a developer and you want to keep up with the latest of what the edge team is working on this is a good build for you to try out we. Haven't yet released the beta channel but at some point we, will promote a dev channel and stabilize, it in the, beta Channel, the, beta Channel will be a good signal, to enterprises, and IT pros to, start piloting. And trying out edge in their, environment, and eventually. We will promote one of these betas to a stable and start, shipping stable. Edge at a faster, cadence roughly. Matching. What the other browsers, ship at every six weeks so. I spoke a little bit about the pain points, you felt on, the web platform I'm going to invite Gaurav to speak about, some of your pain points on the, web apps and developer tools thanks, within there. So. The browser is just one of the application, that, uses our web platform, today, if you think about Windows there, are over two million applications, on Windows that use some, form of web content when.

We Talk to developers they. Think that we heard back was, that you need flexibility, you. Need flexibility. To be able to use web and mix, web, with, native code to, create experiences, for, your customers, we. Think that, we heard even more was, that you really need a way to create cross-platform. Applications. That are built only using, web technologies. With. Windows 10 we've, been on a journey to, bring the support for web applications. Onto, the platform, let's. Walk through that we, started with what we called Windows web applications. Over. A period of time these evolved, to what we call hosted, web application, in progressive, Web Apps, these. Web applications, were able to utilize. The, native capabilities of the devices, using WinRT, api's. They. Ran in a host which we called Windows web application, host. They. Could be installed from the store but. Could not be discovered from the browser there. Were three problems, with this number. One accessing. Capabilities. Why Aven Rd meant these apps could not go cross-platform. Number. 2 running. Inside of a host that did not share or was not built on the same horse that the browser is built upon meant, that your code had, inconsistencies. Versus, when it was running in the browser number. 3. Not. Being able to discover, it from the browser meant. That your, app could not be discovered by more people. Along. With the new edge we. Are taking the next step in our journey. With. That step, we. Are making sure that you now can use your progressive web applications. In. A more you. Know you can create them using web standards, these. Applications. Can run in a host that is similar, and based, on the browser and finally. These applications. Can. Be discovered from the store as well as the browser so to show you that let me take take you and show you a quick demo of what I mean. So. Here I am on my Mac running, a dev dev. Bits. Of the new edge you will see that I have like you know some extensions, installed, etc.

One. Of the things I end up doing is I often before getting out from office I go, to Starbucks I order my coffee and pick it up on the way now. This application is, a progressive web application, this website has been written as a progressive web app what. Is a progressive web app any website, that has three things number one it has service workers and storage for offline support number. Two it has an app manifest that describes, the look and feel of the app if it was to be installed as an app and number, three it is served over you, know secure HTTP, so HTTPS so. The developers, at Starbucks, created, or you know promoted their site to become a progressive, web app now as a user when I go there what. I see here is this you, know additional way. To install, this app so let me go ahead and install this app the. First thing that you will see is I, was logged into my Starbucks, account and I kept I remained, logged in into, the, progressive web app the. Next thing that you see is a Fido here, the. State of my extensions, that just carried over to my progressive web app this was never available both, of these things in the previous version of the progressive, web app when you shared a different you. Know horse than the browser. Now. If I right-click and, go to inspect, what. You will see is that this app also has, the, exact, same of exam, the same set of browser tools available, inside. Of your PWA context, as they would have been in your browser context, again, this is something that is pretty new now. In terms of. The. App itself the, thing that you would notice is first. Let's talk about the branding so as I said the developers, could write or use the app manifest, to give the branding, etc. For the apps out here you see that you know the the tab or the shell took, the green branding from Starbucks, the, app came you. Know in the dark it has the, Starbucks. Icon if I go look in you, know my. Spotlight, search it just looks and feel as a native, app to.

An End user. Last. Given. That we are now running in the same shell you, could actually go, open. Back pop back up from a progressive web app back into your browser so, you know you have, continuity, there, and then, finally, you, could actually go and see all of your. Installed. Apps inside, of the browser. So, let me just recap what I showed you with. The new edge we, are bringing standards-based, progressive, web apps. That. Can be discovered, and installed why are the browser, they. Are available, across all versions, of Windows and, they. Will be available cross-platform, as well so what I showed you here was you know running those apps on my Mac you. Can run them across any version of Windows. You. Know wherever edge edges, available. The. Preview, for these is available, today if, you go and download either, the dev or the canary channel you can start playing around with these apps. The. Next thing when we talk to developers that we heard was. That regardless. Of whether they were writing web applications or, hybrid applications, they, wanted to make sure that their code could access, the latest web features that are supported, in the browser this. Is important, because your. Web code is typically shared it, often runs in the browser it also runs in an app so, if you have to diverge, it, basically increases, your development, and testing cost. Now. I talked, about hybrid, apps let's, let's talk a little bit more about what it actually means. So. You have a lot of options to kind of create, applications. During native, technologies, on Windows, let's assume you were using either win32. Or uwp to create a native application. Many. A times you just want to bring an ad control into that app you can bring that ad control, as a webview that is available inside, your app, many. A times you can also bring, another. Reusable, component, something that was available as a website out here I'm bringing a custom Fromme which is also available why are the web this, is what we call a hybrid application, it essentially, is a mixture of native, technology and web technology, together.

Now. Over. The last many years Windows. Has had support, for a web view control to help you build, these native, these hybrid, applications, but, there were two key problems that we had with the, support that we offered number, one as Jatinder, was saying we. Had the problem of fragmentation across, any version of Windows you could only use the latest web platform, that was available. This meant that you had to fragment, your app you had to test across different versions of Windows, next. The. Support, for. This was not consistent, for. Your win32, apps and the uwp apps this, created a lot of pain. Along. With new edge I'm very happy to share with you all that really are bringing a new web you control, this. Web you control will stay up to date by default, it. Will be consistent, with the browser version, it. Will be consistent across all versions of Windows and, it will be available across both your uwp and your windows, win32. Apps. Now. When we talk to developers one. Of the things that we did hear back was there are certain cases where you do not really want to keep up to date with the speed of the web there, are certain cases where you really want to optimize per app compatibility. For. Those cases, we are bringing a choice that you can use this web control and package. It with your application so. That you, know you are guaranteed, about app compat again, this model will, be consistent, across all versions of Windows and, will be available both for your win32, and uwp apps. With. That let, me actually hand. It over to Sudhir to, demo, you, know the next, webview control that we are working so here is on the office team and he's been working with us closely as. We experiment, and bring up this new webview controls so they'd over to you thanks. Gaurav hi. Again everyone you, must be wondering what office is doing over here on stage so. I'm here for a couple of reasons number. One office. Is making a big bet on the new webview control number. Two just a quick show of hands how many of you have looked at the office Adams platform. Using. A few people over here I'm, gonna show you how easy it is to build an office office. At and using the new view. Control so, hopefully more of you will go back and take a look at the office out of this platform, so. With that let me give you a quick on context. The. Office platform, lets you build your solution, within the canvas of office there. Are three main tenets, to the office Adams platform, one. Is you bring your web technologies, to the platform but your added so, web standards are critically important, for the for basically, the Adhan development, number. Two add-ins. Are a cross-platform meaning. Any atom that you develop on Windows is gonna, be available wherever office, runs, number. Three we've, got some incredible modern, distribution, technologies. For you you, can get your errand to, everybody, in the world using, the office store or you. Can bring your ad into people in organizations. Using, the office 365, centralized. Deployment. Now. Here are the core building, blocks of office add-ins, office. Animals lets you insert extension, points, or ribbon buttons in tabs in the in the ribbon of office. You. Can display the UX of your ad in containers. Such as task panes and dialogues and. Last but not the least the webview itself is, actually rendered in these containers, it's. Able to interact with content, in office using. An incredible, set of API is that we have available in office j/s, alright. So with, that let me throw some code up there this, is actual office code you're looking at as you can see over there offices targeting the canary build of edge, of the, webview control over here and you'll, be able as Gaurav. And jitinder mentioned you'll, be able to target a specific build, of webview within, your own native application, so. Let's look at a couple of these in action, over here go. To seven. All. Right so. I've got a couple of command windows, over here on the, one over here on the Left I've got a web server running this is serving up my own facade and remember that I mentioned office. Add-ins are built using web technologies, so, this is just serving up my add in on a local website now. My, add-in that I developed, it's a sample evidence a single page application, you'll, see I have an index.html over, here I've, got the corresponding, index j SI, got a bunch of functions that I've written over here things. That insert sample tables, things are color cells and so on and so forth so let's, go ahead and side, load this particular add-in into, Excel and see, how this functions so I'm gonna run a quick side load command again, that from a development, standpoint this.

Is Going to basically launch Excel, and insert. That add-in to excel so, there, it is and the. Button should be coming up and there's that extension point that the office. Hadn't created in Excel, so. Let. Me do a couple of things over here so I'm gonna select a few cells I'm, gonna color these cells green over here again that's an office jsapi. That we've enabled using, the new webview, control, these things are already functional, we've already done the work integrate these ApS with the new control the. Second thing I'm gonna do is just insert some sample data there's. Some just a sample, table inserted into Excel now. Jatinder showed you the html5 test comScore, let's, navigate over there to make sure it's the same score, over here for the webview controlled as role and there you see it it's, 535, again bringing, that same web standards, to. The office, a turn development, as, well and. Last but not the least let, me show you a WebGL page, some animation, over here again, showing you that the control is compatible. With the latest and greatest web. Standards, out there alright. So before I go though I talked. About developer, experience, let me let me show you how easy, it's gonna be with with. The new developer, tools with the new debugging tools that Gaara showed when, he was talking so let me go let's go inspect I, remember. That in back. In Excel I colored, a bunch of cells green. Let's. See if we can change that color to yellow so let's. Go back over here go, back to sources, you'll, see that this is where the cells, are being colored green, so. I'm gonna go put, a breakpoint I have a breakpoint over there already you go, back into Excel, click. On set color so. There is my breakpoint, is hit and. Let. Me change that to just. Copy that really quick. And. Okay. Let's change that to say yellow. And. Now if I were to go back to excel and, resume. Script. That. Should change to yellow so. Again, that's a quick demo of where, we are with with. The web view control just. To leave you. So. Again a whole lot more information over there on that website about, office add-ins if you a few folks want more info come back and talk to me at the office Adams booth or. Join the next office Adams community, call back, to you Gaurav thanks for there this is awesome. What. What said he showed you really, was. You. Know office, working with us to help with all these webview API is what he also showed you was a new webview control, which was standard space running, everywhere. Now. Next, I want to spend some time talking about a roadmap so this is the summary of what we talked about we will be bringing in always up-to-date view. Control we will also be providing options to developers, should bring it bring, your own version and package it with your app today. I am in fact very happy to announce the. Preview version of this win32. That you control if, you go to aka.ms/offweb. We. Control as well, as they bring your own version is still, in the works and we will share more as we make progress, but. Today the win32 control, is available, and that is what studies showed that office was building upon it was the always up to date control, that you should go and take a look at. Now. Let me recap and talk, about what, we talked and then talk about existing, applications. Jatinder. And i we said heavy are changing the browser i told. You that hey we are evolving, our progressive web applications, to be standards-based. I told, you there's a new web view control that is coming but. All if you have been writing a bunch of existing, applications, right from you, know the Windows Store based the. Bay HW, ASP lwas, there's, the edge HTML, and MS HTML, based web views and then. There's a bunch of other hybrid ad types what happens to those that's the obvious question and everybody's mind like what happens to those like. The answer is very simple they, just continue, to work as is what. We showed to you today is a very early, preview, of how. We are thinking about and where we are going with our app you, know application, platform, based upon web technologies, we. Want to build it with you we, want to get your feedback that's, why we are previewing but your existing, apps will just continue to work as is. For. Now. The. Last thing that I wanted to touch upon that.

I, Heard that we heard from you all and we wanted to cover today was, that developers. Have come back and told us that they want to make sure that the developer, tools that they use are consistent, across any context, where they use web meet, the browser bead you know Web Apps be it hybrid apps or whatever, this. Is important, because if you, have to shift your brow if you have to shift your developer, tools across you, know these app contexts, it. Impacts your productivity as. We. Showed across both the demos we now have a new set of you. Know consistent. Powerful, developer. Tools that. Are available across. Your browser across, your pwace. Across, your web views that. You can use we're. Starting with chromium tools, as a baseline, and we are starting to contribute, upstream, with. That let, me bring back Jatinder, to, talk about you, know to wrap this section up and talk a little bit more about our open source principles, just, in there what you, thank. You girl, so. Today we shared we. Talked about what listening, taught us about your pain points in the edge web platform, web apps and developer, tools and how, our new strategy is beginning. To address some, of those concerns, you. Told us that you still see inconsistent. Web capabilities, across browsers, the, next major version of, edge will support a consistent, web platform, with more browsers by, adopting the chromium project, you, told us that you see fragmentation. Across. Browser, versions, and operating, systems the. Next major version of edge will, be supported, across, more operating, systems, and will have a consistent. Web platform, available. Everywhere, you. Told us that you wanted to see updates, faster. The. Next major version of, edge will ship updates, at the speed of the web. You. Told us that you want to, bet, on web technologies, and build cross-platform. Web apps, the, next major version of edge will, support standards-based, pwace. You. Told us that you wanted a consistent. Web platform, between web apps and the browser the. Next major version of edge we'll support a consistent. Same web platform, between the browser web. View and pwace. And, finally, you, told us that you wanted a consistent, set of web, tools the. Next major version of, edge will, support a consistent, set of developer, tools across the browser, pwace. And web view controls. So. Now that we've talked about how, we're beginning, to address some of your pain points in the next major version of, edge I wanted, to talk to you about how, we're working with, other browser vendors in open, source projects, to help build a better web, for, everyone and I. Wanted to start by sharing the principles, that we aspire to hold. Ourselves accountable, to. As we. Participate, in these, projects. The. First principle, is we're, making this decision for the long term we, expect, our engineers. To learn and, overtime. Grow into experts, in the, chromium codebase, we, expect them to grow, into active, and responsible, members of the community, to maintain any contributions. That, they make. Number. Two when. Seeking, updates. The web platform our default, position is to contribute so while we are still going to build a world-class browser, with, Microsoft, edge with, differentiated. User experiences. And connected services, when, it comes to the web platform we. Are seeking a rising, tide floats all, boats approach. Number. Three we. Will respect, and adhere, to the architectural, requirements. And engineering, approaches, used in chromium so. While we will offer our, Windows, platform, expertise, to, help make all chromium. Based browsers, better we, will do so in a way that aligns with chromium's, cross platform, and cross device needs and, finally.

While We will implement our platform, features, in chromium we, still believe that the evolution, of the open web is, still best, served through, standards, bodies discussions, and we, believe that the open web benefits. From. Open, debate from, a wide variety of perspectives, so. We will remain deeply. And vigorously. Engaged in standards. Body discussions. In the w3c, what, working group and anywhere. Were. The perspectives, of browser vendors, and the, larger web community, like yourself can be heard and considered. So. While we've only been in the chromium project for a few months we've actually been very warmly. Welcomed, by chromium. Engineers, and chromium browsers, in this project and while. We're still ramping, up in the codebase we've, already made, some modest, but, meaningful contributions. Including. Microsoft landing almost 400. Commits into, the chromium project, since, our December, announcement. If, you. Want to keep up to date with some of the contributions, we're making we're, documenting. The larger, major contributions. In the, MS edge explainers. Github, repo so this is a good place for you to look at the changes, and also give your feedback we. May introduce new, web platform api's. Here but they will be incubated, and standardized. In the right standards, tracks. So. How are we helping make the web better I wanted. To talk to you about these three areas, the. First is our commitment, to accessibility, we. Want to make sure that we build an accessible, web platform, that you're standards-based, markup, just, works for all of your users including. Those that. Use assistive technology. Tools. We. Know that improving accessibility is, a multi-faceted, problem. So. We're helping look into these five different areas, and how we can help make, accessibility. Tools great in chromium. Today. Edge is the only browser to. Get a perfect, score in the html5. Accessibility. Comm benchmark, and we want to bring these improvements, forward. To, chromium so. We've started to talk to chromium engineers, on a number, of areas and have started to make contributions, one. Area, is that we're working with chromium engineers, is to. Help add the. More secure, and modern, Windows accessibility api's. UI. Automation, so, this will ensure, that you're, standards-based, markup, just works with, assistive technology tools like, screen readers so, there's nothing extra, you need to do just use standards-based, markup, and this, will just work. We. Know that high contrast is the most, use built, in Windows, assistive.

Technology, Tools in. Fact up to four percent of all Windows, users, use this dialog, today. If a user goes to the windows ease of access dialog, and sets, these settings, it. Doesn't apply in chromium so, we're making changes to just support, high contrast, by default, after, these changes land your web content your web app UI will just work there's, nothing extra, you as a developer need, to do now, we know developers. Care about the look and feel of their sites and they care about the styling so, we're also working in the right working. Groups and the standards bodies to, incubate, new proposals. That will give you the, right set of controls, so. Working in the CSS, working group we, are contributing, a new proposal called, forced, colors media query this, will help you detect, when, a user has, set high contrast, either in their browser or, through the operating, system once. You've detected that you can either choose to keep. The styles as is or you can choose to change the styles so, using the forced color adjust, none, property, you can disable color, adjustments. On an entire element, subtree, and replace. It with your own set styles. If you choose and. You can also use these styles. To. Leverage existing colors, that the user has specified, so, these are proposals right now but once they get stabilized. In the standards, track we will start committing these changes, upstream, to chromium. While. We were looking at high contrast, we also noticed, that the built-in chromium, web, controls, weren't. Supporting, accessibility. Very well so when you enable high contrast, they didn't support high contrast, so, this is another area where we're helping, just, in contribute. High contrast, support so after these changes, land you'll just see high contrast, work there's, nothing you need to do we. Also did some user studies, where we found that, the focus rec visibility. Wasn't very, clear. To many users so, we're increasing, the contrast of, the focus rect. While. Updating the controls, we also realize, that the, controls, aren't very touch friendly so, for your users on touch devices they. Don't have great hit regions so we're going ahead and updating, the controls, to improve their hit region so it's easier, to touch them when. You're on a touch device, on. A touchscreen we. Also heard some feedback from, some of you that the default styling of the controls was very basic which, would often, force, you to update the styling, of the controls, beyond. What you would have just done for branding, purposes so. We're also going ahead and updating, the look and feel of the controls to. Match the look and feel of the browser so. Now you can choose to, do, as much styling, as you feel is necessary for. Branding purposes. We're. Also bringing, better, keyboard, accessibility, both to the browser and to, developer, tools so, here's an example of how I can use the, keyboard to drive the performance, tools directly. Without any other input modalities, and. Finally. If you use webvtt, on, your website for captions. Today. When a user goes to the windows ease of access dialog and tries. To change the settings to like say 150%. Caption, size white. Background, black, foreground, chromium. Doesn't support this today, we're. Also contributing, changes. Where this will just work after, it's done we're, working with chromium engineers, to support, similar settings, across other platforms. As well, so. We've received great support from, chromium engineers, on all of these accessibility. Areas, and have started committing, changes, and we expect, these features to lend in the coming weeks and months ahead for, all chromium. Based browsers, as. I. Mentioned before we, want to bring our Windows, platform, expertise, to, help improve the experience, of all chromium, based browsers, on Windows. We. See making the web better on window, a great, thing for all of you and our.

Partners, And business, so. I wanted to talk through these five areas. Improving. The login, experience, for your customers making it seamless and more secure, is probably, a top priority for everyone. Web. Authentication is, a new web standard, that's, supported, in all major browsers that, lets you leverage. Biometrics. Authentication. To do password, less and to, factor, auth scenarios, in a way that's, more secure than. Traditional, passwords, so. Let's take a look at a demo. So. I'm on MSN comm and I'm gonna go ahead and sign in. So. The Microsoft, account team has gone ahead and added support, for web authentication, normally. In the past you, would have to log in with a username and password but. Now with web authentication you, can log in just. With biometrics, off we've. Also worked with chromium engineers, to add support, for Windows hello this, is the default Windows. 10 Authenticator. And is available on all Wind 10 devices and was recently phyto to certified. So. Normally I would put in my email and then a password later on but, now I can click on this sign in with Windows hello, and. You, can see that the page has now brought up the Windows hello dialog, and it has an option of biometrics. Off pin or security, keys the, Windows hello Authenticator, has recognized, me and it's saying hello Jatinder I click, OK and I'm logged in I don't have to provide a password. So. How do you use this experience, on your, site. Actually. It's worth mentioning that experience, is available in, edge today and the, Microsoft, account team is rolling out support, for, the same feature in edge canary. And dev channel in the coming weeks so, how. Do you support. Weboth. Indication, well it's quite straightforward, there's, two api's, first. You're gonna register. A credential, for a given, user on a given, device, and. Then. Later, you're gonna authenticate the user so. To register the user you. Use the Navigator credentials. Dot creat method this. Will create a strong cryptographic, key. Pair you. Will place the private, key on this, OS, securely. And, it will return a public. Key that you can put on your server. Once. That's done the next time the user attempts. To log in you, will authenticate, the user using, the navigator credentials.

Get Method. You. Can either specify a, very, Pacific Authenticator. You want to use or, you can just use the default Authenticator, that has a credential, once. This call is made the. Authenticator, will verify the user so, you saw windows hello showed up and it verified, me through biometrics off once. That's done the, Authenticator, will take a challenge, that you provided you. Will use the private key and sign, that challenge, it. Will return that signature, back to you and on. The server you're gonna use the public key and you, can validate that that's the exact same challenge, that you had said so, through the magic of symmetric. Cryptography you. Can login in a way that's more secure without. Ever providing, a password, if. You're interested, in the server-side and client-side changes. To use this new technology there's. An entire session devoted, to this tomorrow, afternoon, so please do check that out. For. The media developers, in the room premium. Media sites use, the encrypted. Media extensions, web standard, and content. Decryption, modules, to, protect, premium. Media content, so that it's only viewed, by, users, authorized, by authorized, by this streaming, service, today. Edge supports. The, Microsoft, PlayReady CDM, which, is the only Hardware. Backed content. Protection available, in, any browser on, Windows 10. This. Gives, premium, media sites the confidence, they need to. Give edge the highest quality content, including. 4k, Premium and 1080p. Content, because. Player ad is hardware backed it, also gets best-in-class, battery. Life for. Protected, media playback. But. If you developer, not all developers, want to support multiple, different CDM, system, and multiple, different licensing, configurations. So, as a user you may have encountered a page like this while browsing the web where, a site didn't, work a premium, media site. On. Edge and it only supported, the. Google Widevine CDM to. Support costs to save costs on Windows so. To give you technology. Choice and. To help your users have the best, most. Compatible experience. The, next major version of, edge will, support both Microsoft, PlayReady and google, Widevine CDM. So. If you want the highest quality content. With the confidence, from a hardware backed, CDM, system, you can continue, to use PlayReady, if. You don't use PlayReady and you're, already using Google wide bunk CDM. And content, for that you, can continue to do so, PlayReady. Will only be supported on Windows 10 so. It's important, that you feature detect, the, available. CDMS, so, you can use the request media, key. System. Access, api to do this feature detection, we, recommend, that you start with PlayReady. So. Since I brought up feature detection I also. Wanted to talk to you about user, agent strings. The. User agent string is a string that the browser sends, to web servers to identify, itself. If, we look at the chromium UA string in. It you can kind of see the history of the web because. Over time all browser vendors, have been giving, different tokens. To. Get the most compatible, web content, to. Continue that long tradition the, next major version of edge will also, send a very similar string, as chromium, in fact, it's the exact same string, except. We're adding the EDG, token. So. If for some reason, you're blocking, your site on user. Agent, detection please. Provide, access, to, the EDG token, and give, us the exact same content, that you, would give to any chromium, based browser so. We chose the EDG token, to, not collide, with the current version of edge the edge token, and, workarounds that you may have applied, for. The current version of edge, so.

When Should you use user, agent, detection to. Detect feature, support, I guess, the. Short answer is you should probably never do that the, UA string is very fragile. Tokens. Are changing all the time version. Numbers are changing so, code that you write to UA detect, it's, fragile on its own but, it also forces you to continue, to maintain that code as new, browsers, ship new features every six, weeks you're, forced to constantly up these update, these version numbers. Instead. If you did feature detection, like, I'd shown in the CDM example, you write that code once and it's now future proof you don't have to worry about updating that code for. Example that CDM case if you write that code once and a new browser supports. The PlayReady CDM, that code will just work. Let's. Talk a little bit about how the edge team, is helping improve the speech experience, in edge so. Speech synthesis, is a web standard that converts text to speech we. Heard feedback from some of you that, the existing, speech scenario. Or the quality of the voices wasn't, great so we've, gone ahead and worked with the Microsoft cognitive, Services team to add support for more higher-quality, voices. So. In this demo I'm gonna go to this, demo site that we created which uses, speech synthesis, to convert text to speech. Try. The new Microsoft, edge insiders, channels, you. Can tell the voice sounds a little bit robotic. We've. Now added support, for four new cloud back voices, so let's take a look at one of these voices. Please. Download, and try the new Microsoft, edge insiders, channels, so. If you're trying to build a voice, BOTS or a chat assistant, these more natural. Sounding voices may sound better for you so we've added support for four new cloud based voices, and we expect more voices to show up in the coming weeks that, will have even higher quality, content, so how do you use speech. Synthesis. Here's. An example you. Provide the voice name that you want to use you use the utterance, constructor. To create an utterance object, the. Get voices, method will tell you what are all the available voices, both on the system, and on the cloud so these new cloud back voices, are not just, supported, on Windows 10 they're supported, wherever, edges available, because their cloud back. You. Would then use the utterance, text, for, the text you want to speak the, voice for the voice you want to apply in the speak method so. This is a good example of a web standard that's broadly available across. All browsers, but. The cloud-based voices. Is a good example of Microsoft's, service that, we likely wouldn't, contribute to chromium because, we know all browsers, want to support their, own version, of their services. Another. Area that we're, helping improve, in chromium is helping. With better hardware, integration. Scrolling. Is a very, important, experience, for your users as, it's one of the most effective, way to show that your page is responsive. We. Want to bring the, most fluid and smoothest, scrolling, experience, to chromium for many. Input, modalities like touch touchpad. Mouse. Wheel and scroll bar we, took a look at our data and found, that almost every, fifth interaction. For, scrolling happens, with a scroll bar so, we decided to start there so, we, measured the steady state scrolling. Latency, on a scroll bar on a surface, go device and found that, edge hTML is actually significantly more.

Responsive. Than chromium, now, fortunately, chromium, engineers are actually very excited, to work together to, improve scrolling. Further so. We think this is a great collaboration. Opportunity. Let, me show you one of the first changes we're, making in scrolling. So. Today if you have a lot of activity, happening on your main UI thread. You. Can often starve. The. Message queue and not be able to service messages. Coming from the skull. Which. Causes, jank to appear so this can often happen imagine. You have a lot of comments loading, up at the same time it's, causing an interment hang and now the users tries to scroll and they just can't scroll they recognize, that the page is not responsive, so. I have a pretty, ugly, looking, demo site here which, has a dependent, animation, and, I'm gonna cause an intermittent. Hang to. Showcase. How that happens so I'm causing an hang you can see that the animation, is now hanging and if I try to scroll, you. Can see that it's really janky, I'm moving my mouse quite, a bit before the scroll catches, up so, as an end user I can very quickly realize, that this, pages, is, not responsive. In. This. Build of edge we've, made a change where we've now moved scrolling. Off the UI thread so, no matter how busy. Your main pages are how much. The UI thread is hung an end user won't realize, so. Let's take a look at the same page I'm, gonna cause a hang. And. Now if we look at scrolling it's, smooth so, if you have these intermittent. Hangs that happen for, a very short period of time a user, may not even realize that this ever happened. So. How do you use this well we're, baking it in by default there's nothing you need to do to support the. Scrolling experience, you'll just get it by default so, this is just the start of the journey we're, working, on improving many other input modalities as well and we will be committing, this change up streaming, chromium soon. We. Also wanted, to help improve the touch experience for your touch users so, the windows touch keyboard supports, many capabilities. That aren't available in, chromium. One. Example is auto text suggestion, this is a very common, experience, if you're on mobile as you're, typing you can see, text, being suggested, and you can type, faster by selecting, them shape. Writings another example, of a capability, available in, the Windows keyboard, that's not available, in chromium so, this is when you swipe, your finger over keys and you can type faster so. Earlier, this year we made. Some changes and we've contributed, both of these features to chromium so, you can use this today in all chromium, based browsers, so. Here's an example of shape writing before the change landed, it, just doesn't work and. Now after the changes landed shape, writing works okay. So we've talked about a number of areas, where, we're helping bring our Windows platform, expertise, to, make chromium, browsers. Better I want, to talk to you about how, we're listening, to customers like yourselves to, help solve some of your unmet needs by evolving, the, web forward, so. Here are three things I'd like to talk to you about. The. First is HTML, modules, we've. Heard feedback from. Some of you that componentization. And, dependency, management on the web isn't, really good for declarative. Markup, so while script modules, let you do a lot of these things it, really forces you to convert, your declarative.

Markup To, dynamic, markup so let's take a look at an example if. I, wanted to create this custom, element, this whink control I can, do so creating, an, image that, when I have a mouse click event I put. A different image in using. Script modules I would write it like so I would import. My button j/s where I would define the custom element and I would register the my button class to this custom element and then I would use it if, we look at the definition, you, can see that there's, a lot of, HTML. And CSS being. Encoded as JavaScript, strings I'm, manipulating. My CSS, in script I'm creating. HTML nodes, for. Many of you declarative. Markup would have felt a lot more natural, hair but. This isn't available, on the web today you just can't do this, so. We're proposing a new web standard called HTML, modules, which lets you do exactly that so. This is the. Updated page it's actually exactly the same as before except. Now I am importing, a my button. HTML. And you. Can see I'm defining everything, in declarative, markup so I'm it's just my regular HTML, and CSS now. I can leverage existing content. Without having to rewrite it so. We're looking at bringing similar, concepts, to CSS, and JSON modules, and have, received great support from both standards, bodies and chromium, engineers, on this I. Wanted. To show you a simple example of improving. The web to unblock a customer. Scenario so, we talked about speech synthesis. When. We talked to educators they've, told us that they really like our edge read, aloud feature which, uses speech synthesis. To, convert text to spoken word as it, helps their students, follow along but, they want to see better. Synchronization. Of the highlight, effect with, the spoken word, unfortunately. The web standard, just didn't support this there was no way to synchronize, what's being spoken with. An effect like a highlight. So, we contributed, a very straightforward, change a char length attribute. To the speech synthesis, event so. While it's a simple change it now enables. This. Entire new scenario so let's take a look. At. The read aloud feature. So. I'm gonna enable this, the. Battle of Gettysburg. Four. Score and seven years ago so. You can see that as this the speech is talking I can do a highlight effect that synchronizes. Very, well. With, the spoken word so. This is it's just a simple example of, us, listening. To customers, and and adding, and contributing. Changes to a web standard the, unblocks, and use scenario. Gaurav. Spoke about how we're bringing, powerful. Web capabilities, powerful. Device integration, directly. To the web so, you can build amazing, websites, web, apps, then PWA, is just purely. On web technologies, so, we're looking at bringing capabilities. Like file API share, protocol. Handlers, directly, to the web and other similar concepts, so, we're working very closely, with chromium, engineers, on the, project. Fugu which is attempting to do something. Very similar, so. These were a couple, pretty. Basic examples, of how we're starting to listen to customers to. Help solve their unmet needs so we'd love to hear your feedback on, what are some things, you can't do on the web today that we and other browser vendors can help solve with, that I'm gonna hand it back off to Goro. I. Think. The at the beginning of the talk today we talked about you. Know the focus for, this heart the focus was you the web developers. You. Know there are three things I want to just recap, these are the three key takeaways that I want every, one of you to have from what we talked about, when. We started we talked about our new new focus, a relentless. Drive, to, listen and talk to our customers to, understand. Their unmet needs and start delivering on those, we. Then talked about, some. Of the problems, that we've been hearing the, work we've been doing the enhancements.

That We are bringing to the platform, to help reduce. Your pain reduce, your cost for both web and windows development. And lastly. Détendre. Talked about our collaboration and, contribution, back into open source, we. Hope that these, contributions. Back to the open source would not only improve, all chromium, based browsers, but, will also, help projects. Such as electron, safe, which is chromium embedded framework, these are projects that are all built using chromium. We. Are very early in our journey we. Are very excited by the initial momentum that we are seeing but to be honest we are a lot more excited. Of building. This web together, with you of building the product together with you if. You haven't already, please. Join. Microsoft, edge insider, download. The product give, it a try. Jitinder. And I will, be available after this talk we will also be available for a couple of days in the booth there, is the rest of the team available come, see us there if you have any questions, we will be more than happy to answer those, if. You want to try the new web you control you can go to aka.ms/offweb. Handles. Are available, there so, thank you for coming and thank you for listening thank you.

2019-05-09 00:16

Other news