Microsoft Edge WebView2 is a control to embed web content within desktop applications. It is a component provided by Microsoft built on Chromium engine / the Microsoft Edge engine. To define WebView2 in a simple way, it paves a way to host web content like HTML, CSS, and JS in the application UI designed for desktops. It combines the native UI and renders web content inside the native apps.
Using WebView2, the web code can be inserted in any part of the native UI and in many different places or build an app within a single WebView2 instance.
![WebView2]()
Image source: Microsoft Learn – WebView2
Benefits of using WebView2
The improved web capabilities: Leveraging the Microsoft Edge Engine brings robust speed in processing the content, security, and support for the latest web standards are guaranteed. This also removes the problem of relying on older web browser controls and frame embeddings.
Native Integration: As mentioned earlier, WebView2 creates a hybrid approach that combines native functionality and web content together in a single app. So, the developer can utilize JS to interact with the native code and vice versa for simpler and easier adoption of new web capabilities. Also, accessing the web assets and web-based services on the native functionality on the fly opens up numerous opportunities while developing the app.
Enhanced Security: WebView2 also provides security features to protect your application from any script injection by enforcing a strict separation between web content and the native application, preventing unauthorized access to the system. Meanwhile, all the security updates provided to the Microsoft Edge Engine will also apply to WebView2, ensuring a secured app usage experience to the users.
Why is WebView2 a buzzword now?
Microsoft has already begun installing the Microsoft Edge WebView2 Runtime along with the Windows OS patch updates from Version 2101 or later since earlier this year. Even though you don't have Microsoft Edge browser installed on your machine, this runtime is utilized by Microsoft 365 apps.
Yes! Microsoft has developed a few applications already in its M365 apps which use WebView2. The Office apps will be consistent across the platforms whether you use a desktop or web app. If you want to confirm, check the Room Finder / Meeting Insights in Outlook, both will have a similar set of features and behave the same way for each function. And this answers our next question in the title as well.
What's new with Microsoft Teams version 2.0?
Microsoft Teams has invested a lot of money in re-architecting its desktop client to focus on a simpler and uniform user experience. The consumer version of MS Teams has already begun using the new architecture, and commercial customers will follow later this year.
The classic client has used open-sourced software such as Electron as the host, where the app is built with the AngularJS web framework. Initially, it was known as "north star" for the prototype, and later key decisions were made to build the UX controls in Fluent UI, which is predominantly in React.
![What’s new with Microsoft Teams version 2.0]()
Image source: Tech Community Microsoft
Overall, WebView2 provides a powerful and flexible way to integrate web content and native application without compromising security and leveraging the latest web technologies and uniform and consistent compatibility across the platforms. Combines the best of both web and native worlds.
- To start a simple development with WebView2, you can create a single-window app in Microsoft Visual Studio.
- Please note: Visual Studio Code is currently not supported.
- Create a project with C# Windows Form App (.NET Framework)
- Once the project is ready, install WebView2 SDK through the NuGet package manager.
- Create a new form and add the WebView2 to render in the form by adding this namespace "using Microsoft.Web.WebView2.Core;" in the form.cs to start using the CoreWebView2 functionalities.
Please find the sample repo provided by Microsoft on GitHub
https://github.com/MicrosoftEdge/WebView2Samples
Please see the Get Started tutorials from Microsoft Learn
https://learn.microsoft.com/en-us/microsoft-edge/webview2/get-started/get-started