Using Microsoft Edge in a native Windows desktop app – part 1

This article has been updated for the version of WebView2 that requires Microsoft Edge WebView2 Runtime 88.0.705.50 or newer.

Microsoft has replaced its previous IE and Edge browsers with a new version of the Edge browser, based on the Chromium project. The new browser works on Windows 10, Windows 8.x, and Windows 7, as well as macOS, iOS, and Android. If your application display web content, you can use the new Edge browser as the rendering engine. This is made possible through the Microsoft Edge WebView2 control. In this series, I will show how you can do this in a C++ Windows desktop application.

From this series you will learn:

  • how to add the WebView2 control to your C++ desktop applications
  • navigate to pages
  • navigate to pages with customer headers or content
  • handle browsing events
  • use the asynchronous programming model of Edge
  • detect Edge installation
  • and more…

Why Microsoft Edge

Microsoft has deprecated its Internet Explorer browser and replaced it as default browser on Windows 10 with Edge. Although Internet Explorer is still available in order to maintain compatibility with older websites and intranet sites that require ActiveX and other Microsoft legacy web technologies, it is no longer developed. All efforts are focused on Edge, and the new version of Microsoft Edge is based on the Chromium project.

If you are working on existing Windows native applications that display web content or want to create new ones, you should no longer rely on Microsoft ActiveX web browser control. Using Edge and the WebView2 control is a natural choice because:

  • Edge it is the default browser for the platform.
  • WebView2 is the control that Microsoft is building for using Edge.
  • If you have the Windows automatic updates enabled (and you should) the browser is automatically updated so you do not have to trouble with keeping up with security updates.

How to get the Edge browser

If you are running on Windows 10, Edge should be updated automatically. Nevertheless, you can download it from https://www.microsoft.com/. On Windows, it works on version 10, 8, 8.1, and 7.

The new, Chromium-based Edge browser has a new icon. So you know that you have the browser if its icon looks as follows:

You can check the version of the browser if you go the Edge menu > Help and feedback > About Microsoft Edge. The minimum version that works is 82.0.488.0.

You can also use preview builds of the Microsoft Edge browser by using one of its insider channels:

  • Beta channel – major stable updates every 6 weeks
  • Dev channel – weekly updates that have been previously tested by the Edge team
  • Canary channel – updated daily

For development purposes, you can use any Insider (non-stable) Microsoft Edge (Chromium) browser channel. However, for production, you must use the WebView2 runtime. The WebView2 control is not available in the stable Edge installation and you should not rely on insider channel on production machines.

Why WebView2 Runtime

If you build apps that use the WebView2 component you need to distribute it with your application. The best way to do so is using the Edge WebView2 evergreen runtime. The runtime is a modified version of the Chromium-based Edge intended and tested for apps. Only one installation of the runtime is needed for all apps on the device.

The reason for preferring to target the runtime include the following:

  • Does not depend on the Edge browser being installed on the machine, or a particular version of it.
  • Updates automatically without additional effort from you.
  • It is available to target Win32, WPF, WinForms, and WinUI3 applications (the latter in preview stage).
  • In the future, it will be shipped with Windows.

How to get the WebView2 runtime

The runtime is available for download here. You can find both evergreen standalone installers for x86/x64/ARM64 that can be deployed with your app and installed in an offline environment, and an evergreen bootstrapper. This is a small installer that downloads the Evergreen Runtime matching device architecture and installs it locally.

You can learn more about the distribution options in this article: .

For development, the WebView2 control is available as a NuGet package. You can find more information about releases in the WebView2 SDK release notes.

Prerequisites for the demo app

In order to develop, build, and run the demo app in this series, you will need:

Documentation

You can read more about Edge and the WebView2 control from the following resources:

