Over the past several months, we have made numerous improvements to the Microsoft Edge rendering engine (Microsoft EdgeHTML), focusing on interoperability with modern browsers and compliance with new and emerging standards. In addition to powering Microsoft Edge, EdgeHTML is also available for all Universal Windows Platform (UWP) apps via the WebView control. Today we would like to demonstrate how the WebView control can be used to create your own browser in Windows 10.
Using predominantly JavaScript, HTML, and CSS, we created a JavaScript UWP app in Visual Studio 2015. With the former language, we took advantage of the new ECMAScript 2015 (ES2015) support in Chakra, the JavaScript engine behind Microsoft Edge and the WebView control.
Our sample app includes many UI components you would see in today’s modern browsers. For instance, we include forward and back buttons, refresh and stop buttons, favorites and settings menus, a favicon and address bar, etc. We also include supplemental features, such as keyboard shortcuts, full screen mode, favorites management, and responsive design.
The crux of the functionality stems around the powerful WebView control. Offering a comprehensive set of APIs, it overcomes several of the limitations which encumber iframes, such as framebusting sites and document loading events. Additionally, the x-ms-webview, how one declares a WebView in HTML, provides new functionality that is not possible with an iframe, such as better access to local content and the ability to take screenshots. When you use the WebView control, you get the same web platform that powers Microsoft Edge.
Demo the app
You can view the full set of code in our repo on GitHub. You can also demo the browser live by installing the app from the Windows Store, or by deploying the Visual Studio solution.
What’s next
This is merely a glimpse of what is possible with the web platform on Windows 10. With the WebView control, we were able to create a simple and intuitive browser using primarily JavaScript. Still, there are plenty of additional features we could build on top of this project, such as right-click, inking, theming, or even tabs. We can also refactor the core implementation to leverage transpilers and fill the ES2015 feature gaps. Our team really enjoyed building this proof-of-concept browser, and would love to continue working on it. Reach out to us on Twitter, submit issues, or if you have a killer feature you are interested in, send us a pull request. We would love to hear any feedback you have on the browser or the web platform in general!
– Josh Rennert, Program Manager, Microsoft Edge