Microsoft Webview2

  



In my post about the MECM 2103 upgrade I made a list of my top 5 new features of MECM version 2103. One of these new features is Improved user experience and security with Software Center custom tabs. You can now use the Microsoft Edge WebView2 browser control in MECM version 2103 and with this control more websites should work with custom tabs without displaying script errors or security warnings. We had a lot of script errors before when using custom tabs to websites, but now these errors should be gone. In this post I will show you how you can enable custom tabs with Microsoft Edge WebView2 runtime.

  • WebView2 Runtime doesn’t install Microsoft Edge (full browser) on the device and doesn’t require Microsoft Edge to be installed on the device.
  • When WebView2 Runtime is installed on the device, no change is made to the user’s default browser selection.
  • In order to display custom tabs with Microsoft Edge WebView2 runtime in Software Center you must run MECM version 2103.
  • If the client device isn’t running .NET Framework version 4.6.2 or later, it falls back to use the Internet Explorer browser control.

Microsoft Webview2 Wpf

Microsoft Edge WebView2 browser control

A new Windows component WebView2 is being quietly installed on Windows computers, mostly for Microsoft Office. Here’s what WebView2 is and that the acronym WVRT means. Most people won’t have noticed a new ‘optional’ feature added to their Windows 10 in the last week or so. Go to Settings Apps and Features then search for ‘webview’. The WebView2 team updates the WebView2 SDK on a six-week cadence. Review the following content for up-to-date information on product announcements. Now developers can access the latest Edge web tech in their apps. What you need to know Microsoft today officially launched Edge WebView2 into general availability. The launch allows developers to. Beginning with Office version 16.0.2 in the Office Insider builds, Office Add-ins running on Office 365 for Windows will use the new Chromium based Edge WebView2 as the runtime. The new Microsoft Edge WebView2 performs much better than Internet Explorer or EdgeHTML, is always up to date, and supports the latest in web browser standards. A place for developers to report feedback or search existing issues for Microsoft Edge WebView2 control. Open an issue to submit a feature request or bug report. To get the latest news, API proposals, and SDK Release announcements, please subscribe to the WebView2Announcements repo!

The Microsoft Edge WebView2 control enables you to embed web technologies (HTML, CSS, and JavaScript) in your native apps. The WebView2 control uses Microsoft Edge (Chromium) as the rendering engine to display the web content in native apps.
With WebView2, you may embed web code in different parts of your native app. Build all of the native app within a single WebView instance. So the Software Center application now will have an Edge Chromium rendering engine instead of the Internet Explorer 11 it has by default.

Enable custom tabs with Microsoft Edge WebView2 runtime

Open your MECM console and go to: AdministrationOverviewClient Settings. Right click on your client settings that you want to change and click properties.

In the left section select Software Center and select Customize on the right.

Select the Tab Tabs and check the selectionbox: Display custom tabs with Microsoft Edge WebView2 runtime

If not already installed, the Configuration Manager client installes the runtime on the device. If you select this option, you agree to the MS Edge WebView2 runtime license terms.

Click Add Tab. Enter the Tab name and the Content URL. Click OK.

Click OK and OK again.

Go to your collection or device right click select Client Notifications and select Download Computer policy to trigger the changes you just made.

Click OK.

Microsoft

Software Center

Lets see what happens in Software Center. Log in to a workstation and open Software Center. You will now see the added custom tab.

But more important we want to know If WebView2 runtime is installed by the client.
I noticed that the folder C:WindowsCCMClientUXMicrosoft.WebView2.FixedVersionRuntime.87.0.664.41.x86 was added om my client device.
So in order to be 100% sure I added a goolge custom tab and went to a detect my browser page: SUCCES!

When opening Task Manager you can also see that the Process msedgewebview2.exe is started in the user context.


Related

-->

In this article, get started creating your first WebView2 app and learn about the main features of WebView2. For more information about individual WebView2 APIs, navigate to API reference.

Prerequisites

Ensure you install the following list of pre-requisites before proceeding.

  • WebView2 Runtime or any Microsoft Edge (Chromium) non-stable channel installed on supported OS (currently Windows 10, Windows 8.1, and Windows 7).

    Note

    The WebView team recommends using the Canary channel and the minimum required version is 82.0.488.0.

  • Visual Studio 2015 or later with C++ support installed.

Step 1 - Create a single-window app

Start with a basic desktop project that contains a single main window.

Important

To better focus the walkthrough, use modified sample code from Walkthrough: Create a traditional Windows Desktop application (C++) for your sample app. To download the modified sample and get started, navigate to WebView2 Samples.

  1. In Visual Studio, open WebView2GettingStarted.sln.
    If you use an older version of Visual Studio, hover on the WebView2GettingStarted project, open the contextual menu (right-click), and choose Properties. Under Configuration Properties > General, modify Windows SDK Version and Platform Toolset to use the Win10 SDK and Visual Studio toolset available to you.

Visual Studio may display errors, because your project is missing the WebView2 header file. The errors should be fixed after Step 2.

Step 2 - Install WebView2 SDK

