What is WebView2 in Microsoft Edge Browser?

WebView2, created by Microsoft, is a web browser tool that uses the Chromium engine from Google Chrome and Microsoft Edge. It lets developers easily add web content (HTML, CSS, JavaScript) to their apps, perfect for making hybrid apps that mix web tech with native features.

What is WebView2?

Microsoft WebView2 empowers developers to seamlessly embed web content (HTML, CSS, JavaScript) directly within their native Windows applications. This integration unlocks a world of possibilities, allowing you to leverage the power and flexibility of modern web technologies while still benefiting from the familiar features and performance of native apps.

WebView2 is built on top of the Chromium engine, the same engine that powers Google Chrome and Microsoft Edge, ensuring compatibility with the latest web standards and delivering exceptional performance and security.

By incorporating WebView2 into your development workflow, you can craft dynamic and engaging user experiences that seamlessly blend web and native functionalities.

Why Do We Need WebView2?

Microsoft WebView2 empowers developers to create modern, engaging Windows applications. Here's why it's a valuable tool:

• Enhanced User Experiences: Seamlessly blend the best of web technologies (HTML, CSS, JavaScript) with the power of native Windows features. Craft dynamic and interactive interfaces for exceptional user satisfaction.
• Accelerated Development: Leverage existing web code, libraries, and frameworks within your native applications. Reduce time-to-market without sacrificing functionality.
• Modernize Legacy Apps: Breathe new life into older applications by integrating the latest web technologies through WebView2. Stay competitive without complete rewrites.
• Cross-Platform Reach: Target a wider audience by building applications that work consistently across various Windows versions thanks to WebView2's compatibility.

Benefits of WebView2

• Accelerated progress: Utilize the extensive array of web technologies (libraries, frameworks, and tools) to speed up development timelines and minimize coding workload.
• Flexibility: Merge web components with native apps, empowering the development of interactive and advanced applications.
• Enhanced user satisfaction: Blend the top features of web and native app experiences, providing users with a recognizable and visually pleasing interface.
• Budget-friendly solutions: Cut down on development and upkeep expenses by making use of established web technologies and expertise.

When to Use?

• Hybrid applications: Develop apps that combine the advantages of web and native features, providing improved flexibility and user satisfaction.
• Modern UI: When developing modern user interfaces that require dynamic web content, WebView2 can be used to integrate such content seamlessly.
• Old Application Modernization: WebView2 has the power to revitalize outdated applications by seamlessly incorporating cutting-edge web technologies, all without the need to completely rewrite the entire application.
• Progressive web apps (PWAs): Host PWAs within your native app, enabling offline access and a more integrated user experience.

Steps to Use WebView2

Necessary Requirements before implementing

• You should have installed Visual Studio, if not Download Visual Studio: https://visualstudio.microsoft.com/downloads/
• WebView2 works with both .NET Framework and .NET Core projects. Ensure you have the appropriate version installed for your project type.

Step 1: Create a new project:

• Open Visual Studio and choose to create a new project.
• Select either a WPF App (.NET Framework) or a Windows Forms App (.NET Core) depending on your preference.
• Give your project a name and location and click Create.

Step 2: Install the WebView2 SDK:

• Utilize the NuGet Package Manager in Visual Studio to incorporate the WebView2 SDK into your project.

• In the Solution Explorer, right-click on your project and choose Manage NuGet Packages.

• Within the NuGet Package Manager window, navigate to the Browse tab and look for Microsoft.Web.WebView2.
• Press on Install beside the Microsoft.Web.WebView2 package.

• Agree to the default version and proceed with the installation.

Step 3: Add a WebView2 control

• Once you have installed the WebView2 SDK, you can easily incorporate the WebView2 control into your application's user interface.
• Locate the WebView2 control in the toolbox window of Visual Studio, which is typically positioned on the right side.It may be found under the Common or Experimental section, depending on the version of Visual Studio you are using.
• Simply drag and drop the WebView2 control onto the design surface of your main form, which is the window where your application will be shown.

select webview2?

Step 4: Handle navigation :

You have the choice to include additional features such as navigation buttons (back, forward, refresh) in your application. WebView2 offers events and methods to interact with the displayed web content.

Step 5: Build and run:

• Once you have included the WebView2 control and added any extra features, you are ready to develop and test your application. Remember to save your project by pressing Ctrl+Shift+S.
• To start debugging and run the application, press F5.The WebView2 control will appear blank initially.

Step 6: Navigate to a website:

To show a website in the WebView2 control, you must utilize its navigation techniques in your code. The exact code will vary based on the programming language you are using (C# for WPF or WinForms).

Simple WPF Application with WebView2

1. Create a WPF App: Open Visual Studio and start a new WPF App (.NET Framework) project.

2. Install WebView2 SDK: Right-click on your project in the Solution Explorer and select Manage NuGet Packages.

3. Search for and install the Microsoft.Web.WebView2 package.

4. XAML Code (MainWindow.xaml):

XML

<Window x:Class="WebView2Example.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WebView2Example"
        mc:Ignorable="d"
        Title="WebView2 Example" Height="450" Width="800">
    <Grid>
        <WebView2 x:Name="webView" Source="https://www.microsoft.com" />
    </Grid>
</Window>

• This code creates a simple window that contains a WebView2 control called webView.
• The WebView2 control's Source property is set to "https://www.microsoft.com" to indicate the website to load first.

5. C# Code-behind (MainWindow.cs):

C#

using Microsoft.Web.WebView2.Core;
using System.Windows;

namespace WebView2Example
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

• The code-behind file is currently blank, but it can be utilized to manage events from the WebView2 control or engage with the web content that has been loaded.

6. Build and Run:

• Save your project (Ctrl+Shift+S).
• Press F5 to run the application.
• The window will open and display the Microsoft website within the WebView2 control.

This is a very basic example, but it demonstrates the core functionality of using WebView2 in a WPF application.

Conclusion

WebView2 is a great tool for adding web content to your Windows desktop apps. It uses the Microsoft Edge engine for a safe and familiar browsing experience. Integrate WebView2 into your projects by following the steps provided. Use language-specific resources like C# for WPF or WinForms for detailed guidance on navigation, event handling, and advanced features. WebView2 is user-friendly and powerful, making it a valuable asset for developers looking to enhance their desktop apps with web capabilities.