02-05-2021



GMLReader.layoutEdgeGraphics(GraphView myView, List list, EdgeView edgeView) Assign edge graphics properties: protected void: GMLReader.layoutEdgeGraphicsLine(GraphView myView, List list, EdgeView edgeView) Assign bend points based on the contents of the list associated with a 'Line' key We make sure that there is both an x,y present. The EdgeView provides set-like operations on the edge-tuples as well as edge attribute lookup. When called, it also provides an EdgeDataView object which allows control of access to edge attributes (but does not provide set-like operations). WebView2 Runtime or any Microsoft Edge (Chromium) non-stable channel installed on supported OS (currently Windows 10, Windows 8.1, and Windows 7).

-->Natomas

When distributing your WebView2 app, ensure the backing web platform, the WebView2 Runtime, is present before the app starts. This article describes how you (the developer) install the WebView2 Runtime, and use the two distribution modes for your WebView2 app: Evergreen and Fixed Version.

Evergreen distribution mode

Note

The Evergreen distribution mode is recommended for most developers.

The Evergreen distribution mode ensures that your app is taking advantage of the latest features and security updates. It has the following characteristics.

  • The underlying web platform (WebView2 Runtime) updates automatically without additional effort from you.
  • All apps that use the Evergreen distribution mode use a shared copy of the Evergreen WebView2 Runtime, which saves disk space.

Understanding the WebView2 Runtime

The WebView2 Runtime is a redistributable runtime and serves as the backing web platform for WebView2 apps. The concept is similar to Visual C++ or the .NET Runtime for C++/.NET apps. The Runtime contains modified Microsoft Edge (Chromium) binaries that are fine-tuned and tested for apps. The Runtime does not appear as a user-visible browser upon installation. For example, a user does not have a browser desktop shortcut or start menu entry.

During development and testing, you may use either as the backing web platform.

  • The WebView2 Runtime
  • Any Insider (non-stable) Microsoft Edge (Chromium) browser channel

In production environments, you must ensure the Runtime is present on user devices before the app starts. The Microsoft Edge Stable channel is unavailable for WebView2 usage. The decision prevents apps from taking a dependency on the browser in production.

Do not take a dependency on the browser because:

  • Microsoft Edge (Chromium) is not guaranteed to be present on all user devices. For example, devices disconnected from Windows Update or not managed by Microsoft directly (a large portion of the Enterprise and EDU market) may not have the browser. Allowing you to distribute the WebView2 Runtime avoids taking a dependency on the browser as a pre-requisite for apps.
  • Browsers and apps have different use cases, and so taking a dependency on a browser may have unintended side-effects on your apps. For example, IT admins may version-control the browser for internal website compatibility. The WebView2 Runtime allows apps to stay evergreen while browser updates are being actively managed.
  • As opposed to the browser, the Runtime is developed and tested for app scenarios and in some cases may include bug fixes not yet available in the browser.

In the future, the Evergreen WebView2 Runtime plans to ship with future releases of Windows. Deploy the Runtime with your production app until the Runtime becomes more universally available.

Deploying the Evergreen WebView2 Runtime

Only one installation of the Evergreen WebView2 Runtime is needed for all Evergreen apps on the device. There are a number of tools available on the WebView2 Runtime download page. The following tools help you deploy the Evergreen Runtime.

  • WebView2 Runtime Bootstrapper is a tiny (approximately 2 MB) installer. WebView2 Runtime Bootstrapper downloads and installs the Evergreen Runtime from Microsoft servers that matches the user's device architecture.
  • Use a link to programmatically download the bootstrapper.
  • WebView2 Runtime Standalone Installer is a full installer that installs the Evergreen WebView2 Runtime in offline environments.

Currently, both the bootstrapper and standalone installer only support per-machine installs, which requires elevation. If an installer is run without elevation, the user is prompted to elevate permissions.

Use following workflows to ensure the Runtime is already installed before your app launches. You may adjust your workflow depending on your scenario. Sample code is available in the Samples repo.

Online-only deployment

If you have an online-only deployment scenario where users are assumed to have internet access, complete the following steps.

  1. During your app setup, ensure the Runtime is already installed. To verify, complete one of the following actions.
    • Inspect if the pv (REG_SZ) regkey exists and is not null or empty. Find pv (REG_SZ) at the following location.

      On 64-bit Windows

      On 32-bit Windows

    • Run GetAvailableCoreWebView2BrowserVersionString and ensure the versionInfo is NULL.

  2. If the Runtime is not installed, use the link to programmatically download the bootstrapper.
  3. Invoke the bootstrapper from an elevated process or command prompt with MicrosoftEdgeWebview2Setup.exe /silent /install for silent install.