5 Replies to “Using Microsoft Edge in a native Windows desktop app – part 1”

  1. Hello. I have tried to run this project, but I got a memory leaks without seeing any window opened.

    I have installed prerequisites: https://ibb.co/vYx4mxw

    and the project compiled fine, but I got a memory leaks:

    d:\agent\_work\2\s\src\vctools\vc7libs\ship\atlmfc\src\mfc\docsingl.cpp(30) : AppMsg – Warning: destroying CSingleDocTemplate with live document.
    Detected memory leaks!
    Dumping objects ->
    d:\agent\_work\2\s\src\vctools\vc7libs\ship\atlmfc\src\mfc\strcore.cpp(156) : {419} normal block at 0x000001F472E56E70, 158 bytes long.
    Data: 30 B3 7E 1E FE 7F 00 00 42 00 00 00 42 00 00 00
    d:\agent\_work\2\s\src\vctools\vc7libs\ship\atlmfc\src\mfc\strcore.cpp(156) : {418} normal block at 0x000001F472E9A050, 132 bytes long.
    Data: 30 B3 7E 1E FE 7F 00 00 35 00 00 00 35 00 00 00
    {417} normal block at 0x000001F472E65650, 32 bytes long.
    Data: 08 F9 BF 42 F7 7F 00 00 CD CD CD CD 02 00 00 00
    d:\agent\_work\2\s\src\vctools\vc7libs\ship\atlmfc\src\mfc\strcore.cpp(156) : {416} normal block at 0x000001F472E8EC10, 120 bytes long.
    Data: 30 B3 7E 1E FE 7F 00 00 2F 00 00 00 2F 00 00 00
    d:\agent\_work\2\s\src\vctools\vc7libs\ship\atlmfc\src\mfc\strcore.cpp(188) : {414} normal block at 0x000001F472E8EA30, 172 bytes long.
    Data: 30 B3 7E 1E FE 7F 00 00 3D 00 00 00 49 00 00 00
    {404} normal block at 0x000001F472E8E8C0, 104 bytes long.
    Data: E0 03 E5 72 F4 01 00 00 10 E8 E8 72 F4 01 00 00
    {403} normal block at 0x000001F472E8E810, 104 bytes long.
    Data: E0 03 E5 72 F4 01 00 00 E0 03 E5 72 F4 01 00 00
    {402} normal block at 0x000001F472E7EDC0, 16 bytes long.
    Data: 80 E7 E8 72 F4 01 00 00 00 00 00 00 00 00 00 00
    {401} normal block at 0x000001F472E503E0, 104 bytes long.
    Data: 10 E8 E8 72 F4 01 00 00 10 E8 E8 72 F4 01 00 00
    {400} normal block at 0x000001F472E657D0, 32 bytes long.
    Data: 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00
    {399} client block at 0x000001F472E8E690, subtype c0, 312 bytes long.
    d:\agent\_work\2\s\src\vctools\vc7libs\ship\atlmfc\src\mfc\dumpcont.cpp(23) : atlTraceGeneral – a CWebBrowser object at $000001F472E8E690, 312 bytes long
    d:\agent\_work\2\s\src\vctools\vc7libs\ship\atlmfc\src\mfc\strcore.cpp(156) : {395} normal block at 0x000001F472E75AE0, 42 bytes long.
    Data: 30 B3 7E 1E FE 7F 00 00 08 00 00 00 08 00 00 00
    d:\agent\_work\2\s\src\vctools\vc7libs\ship\atlmfc\src\mfc\strcore.cpp(156) : {390} normal block at 0x000001F472E655F0, 34 bytes long.
    Data: 30 B3 7E 1E FE 7F 00 00 04 00 00 00 04 00 00 00
    d:\agent\_work\2\s\src\vctools\vc7libs\ship\atlmfc\src\mfc\strcore.cpp(156) : {389} normal block at 0x000001F472E65590, 32 bytes long.
    Data: 30 B3 7E 1E FE 7F 00 00 03 00 00 00 03 00 00 00
    d:\agent\_work\2\s\src\vctools\vc7libs\ship\atlmfc\src\mfc\strcore.cpp(156) : {388} normal block at 0x000001F472E65530, 32 bytes long.
    Data: 30 B3 7E 1E FE 7F 00 00 03 00 00 00 03 00 00 00
    d:\agent\_work\2\s\src\vctools\vc7libs\ship\atlmfc\src\mfc\barcore.cpp(156) : {383} normal block at 0x000001F472E7C990, 96 bytes long.
    Data: 00 00 00 00 68 01 00 00 00 01 00 08 00 00 00 00
    d:\agent\_work\2\s\src\vctools\vc7libs\ship\atlmfc\src\mfc\plex.cpp(29) : {310} normal block at 0x000001F472E8CAE0, 248 bytes long.
    Data: 00 00 00 00 00 00 00 00 00 CB E8 72 F4 01 00 00
    d:\agent\_work\2\s\src\vctools\vc7libs\ship\atlmfc\src\mfc\plex.cpp(29) : {283} normal block at 0x000001F472E8BC00, 248 bytes long.
    Data: 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00
    e:\mfcedgedemo\mfcedgedemoview.cpp(21) : {279} client block at 0x000001F472E89890, subtype c0, 256 bytes long.
    d:\agent\_work\2\s\src\vctools\vc7libs\ship\atlmfc\src\mfc\dumpcont.cpp(23) : atlTraceGeneral – a CMfcEdgeDemoView object at $000001F472E89890, 256 bytes long
    d:\agent\_work\2\s\src\vctools\vc7libs\ship\atlmfc\src\mfc\strcore.cpp(156) : {268} normal block at 0x000001F472E75450, 48 bytes long.
    Data: 30 B3 7E 1E FE 7F 00 00 0B 00 00 00 0B 00 00 00
    e:\mfcedgedemo\mainfrm.cpp(18) : {264} client block at 0x000001F472E4FD10, subtype c0, 1496 bytes long.
    d:\agent\_work\2\s\src\vctools\vc7libs\ship\atlmfc\src\mfc\dumpcont.cpp(23) : atlTraceGeneral – a CMainFrame object at $000001F472E4FD10, 1496 bytes long
    e:\mfcedgedemo\mfcedgedemodoc.cpp(23) : {263} client block at 0x000001F472E4DEA0, subtype c0, 384 bytes long.
    d:\agent\_work\2\s\src\vctools\vc7libs\ship\atlmfc\src\mfc\dumpcont.cpp(23) : atlTraceGeneral – a CMfcEdgeDemoDoc object at $000001F472E4DEA0, 384 bytes long

    Why I got that ML ? I have missed to install something ? I ran all of these on Win10 64bit/Edge v.86/VS2017

    Thank you.

  2. I could give more details: the method where the programs stop is:

    CWebBrowser::InitializeWebView()

    at line

    HRESULT hr = CreateCoreWebView2EnvironmentWithOptions

    and the call from inside method is:

    CWebBrowser::OnCreateEnvironmentCompleted where result parameter is:

    HRESULT_FROM_WIN32 – ERROR_NOT_SUPPORTED (The request is not supported.)

    What is not suported ?

  3. Hi

    I am developing Webview2 using C++ on Windows 10/11 with the latest Webview2 SDK. In my SSO(okta), I enabled MFA using Windows hello which asks Windows login pin.

    SSO log-in page shows the Windows pin box if it is accessed through the MS Edge But Webview2 does not show the Windows pin box.

    Please point me how to show Windows pin box in WebView2.

    Regards,
    Andy

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.