WebView4Delphi

Description

WebView4Delphi is an open source project created by Salvador Díaz Fau to embed Chromium-based browsers in applications made with Delphi or Lazarus/FPC for Windows.

Introduction

WebView4Delphi uses the Microsoft Edge WebView2 Runtime and the Microsoft.Web.WebView2 NuGet package to embed a web browser into VCL, FMX and LCL applications.

WebView4Delphi loads the WebView2Loader.dll library found inside the NuGet package and implements all the interfaces described in the WebView2 documentation.

The latest WebView4Delphi version uses the Microsoft.Web.WebView2 NuGet package version 1.0.2478.35. You can download it yourself to extract the WebView2Loader.dll library or use the copy available in the bin32 and bin64 directories of the repository.

This diagram describes how WebView4Delphi works :

WebView4Delphi diagram

Links

WebView4Delphi project :

Microsoft Edge WebView2 Runtime :

Microsoft.Web.WebView2 NuGet package :

Chromium project :

Compatibility

Microsoft Edge WebView2 Runtime creates a Chromium-based web browser that requires Windows 10, 11 or newer to work.

Microsoft has plans to support MacOS and Linux in the future but for now WebView2 only works on Windows.

If you need to embed a web browser in MacOS, Linux and Windows consider using CEF4Delphi instead.

About the WebView2 Runtime

The WebView2 Runtime can be installed on each computer where the embedded browser is running. This is called the evergreen version and it's updated automatically by Windows Update.

Alternatively, you can deploy a fixed version of the WebView2 Runtime and update it manually every time your application is updated.

The evergreen version allows you to have a small installer for your application and Windows will keep the WebView2 Runtime updated with the latest security patches.

The embedded web browser will also be updated automatically and that means that your application should be tested regularly to prevent issues caused by deprecated browser features, internal browser issues, etc.

You also have to remember that not all computers are updated at the same time. Some corporate users may receive some Windows updates very late and your application will have to be ready to run perfectly with several browser versions.

To avoid all these problems you can also use the fixed version of the WebView2 Runtime but then you will have to update it manually to patch the security issues in the browser and the installer will be larger.

The evergreen version of Microsoft Edge WebView2 Runtime is already included in Windows 11 and all the demos are configured to use the evergreen version.

Installation

To build and install WebView4Delphi in Delphi XE2, XE3, XE4, XE6, XE7, XE8, 10, 11, or 12 you need to follow these steps :

  1. Download the latest version of WebView4Delphi from GitHub.
  2. Decompress WebView4Delphi into a directory and make sure your user has write privileges in that directory.
  3. Run Delphi.
  4. Open the file packages\WebView4Delphi_group.groupproj.
  5. If you want to install the FMX and VCL components then select the Projects→Build all projects menu option. If this option fails build WebView4DelphiVCLRTL.bpl, WebView4DelphiFMXRTL.bpl, WebView4DelphiVCL_designtime.bpl and WebView4DelphiFMX_designtime.bpl individually (in that order). When the build process ends select the Install context menu option in WebView4DelphiVCL_designtime.bpl and WebView4DelphiFMX_designtime.bpl.
  6. If you just want to install the VCL components then build WebView4DelphiVCLRTL.bpl and install WebView4DelphiVCL_designtime.bpl.

To compile and install WebView4Delphi in Delphi 6, 7, 8, 2005, 2006, 2007, 2009, 2010 or XE you need to follow these steps :

  1. Download the latest version of WebView4Delphi from GitHub.
  2. Decompress WebView4Delphi into a directory and make sure your user has write privileges in that directory.
  3. Run Delphi.
  4. Open the file WebView4Delphi.dpk from Delphi which has VCL components.
  5. Click on the Compile button.
  6. Click on the Install button.

To compile and install WebView4Delphi in Lazarus you need to follow these steps :

  1. Download the latest version of WebView4Delphi from GitHub.
  2. Decompress WebView4Delphi into a directory and make sure your user has write privileges in that directory.
  3. Run Lazarus.
  4. Open the file packages\webview4delphi.lpk from the Package→Open Package File (*.lpk)... menu.
  5. Click on the Compile button in the package window.
  6. Click on the Use button and select the Install option.
  7. Press the Yes button when Lazarus asks if you want to rebuild Lazarus.
  8. Lazarus will install WebView4Delphi and restart in a few seconds.

