Skip to content

How To Install WebView2 Runtime With Msix Flutter

Yehuda Kremer edited this page Nov 18, 2021 · 1 revision

See: MSIX support for WebView2 is lacking at the moment

In the meantime, you can install it at runtime as describe in your link, first check if WebView2 Runtime is already install, if not, install it (silently).

  1. install dependencies:
dependencies:
  ffi: ^1.1.2
  win32: ^2.3.0
  1. download the WebView2 Runtime installer (click on "Get the Link") and save it in your project assets folder (lets say in "myAssets/MicrosoftEdgeWebview2Setup.exe")
  2. update the msix configuration field assets_directory_path for example:
msix_config:
  assets_directory_path: 'C:\Users\me\Desktop\flutter_again\myAssets'
  1. in your project, create a file webview_install.dart with the code:
import 'dart:ffi';
import 'dart:io';
import 'package:ffi/ffi.dart';
import 'package:win32/win32.dart';

bool isWebView2RuntimeIsInstalled() {
  var webView2RuntimeRegKey =
      r'SOFTWARE\Microsoft\EdgeUpdate\Clients\{F3017226-FE2A-4295-8BDF-00C3A9A7E4C5}'
          .toNativeUtf16();
  var webView2RuntimeReg64Key =
      r'SOFTWARE\WOW6432Node\Microsoft\EdgeUpdate\Clients\{F3017226-FE2A-4295-8BDF-00C3A9A7E4C5}'
          .toNativeUtf16();
  final phKey = calloc<HANDLE>();

  var isInstalled = RegOpenKeyEx(HKEY_LOCAL_MACHINE, webView2RuntimeRegKey, 0, KEY_READ, phKey) ==
          ERROR_SUCCESS ||
      RegOpenKeyEx(HKEY_LOCAL_MACHINE, webView2RuntimeReg64Key, 0, KEY_READ, phKey) ==
          ERROR_SUCCESS;

  free(phKey);
  free(webView2RuntimeRegKey);
  free(webView2RuntimeReg64Key);

  return isInstalled;
}

Future installWebView2() async {
  await Process.run('myAssets/MicrosoftEdgeWebview2Setup.exe', ['/silent', '/install']); // remove '/silent' for interactable installation
}
  1. in your code (at the very start), execute the code (and show some loading icon until its finish to install):
import 'webview_install.dart';

if (!isWebView2RuntimeIsInstalled()) {
     await installWebView2();
 }

btw, its recommended to add needed WebView capabilities in your msix configuration, for example:

msix_config:
  assets_directory_path: 'C:\Users\me\Desktop\flutter_again\myAssets'
  capabilities: 'internetClient, internetClientServer, privateNetworkClientServer, enterpriseAuthentication, sharedUserCertificates, enterpriseCloudSSO, location, microphone, webcam'

Source: #64

Clone this wiki locally