The previous workflow has the following benefits.

  • Install the Runtime only when needed or when you are not required to package installers.
  • The bootstrapper automatically detects device architecture and installs the matching Runtime.
  • Install the Runtime silently.

You may also choose to package the bootstrapper with your app instead of programmatically downloading it on demand.

Offline deployment

If you have an offline deployment scenario where app deployment has to work entirely offline, complete the following steps.

  1. Download the standalone installer.

  2. Include the installer in your app installer or updater.

  3. During your app setup, ensure the Runtime is already installed. To verify, complete one of the following actions.

    • Inspect if the pv (REG_SZ) regkey exists and is not null or empty. Find pv (REG_SZ) at the following location.

      On 64-bit Windows

      On 32-bit Windows

    • Run GetAvailableCoreWebView2BrowserVersionString and ensure the versionInfo is NULL.

  4. If the Runtime is not installed, run the standalone installer. If you want to run a silent installation, either run the installer from an elevated process or copy and run the following command.

Stay compatible in Evergreen mode

The Web is constantly evolving. The Evergreen WebView2 Runtime is kept up to date to provide you with the latest features and security fixes. To ensure your app stays compatible with the web, you should set up testing infrastructure.

Edgecombe

Non-stable Microsoft Edge channels (Beta/Dev/Canary) provide a sneak peek into what is coming next into WebView2 Runtime. Just like developing websites for Microsoft Edge, you should test your WebView2 app regularly. Test your WebView2 app against one of the non-stable channels, and update your app or report issues if issues arise. Typically Dev and Beta are the recommended channels. To help you decide which channel is right, navigate to Overview of the Microsoft Edge channels. You may download the non-stable Microsoft Edge channel on your test environment, and use regkey or environment variables to indicate the channel preference for your testing app. For more information, navigate to CreateCoreWebView2EnvironmentWithOptions. You may also use WebDriver to automate WebView2 testing.

Fixed Version distribution mode

For constrained environments with strict compatibility requirements, consider using the Fixed Version distribution mode. Choose and package a specific version of the WebView2 Runtime using the Fixed Version distribution mode. You may specify the timing of Runtime updates for your app. The Fixed Version distribution mode does not receive any automatic updates. Plan to update your app and the Runtime.

EdgeView

Note

The Fixed Version distribution mode was previously called bring-your-own.

To use the Fixed Version mode, complete the following actions

  1. Download the Fixed Version package.
  2. Decompress the package using command line expand {path to the package} -F:* {path to the destination folder} or with tools such as WinRAR. Avoid decompressing through the File Explorer as it may not generate the correct folder structure.
  3. Include the decompressed Fixed Version binaries in your project.
  4. Indicate the path to the Fixed Version binaries when creating the WebView2 environment.
    • For Win32 C/C++, you may create the environment using the CreateCoreWebView2EnvironmentWithOptions function. Use the browserExecutableFolder parameter to indicate the path to the folder containing msedgewebview2.exe.

    • For .NET, you may do either of the following options to specify the environment.

      Note

      You must specify the environment before the WebView2 Source property takes effect.

      • Set the CreationProperties (WPF/WinForms) property on the WebView2 element. Use the BrowserExecutableFolder member in the CoreWebView2CreationProperties (WPF/WinForms) class to indicate the path to the Fixed Version binaries.
      • Use EnsureCoreWebView2Async (WPF/WinForms) to specify the environment. Use the browserExecutableFolder parameter in CoreWebView2Environment.CreateAsync to indicate the path to the Fixed Version binaries.
  5. Package and ship the Fixed Version binaries with your app. Update the binaries as appropriate.

Known issues for Fixed Version

Compared to the Evergreen Runtime, Fixed Version does not have an installation process, which causes Microsoft PlayReady to not work without modification. You may mitigate the problem by completing the following actions.

  1. Locate the path where you deploy the Fixed Version package on the user's device, such as the following location.

  2. Run the following commands on the user's device.

  3. PlayReady should be working now on the user's device. In the Security tab of the Fixed Version folder, it should include permissions for ALL APPLICATION PACKAGES and ALL RESTRICTED APPLICATION PACKAGES.

-->

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.

EdgeView
  • 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.

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.

  • 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.

2020 Edgeview Way Knoxville Tn

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.

2715 Edgeview Ct

Next steps

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

See also

Zillow 2240 Edgeview

  • 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.

20 Edgeview Crescent Kilworth Ontario

Getting in touch with the Microsoft Edge WebView team

2020 Edgeview Way Knoxville

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.