First steps

It's highly recommended to read the Microsoft Edge WebView2 Runtime documentation before you start using WebView4Delphi.

After installing the WebView2 Runtime and the WebView4Delphi package you can build the SimpleBrowser demo.

Notice that the main unit has an initialization section where GlobalWebView2Loader is created and configured. The last step in that section is the GlobalWebView2Loader.StartWebView2 call that will load the WebView2Loader.dll library and create the global browser environment asynchronously.

You don't have to worry about the GlobalWebView2Loader destruction because WebView4Delphi will do that for you in one of its finalization sections.

The global browser environment created by GlobalWebView2Loader will be used by all the browsers created by the application.

It's not possible to predict which one will be created first: the environment or the main form.

SimpleBrowser tries to create the browser in the Tform.OnShow event but it uses a timer in case the global environment needs a little more time to be created.

WebView4Delphi uses two components to create a browser. In case of VCL or LCL applications it uses TWVBrowser and TWVWindowParent. In case of FMX applications it uses TWVFMXBrowser and TWVFMXWindowParent.

TWVWindowParent and TWVFMXWindowParent are just a control used by WebView2 to show the browser contents.

The most important components are TWVBrowser and TWVFMXBrowser because they encapsulate most of the WebView2 methods, properties and events.

The WindowParent components and the Browser components are linked and you need to set their Browser property. TWVWindowParent.Browser has to be set to the TWVBrowser instance, and TWVFMXWindowParent.Browser needs to be set to the TWVFMXBrowser instance.

The browser is created asynchronously with the TWVBrowser.CreateBrowser or TWVFMXBrowser.CreateBrowser calls. The TWVBrowser.OnAfterCreated event will be triggered when it's fully initialized and then you can start calling its methods.

SimpleBrowser will start loading the URL that was set in the TWVBrowser.DefaultURL property right before the OnAfterCreated event is triggered.

If you examine other demos or you start using TWVBrowser events you'll notice that TWVBrowser exposes as events all the Invoke callbacks declared in the WebView2 delegates.

All those events have almost the same parameter types as the Invoke callbacks and most of them have an aArgs parameter. If you need to use that interface you can use the corresponding wrapper found in the uWVCoreWebView2Args unit.

For example, the TWVBrowser.OnDownloadStarting event has a aArgs parameter with a ICoreWebView2DownloadStartingEventArgs type.

As you can see in the MiniBrowser demo, all we need to use it is to wrap it with a TCoreWebView2DownloadStartingEventArgs class like this :

TempArgs := TCoreWebView2DownloadStartingEventArgs.Create(aArgs);

All the WebView2 interfaces have a wrapper with the same name but replacing the initial I with a T.

You'll also notice that most of the string typed parameters have been replaced by a new wvstring type because WebView2 uses WideStrings internally.

Delphi users can assign strings to wvstring variables directly but Lazarus users have to use UTF8Decode and UTF8Encode to convert them.

About the name

WebView4Delphi is just a numeronym and it should be interpreted as WebView for Delphi. It doesn't mean that it's based in WebView4.

More information in other languages

How to help

If you wish to help in this project you can make a donation by clicking this button :

You can also use Patreon to help this project :

Patreon

Or sponsor this project on GitHub :

Or sponsor this project on Liberapay :

Donate using Liberapay

You can also help by telling your friends about this project, sharing the messages of this project on the social networks, writing articles about this project on your website, making suggestions, reporting issues, etc.

If you shop online you can also help by using these links for your purchases :

Disclosure Statement: This site and BriskBard contains affiliate links, which means that I may receive a commission if you make a purchase using these links. As an eBay Partner, I earn from qualifying purchases.




This article was updated on April 23rd, 2024.

Cookie usage

By browsing our site you agree to our use of cookies. You will only see this message once.
Find out more
Ok