Add the WebView2 SDK into the project. Use NuGet to install the Win32 SDK.

  1. Hover on the project, open the contextual menu (right-click), and choose Manage NuGet Packages.

  2. Install the Windows Implementation Library.

    1. In the search bar, type Microsoft.Windows.ImplementationLibrary > choose Microsoft.Windows.ImplementationLibrary.

    2. In the right-hand side window, choose Install. NuGet downloads the library to your machine.

      Note

      The Windows Implementation Library and Windows Runtime C++ Template Library are optional and make working with COM easier for the example.

  3. Install the WebView2 SDK.

    1. In the search bar, type Microsoft.Web.WebView2 > choose Microsoft.Web.WebView2.

    2. In the right-hand side window, choose Install. NuGet downloads the SDK to your machine.

  4. Add WebView2 header to your project.

    In the HelloWebView.cpp file, copy the following code snippet and paste it after the last #include line.

    The include section should look similar to the following code snippet.

Ready to use and build against the WebView2 API.

Build your empty sample app

To build and run the sample app, select F5. Your app displays an empty window.

Step 3 - Create a single WebView within the parent window

Add a WebView to the main window.

Use the CreateCoreWebView2Environment method to set up the environment and locate the Microsoft Edge (Chromium) browser powering the control. You may also use the CreateCoreWebView2EnvironmentWithOptions method if you want to specify browser location, user folder, browser flags, and so on, instead of using the default setting. Upon the completion of the CreateCoreWebView2Environment method, run the ICoreWebView2Environment::CreateCoreWebView2Controller method inside the ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler callback and run the ICoreWebView2Controller::get_CoreWebView2 method to get the associated WebView.

In the callback, set a few more settings, resize the WebView to take 100% of the parent window, and navigate to Bing.

Copy the following code snippet and paste into HelloWebView.cpp after the // <-- WebView2 sample code starts here --> comment and before the // <-- WebView2 sample code ends here --> comment.

Build your Bing sample app

To build and run the app, select F5. Now you have a WebView window displaying the Bing page.

Step 4 - Navigation events

The WebView team already covered navigating to URL using the ICoreWebView2::Navigate method in the last step. During navigation, WebView fires a sequence of events to which the host may listen.

  1. NavigationStarting
  2. SourceChanged
  3. ContentLoading
  4. HistoryChanged
  5. NavigationCompleted

For more information, navigate to Navigation events.

In error cases, one or more of the following events may occur depending on whether the navigation is continued to an error webpage.

  • SourceChanged
  • ContentLoading
  • HistoryChanged

Note

If an HTTP redirect occurs, there are multiple NavigationStarting events in a row.

As an example of using the events, register a handler for the NavigationStarting event to cancel any non-https requests. Copy the following code snippet and paste into HelloWebView.cpp.

Now the app does not navigate to any non-https sites. You may use similar mechanism to accomplish other tasks, such as restricting navigation to within your own domain.

Microsoft Edge Webview 2

Step 5 - Scripting

You may use host apps to inject JavaScript code into WebView2 controls at runtime. You may task WebView to run arbitrary JavaScript or add initialization scripts. The injected JavaScript applies to all new top-level documents and any child frames until the JavaScript is removed. The injected JavaScript is run with specific timing.

Microsoft Webview2 Runtime

  • Run it after the creation of the global object.
  • Run it before any other script included in the HTML document is run.

Copy the following code snippet and paste into HelloWebView.cpp.

Now, WebView should always freeze the Object object and returns the page document once.

Note

The script injection APIs (and some other WebView2 APIs) are asynchronous, you should use callbacks if code is must be run in a specific order.

Step 6 - Communication between host and web content

The host and the web content may also communicate with each other through the postMessage method. The web content running within a WebView may post to the host through the window.chrome.webview.postMessage method, and the message is handled by any registered the ICoreWebView2WebMessageReceivedEventHandler event handler on the host. Likewise, the host may message the web content through ICoreWebView2::PostWebMessageAsString or ICoreWebView2::PostWebMessageAsJSON method, which is caught by handlers added from window.chrome.webview.addEventListener listener. The communication mechanism allows the web content to use native capabilities by passing messages to ask the host to run native APIs.

As an example to understand the mechanism, the following steps occur when you try to output the document URL in WebView.

  1. The host registers a handler to return received message back to the web content
  2. The host injects a script to the web content that registers a handler to print message from the host
  3. The host injects a script to the web content that posts the URL to the host
  4. The handler of the host is triggered and returns the message (the URL) to the web content
  5. The handler of the web content is triggered and prints message from the host (the URL)

Copy the following code snippet and paste into HelloWebView.cpp.

Build your display URL sample app

To build and run the app, select F5. The URL appears in a pop-up window before navigating to a webpage.

Congratulations, you built your first WebView2 app.

Microsoft Webview2 C#

Next steps

Many of the WebView2 functionalities are not covered on this article, the following section provides more resources.

See also

  • For a comprehensive example of WebView2 capabilities, navigate to WebView2 API Sample.
  • For a sample app built using WebView2, navigate to WebView2Browser.
  • For detailed information about the WebView2 API, navigate to API reference.

Getting in touch with the Microsoft Edge WebView team

Share your feedback to help build richer WebView2 experiences. To submit feature requests or bugs, or search for known issues, navigate to the Microsoft Edge WebView feedback repo.