[Music] hi everyone i'm scott lowe a program manager on the microsoft edge web platform team today my colleague zohair and i are excited to share an update on the state of the microsoft edge platform we'll start with an update on the web platform and our commitment to building more powerful capabilities and better fundamentals powered by open web standards and open source then i'll turn it over to zohair who will show you how the same platform can be leveraged to build powerful desktop web applications using standards-based or hybrid development patterns with pwas and webviews we'll walk through improvements in the browser developer tools to build more approachable experiences for inspecting and debugging your sites and apps and lastly we'll walk through some updates for browser extension developers which present a great opportunity as our add-on store continues to grow before jumping in it's worth noting that everything we talk about today including demos and additional resources will be available after this talk at the link shown here on the slides so let's start with an update on the state of the web platform in late 2018 we announced our move to the chromium open source project as the new foundation for microsoft edge since announcing our adoption of the chromium project in december of 2018 microsoft has now contributed over 5 300 commits to the chromium open source project across a wide range of areas here you can see that our contributions span the entire stack from networking to form controls to the v8 javascript engine this includes over 100 changes to the web platform tests and over 550 commits to devtools some of these contributions include things we announced last build like new apis to make the web a first class development platform on emerging form factors like foldables and new additions to devtools like the one shown here to help developers easily test these experiences without requiring access to a physical device speaking of our dual screen apis these apis in addition to several others were made available throughout the year for anyone to test early via origin trials now if you're not sure what origin trials are they offer a way for developers to sign up to test and provide feedback on experimental web platform features before they're widely available last build we announced our origin trials developer console which lets developers sign up for origin trials specific to microsoft edge since our announcement last year the microsoft edge team has run nine origin trials on top of the 30 plus run upstream by the chrome team which in case you're wondering are also usable in microsoft edge the feedback we've obtained from developers has been invaluable as we continue to work in the open with other browsers web developers and standards bodies to evolve the web responsibly to provide a concrete example we're currently incorporating community feedback we received on our dual screen apis and are aiming to ship these as part of chromium in the next few months beyond our dual screen apis we have two other apis currently in origin trial which we'll talk about throughout this session today we encourage you to keep a close eye on the console in the future so you can be one of the first to test new innovations our team is experimenting with if you want to plug into our process for evolving the web even earlier you can find more information and provide feedback on our latest ideas in our explainer's repository on github now let's spend some time talking about the changes we've made to advance the web platform over the past year lately the microsoft edge team has been focused on listening to developers unmet needs and evolving the web platform to include more native capabilities and to close performance gaps with native solutions this has led us to invest in a wide range of capabilities such as delegated inking canvas formatted text the eyedropper api dark mode controls and more let's take a quick look at these highlighted features which represent capabilities that have or will be shipping coming to origin trials soon first up are delegated ink trails one problem we heard from developers building pen first experiences on the web centered around inking latency when compared to native inking solutions this same unmet need was echoed by users of web-based features like microsoft edge's web capture who requested more performant inking when marking up their screenshots to provide some background ink latency on the web occurs due to a multi-frame round trip time between the browser and the gpu during the process that receives input points from a pen tip and draws a continuous stroke of ink between them we realize that we can improve this in two fundamental ways first by running a prediction algorithm we could proactively draw a small amount of ink in the direction we think the pen is most likely to travel to help close the gap second and more impactfully we realized we could mask this round trip time by feeding input points directly to the operating system doing so would allow the os to connect input points with an os rendered ink stroke while the browser's ink rendering pipeline catches up a few frames later in our early prototypes we've observed an on average 240 percent reduction in inking latency thanks to these improvements and we can't wait for you to try them one goal we had when we set out to improve inking latency on the web was to make it as easy as possible for developers to take advantage of these improvements the code you see here is all you'll need to get started simply request a new delegated ink trail presenter define an inktrail style for the os to draw and call update inktrail startpoint to start rendering delegated ink we have an origin trial for an early implementation of delegated ink trails available for developers today while this early implementation won't showcase the full latency improvements just yet we'd love your feedback on api ergonomics as well as prediction values which can be configured in edge flags the next api i'd like to talk about is canvas formatted text in the past two years canvas usage on the web has steadily increased when talking with developers we've seen applications like word processors spreadsheets and pdf viewers choosing to move to canvas since it can easily present content where the view model and the data model are not tightly coupled in gaming and mixed reality scenarios canvas is the only logical choice for presenting a rapidly changing view in all of these cases it's often necessary to present text to the user but what we've heard from developers is that the current text rendering apis exposed by html canvas often fall short of their needs requiring them to run expensive javascript calculations to power scenarios like line breaking and bidirectional text rendering to solve this need we propose the canvas formatted text api in the w3cs web incubator community group this api aims to expose the powerful line breaking and text shaping engine used by the browser to html canvas this will provide developers with the ability to effortlessly render multi-line text with support for advanced text features like writing mode text decoration justification and more here's a fairly simple example that demonstrates how the canvas formatted text data model works the first step is to create an html canvas and to get a reference to its 2d context next you can create a canvas formatted text object which contains an array of formatted text run objects eventually it will be possible for formatted text and formatted text run objects to be uniquely styled using css styles this is something that's never before been possible with text in html canvas the fill formatted text function then allows formatted text objects to be rendered with specific xy offsets and wrapped at a certain width this wrapping is performed natively by the browser's existing layout engine and eliminates the need for complicated and expensive javascript solutions like the one we saw a few slides earlier we're continuing to prototype with the api and chromium and evolve it to add support for things like css styling bi-directional text rendering text measurement and more if you'd like to try this api out early you can do so by enabling the experimental web platform features flag in edge otherwise we'd love to hear your feedback on the canvas formatted text api on github or through our origin trials developer console when the api lands in origin trial soon another capability we've been working on recently is the eyedropper api the eyedropper api builds on top of the color picker control by allowing web developers to implement their own ui for color picking on the web as you can see from the code samples shown here using the eyedropper api is as simple as instantiating a new eyedropper object calling the open function in response to some user interaction with the page and handling the new color select event that's been added we're in the process of working with the w3c and other browser implementers to finalize the shape of the api and are aiming to ship it in chromium next quarter another capability i'd like to cover is dark mode controls on windows last year we partnered with our friends in chromium to refresh the look and feel of form controls making them more modern accessible and touch friendly than ever before this year we continued this partnership by landing dark mode support on windows for developers using native form controls on sites that support dark mode this means that no extra work is required to create experiences that look great no matter how and when they're viewed dark mode controls are already available on desktop today and we'd love to hear your feedback on them so that was a quick recap of some of the new capabilities that have or will be shipping coming to origin trials soon i'd now like to share a quick preview of a few upcoming web platform capabilities the team is excited about the first is customizable controls a common frustration for developers who try to work with the browser's built-in form controls is that they can't customize the appearance of these controls to fit their site's design or user experience when developers re-implement form controls from scratch they're not able to leverage the work done on the web platform to optimize things like performance reliability and accessibility alongside collaborators in the chromium project and the open ui community group at the w3c we're exploring how to make html form controls much more customizable in terms of both style and content we've heard from developers that the select element causes the most pain in terms of lack of style ability and a restrictive content model as a result we've started our explorations by prototyping a customizable select menu element in chromium you can check out the early prototype at the link shown here on the slides while exploring a more customizable select we realized the web platform needed new primitives for the list box portion of such a control as well to solve for this we proposed a new pop-up element and related primitives which will make it much easier to author top layer transient ui we're currently incubating these platform primitives in the open ui community group and invite all web developers to participate in shaping them together the second upcoming capability i'm excited to talk about is the highlight api we proposed this api to help editing frameworks performantly highlight text for scenarios like custom selection spell checking and find on page we were thrilled to see the positive community response it received and we're excited to see it get adopted quickly into the css working group we're currently working on an implementation for level one in chromium and once that's shipped we'll move on to level two which will let web developers define clickable regions to build more interactive highlighting experiences so that was a quick recap of the work our team has been doing to evolve the web platform to make it more performant and more capable than ever we encourage you to join web standards discussions in the community and to provide feedback on our latest apis via origin trials so that we can best make the web work for you now so far we've talked a lot about web platform features and typically we talk about these in the context of websites being rendered in the web browser but that's just one place where the web platform shows up many of you likely use web technologies and apps whether they're native applications that embed web components for elements of the ui hybrid apps or fully standards progressive web apps in addition to advancing the web platform we've also made numerous improvements for developers of web apps to make their applications even more capable and feel more at home alongside the operating system to tell you more about these changes and the latest on tooling and extensions i'd now like to turn the stage over to zohair thanks scott for that update on the web platform i'm zohair and i'll be covering web applications developer tools and extensions you know microsoft edge is actually only one of the desktop apps on windows that use the web platform across all of windows millions of apps use some form of web content and we tend to think of those apps on a spectrum of reach versus power what we mean by reach is that anyone anywhere in the world can navigate to your website by typing the url into the address bar of a browser but native apps have access to more powerful capabilities like the file system advanced windowing and custom drm solutions in this session we'll focus on progressive web apps which are only growing in power as we light up more capabilities for the web and hybrid apps using webview 2 which get the best of both web and native technology let's dive right in to some exciting developments in the world of progressive web apps or pwas pwas combine the best of web and native they're fast available across device installable and have growing support for advanced capabilities all with the incredible reach of the web the microsoft edge team really wants to deliver on the promise of pwas and we have two main ways of doing that we collaborate with other companies and the web standards bodies to enhance capabilities in chromium and we experiment and innovate in microsoft edge and on windows to provide tight valuable integrations between your app and the operating system pwas aren't just for mobile form factors and we're seeing increasing momentum on desktop form factors with windows as the new edge rolled out to more devices pwa usage has accelerated and we're seeing millions of app installations and billions of user minutes each month those numbers are trending up as we add more features and bring on support for store-based distribution on windows platforms with all of those installs in minutes we're getting a ton of feedback from end users of pwas on what they want to see more and less of this led us to make some improvements in microsoft edge itself to make pwas easier to find and install but we're also making chromium-based pwas more discoverable by adding them to the microsoft store within microsoft edge users couldn't find the install button in the address bar and didn't understand the benefits of installing an app from the browser installation was also a little confusing since your pwa just opened in a separate window without any confirmation that the app had been installed successfully rolling out in microsoft edge today we've made the install icon more noticeable in the address bar and explain the value of installing in the dialog that appears when you click it installing produces a progress bar to show the user we're working on it something users have come to expect when installing an app post install we show another dialogue welcoming users to the app and providing a place to promote pinning to the taskbar and the start menu which we've observed increases engagement with your pwa many users also find apps in the microsoft store and we don't want users to have to think or care about the distinction between web and native apps when looking for their favorite experiences with the microsoft store you can reach over a billion windows 10 users and they won't have to navigate to your app in the browser to find it shipping your pwa in the microsoft store can be done in just three simple steps start by creating an app reservation in the windows partner center then use pwa builder to package your pwa here's a quick demo to show just how easy that is to do navigate to pwabuilder.com and enter the url for your app pwa builder runs some tests to make sure that your app can be installed has offline capabilities a manifest and so on once those tests pass we can choose which store we want to package our app for so we'll choose the windows option and then as the last step we'll take the downloaded.zip and submit that app package to the store that covers some of the improvements we're making so that pwas shine in edge and on windows the other way we continue to improve pwas is with the capabilities project a cross-company effort called project fugu with the goal of enabling web apps to do anything that native apps can do the project is named after fugu a puffer fish that i've been told is delicious if prepared correctly and is deadly if not these powerful capabilities still need to maintain user security privacy trust and other core tenants of the web like scott mentioned we've collaborated upstream in chromium with project fugu to bring the following new capabilities to your pwa in microsoft edge these capabilities help close the gap between web apps and native apps so we're eager for you to try them and hear your feedback let's start with pwa activation developers told us one of the big gaps for web apps was not being able to register as a handler for links file types and custom protocols we're thrilled to share that all three new features are now available for you to try in edge these features are a great way to drive engagement with your pwa since they provide more contextual ways for users to get into your app like some of the web platform apis that scott showed the uri protocol handling feature is also currently available as an origin trial that you can register for just like with protocol handling app shortcuts are also available by declaration in the manifest shortcuts provide users a way to jump straight into a task or section of your web app by using native features like long pressing or right clicking the app the context menu in the operating system then displays the available shortcuts just like with the experimental web platform features that scott showed it's important to note that these features are available via origin trials or behind flags in microsoft edge you can give these capabilities a try by navigating to edge flags turning on a flag in the browser and restarting it to try the run on os login feature turn on the desktop pwas run on os login flag and now the edge apps page has a new context menu option called start app when you sign in which is something that users can opt into or a permission that your app can request just like with pinning to the taskbar or the start menu we're expecting this feature to grow usage and engagement for your pwa which is why we're also adding it as an option to the post install prompt that i showed earlier a lot of other apps like vs code and microsoft teams use the real estate of the title bar to add important top level functionality for their app title bar customization brings that capability to pwas giving you more control and a more native feel to your app pwas are a great way to build and distribute an application if web standards meet all the requirements for your apps but we also know some developers want to build hybrid applications apps that mix web and native technology maybe you want to access capabilities that aren't available on the web yet or maybe you have an existing native app that you want to modernize with the latest and greatest that the web has to offer to support these use cases we've introduced webview 2. webview 2 allows you to take the edge web platform and embed it in your native application webview 2 can be used to draw the ui for your entire app or just to embed a small control that lives side by side with your native ui with webview 2 you don't have to choose between web or native you can now treat both as first class citizens on windows even in the same app and you get the best of both worlds we've talked about webview 2 for the last few years at build but one major announcement since last year is that webview 2 is now generally available this means it's ready for you to ship in production applications for win32 c and c plus plus developers and net developers using wpf or winforms webview 2 was made generally available late last year more recently last march we also announced support for webview 2 in wind ui 3.0
is part of project reunion 0.5 for those of you that watch the keynote that means project reunion 0.8 already includes webview 2.
with these frameworks we've been able to bring webu2 to more native windows developers and hopefully more of you are able to start embedding modern web content in your applications we could not have made our journey to webv2's general availability without the early and crucial feedback from our first party and enterprise partners morgan stanley has been along for the ride almost since the very beginning and here's what they were able to do with webview 2. at morgan stanley and other financial institutions there's a need for speed every second matters traders on their desktop could have between two and six monitors and the pixel placement of everything that goes on on their desktop is very important and will drive directly the productivity that our traders have when serving their clients with this many applications on the desktop you're going to have applications that are written in multiple technologies so you've got technologies that are both native technologies as well as web technologies and trying to get them to talk to each other as a challenge until recently we've been able to combine web and native technologies pretty well but one thing that we've had a challenge with is the longevity and the future proofing of these technologies because they evolve at a different pace we've been able to use chromium containers to almost get to where we want the microsoft edge webv2 control finally gives us an opportunity to create a very well integrated native experience but also remain evergreen with the browser technology that worries us so much from a security standpoint the goal is that we facilitate the financial transaction like trading by creating this new product category which reputablizes the desktop development through these enhanced hybrid applications microsoft edge web u2 gives you the opportunity to get the best of advanced windowing whether it's about dom projection with pinning snapping windows if you want to participate in advanced modifications but also to be able to have access to the best breed of hardware if you have a custom keyboard the big advantage for developers that they don't have to sacrifice either to make a desktop only application or a web application they can live in a world where both of these technologies are first-class citizens microsoft edge web view 2 control allows us to really do a deep native integration with the best chromium browser technology without worrying about keeping current and security concerned this really gives you the best of both worlds by creating a robust ecosystem for the two to work together office is another partner that's helped shape the webview2 you know today our friends at office have started rolling out a new webview2 based version of the office app to users on windows with the mission of being the ideal place for you to find and create all of your content and discover the apps that will help you be productive with their update to webview 2 users now have a modernized desktop experience that is more efficient and more performant than ever don't just take office's word for it we're also seeing developer momentum build in our webview 2 sdks tens of thousands of developers are building with the sdk today and hundreds of millions of windows devices are already running webview2 based apps we support two distribution modes for webview 2. if you're already developing for the web today and you're used to the browser constantly updating evergreen is the perfect solution because you get the exact same web platform when you're embedding web content in your native app as you do when you're running that same content in the edge browser that means you always have the latest security updates and access to those rad web platform apis that scott mentioned fixed version allows you to have strict control over web platform updates to guarantee compatibility with fixed version you're actually bundling the web platform and shipping it with your app nothing will change out from underneath you and you're able to test new versions of the platform and update at your own cadence whenever you're ready since build 2020 we've also introduced the webview2 runtime which the webview2 sdk depends on the webvue2runtime contains the actual browser binaries and the implementations for the apis in the sdk the runtime separates out your app and its dependencies from the edge browser with the evergreen distribution model your app will depend on a shared system runtime since it's not bundled with your app like it is with a fixed distribution model when it comes to distributing your app you'll need to also think about how your users get the shared system runtime to help with that we're working to make the evergreen runtime as pervasive as possible it can be deployed by developers using our installers and once it's deployed all subsequent evergreen apps can use it without doing additional deployment in addition to the installers the every runtime will be part of a future windows release you'll see it coming through windows insider preview builds soon in-market webview 2 apps like office and others are also already deploying the runtime we're currently seeing hundreds of millions of devices with the evergreen runtime installed so you can be confident your webvu2 app will work great on more and more devices as time goes on in addition to all the new apis capabilities and features for sites and apps we're also investing in the suite of developer tools you use to inspect and debug your web content whether it's a pwa a hybrid app or a website when it comes to the in-browser developer tools one consistent theme we hear from user feedback and research is that the devtools are overwhelming cramming a ton of functionality into a tiny amount of screen real estate it's hard to find tools and learn how to use them so we've been experimenting with new ui and a new look for the devtools in microsoft edge over the years the chromium devtools have grown to include over 30 tools some like elements and console that you might use every day and others like sensors and performance monitor which have more specialized but infrequent use focus mode is an alternative minimal ui option available as an experiment in microsoft edge 90 or later that offers all of the same functionality as the classic devtools ui with a cleaner customizable interface helping you put in focus your most important debugging tasks with the tools and layout that you prefer the tooltips feature is great for new users of devtools or any user who wants to learn more about what certain tools sections and panes do when tooltips are on you can hover over each outline region of devtools to learn more about how to use that tool tooltips are available in focus mode as of edge 90 and are available for the default devtools ui in edge 91 they can be accessed via the control shift h shortcut or via the help menu in the devtools main menu if you've used vs code or other ids and text editors you may have seen these underlines appear under parts of your code when there are problems like syntax errors now the elements tool provides a similar functionality displaying wavy underlines to indicate code issues and suggestions related to accessibility compatibility performance security and more you can learn more about the issue and how to fix it by shift-clicking on any underline or by selecting show in issues from the context menu this will open the issues tool where you can review all issues found on the page another common theme we've heard from web developers is that context switching between your code editor and the browser can be a bit of a hassle with the microsoft edge tools for vs code extension you can use the full power of the dev tools directly from vs code by launching a headless browser you don't even have to manage a separate browser window in this demo we inspect elements change styles and log messages from the console without ever leaving vs code in addition to new features and experiments in edge and vs code we're also continuing our commitment to improve the chromium devtools for all developers scott counted 550 changes in the devtools part of the chromium codebase since last year's build but if you count from when we first began our journey in chromium we've actually landed over a thousand commits in chromium an awesome accomplishment for the edge devtools team and we've collaborated with the chromium community on features that make the devtools easier to use and more accessible for more developers you've been able to use the microsoft edge devtools in your native language since microsoft edge 80 but we know more developers and other chromium-based browsers could benefit from a more inclusive devtools we've collaborated with the chrome devtools and google lighthouse teams to add the ability to localize devtools to all chromium-based browsers we've also collaborated on new tooling for grid flexbox and fonts working together with the chrome devtools team we've added the ability to see and manipulate gridlines and gaps directly on your web page experiment with different css attributes for flexbox using icons that visually indicate what these attributes do and add a new ui to give you granular control of your font styling many of these improvements are based on feedback from web developers but the most common piece of feedback on devtools may surprise you many microsoft edge customers open dev tools accidentally are surprised to see the console or elements tool and actually think that they're being hacked to address this feedback we've worked to introduce the dev tools better using a fly out when the f12 shortcut is pressed to set expectations about what is going to happen next and greeting new users with a welcome tool we also have some exciting new announcements coming for developers that build extensions also known as add-ons for the edge browser the edge add-on site is rapidly growing and while microsoft edge supports extensions from outside stores most installs come from the edge add-ons directory so the best way to get your extension in front of edge users is to submit it to the add-on site starting june 1st we'll be promoting microsoft edge extensions with an incentive program for consumers so publish your extension to the edge add-on site by then to take advantage of it we're continuing to improve the developer experience for extensions as well with data about your extension available in the partner center later this june and new apis for publishing and updating extensions coming in july finally i wanted to touch on legacy browsers and compatibility we're always on a mission to reduce test pain and fragmentation for web developers if you've been following the news you probably heard that we recently ended support for microsoft edge legacy and removed it from windows 10. and
earlier this month we announced the end of support for internet explorer 11 coming next year for most developers this means a reduced test matrix and less compatibility pain for your organization we do have resources available for developers who have questions or need help modernizing your app or browser deployment at the link shown here you can find additional resources on everything else we mentioned in this talk at the link shown on the screen the link here points to a gist on github with more links to explainers origin trials demos pwa builder devtools docs and more your feedback is incredibly important to us and shapes the capabilities and features we announce each year at build so please keep engaging with us to make edge the best platform to develop on thank you so much for tuning in
2021-05-31