Have flutter.js load local canvaskit instead of the CDN when appropriate (#150806)

If the user specifies the `--no-web-resources-cdn` or `--local-web-sdk`, we should use the local version of CanvasKit. `flutter.js` now has a flag that can be specified in the build configuration that tells it to load locally instead.

Also, added a link to the relevant docs in the web template warnings.

This addresses flutter/flutter#148713
Also fixes flutter/flutter#145559

Author: eyebrowsoffire

packages/flutter_tools/lib/src/build_info.dart

@@ -46,6 +46,7 @@ class BuildInfo {
     this.initializeFromDill,
     this.assumeInitializeFromDillUpToDate = false,
     this.buildNativeAssets = true,
+    this.useLocalCanvasKit = false,
   }) : extraFrontEndOptions = extraFrontEndOptions ?? const <String>[],
        extraGenSnapshotOptions = extraGenSnapshotOptions ?? const <String>[],
        fileSystemRoots = fileSystemRoots ?? const <String>[],
@@ -180,6 +181,9 @@ class BuildInfo {
   /// If set, builds native assets with `build.dart` from all packages.
   final bool buildNativeAssets;
 
+  /// If set, web builds will use the locally built CanvasKit instead of using the CDN
+  final bool useLocalCanvasKit;
+
   static const BuildInfo debug = BuildInfo(BuildMode.debug, null, trackWidgetCreation: true, treeShakeIcons: false);
   static const BuildInfo profile = BuildInfo(BuildMode.profile, null, treeShakeIcons: kIconTreeShakerEnabledDefault);
   static const BuildInfo jitRelease = BuildInfo(BuildMode.jitRelease, null, treeShakeIcons: kIconTreeShakerEnabledDefault);
@@ -260,6 +264,8 @@ class BuildInfo {
         kBuildName: buildName!,
       if (buildNumber != null)
         kBuildNumber: buildNumber!,
+      if (useLocalCanvasKit)
+        kUseLocalCanvasKitFlag: useLocalCanvasKit.toString(),
     };
   }
 
@@ -941,6 +947,9 @@ const String kCodesignIdentity = 'CodesignIdentity';
 /// only the glyphs used by the application.
 const String kIconTreeShakerFlag = 'TreeShakeIcons';
 
+/// Controls whether a web build should use local canvaskit or the CDN
+const String kUseLocalCanvasKitFlag = 'UseLocalCanvasKit';
+
 /// The input key for an SkSL bundle path.
 const String kBundleSkSLPath = 'BundleSkSLPath';
 

packages/flutter_tools/lib/src/build_system/targets/web.dart

@@ -104,6 +104,19 @@ abstract class Dart2WebTarget extends Target {
   Iterable<File> buildFiles(Environment environment);
   Iterable<String> get buildPatternStems;
 
+  List<String> computeDartDefines(Environment environment) {
+    final List<String> dartDefines = compilerConfig.renderer.updateDartDefines(
+      decodeDartDefines(environment.defines, kDartDefines),
+    );
+    if (environment.defines[kUseLocalCanvasKitFlag] != 'true') {
+      final bool canvasKitUrlAlreadySet = dartDefines.any((String define) => define.startsWith('FLUTTER_WEB_CANVASKIT_URL='));
+      if (!canvasKitUrlAlreadySet) {
+        dartDefines.add('FLUTTER_WEB_CANVASKIT_URL=https://www.gstatic.com/flutter-canvaskit/${globals.flutterVersion.engineRevision}/');
+      }
+    }
+    return dartDefines;
+  }
+
   @override
   List<Target> get dependencies => const <Target>[
     WebEntrypointTarget(),
@@ -155,9 +168,6 @@ class Dart2JSTarget extends Dart2WebTarget {
     final BuildMode buildMode = BuildMode.fromCliName(buildModeEnvironment);
     final Artifacts artifacts = environment.artifacts;
     final String platformBinariesPath = artifacts.getHostArtifact(HostArtifact.webPlatformKernelFolder).path;
-    final List<String> dartDefines = compilerConfig.renderer.updateDartDefines(
-      decodeDartDefines(environment.defines, kDartDefines),
-    );
     final List<String> sharedCommandOptions = <String>[
       artifacts.getArtifactPath(Artifact.engineDartBinary, platform: TargetPlatform.web_javascript),
       '--disable-dart-dev',
@@ -169,7 +179,7 @@ class Dart2JSTarget extends Dart2WebTarget {
         '-Ddart.vm.profile=true'
       else
         '-Ddart.vm.product=true',
-      for (final String dartDefine in dartDefines)
+      for (final String dartDefine in computeDartDefines(environment))
         '-D$dartDefine',
     ];
 
@@ -287,9 +297,6 @@ class Dart2WasmTarget extends Dart2WebTarget {
     final File depFile = environment.buildDir.childFile('dart2wasm.d');
     final String platformBinariesPath = artifacts.getHostArtifact(HostArtifact.webPlatformKernelFolder).path;
     final String platformFilePath = environment.fileSystem.path.join(platformBinariesPath, 'dart2wasm_platform.dill');
-    final List<String> dartDefines = compilerConfig.renderer.updateDartDefines(
-      decodeDartDefines(environment.defines, kDartDefines),
-    );
 
     assert(buildMode == BuildMode.release || buildMode == BuildMode.profile);
     final List<String> compilationArgs = <String>[
@@ -309,7 +316,7 @@ class Dart2WasmTarget extends Dart2WebTarget {
       else
         '-Ddart.vm.product=true',
       ...decodeCommaSeparated(environment.defines, kExtraFrontEndOptions),
-      for (final String dartDefine in dartDefines)
+      for (final String dartDefine in computeDartDefines(environment))
         '-D$dartDefine',
       '--extra-compiler-option=--depfile=${depFile.path}',
 
@@ -380,23 +387,9 @@ class WebReleaseBundle extends Target {
 
   WebReleaseBundle._({
     required this.compileTargets,
-  }) : templatedFilesTarget = WebTemplatedFiles(generateBuildConfigString(compileTargets));
-
-  static String generateBuildConfigString(List<Dart2WebTarget> compileTargets) {
-    final List<Map<String, Object?>> buildDescriptions = compileTargets.map(
-      (Dart2WebTarget target) => target.buildConfig
-    ).toList();
-    final Map<String, Object?> buildConfig = <String, Object?>{
-      'engineRevision': globals.flutterVersion.engineRevision,
-      'builds': buildDescriptions,
-    };
-    return '''
-if (!window._flutter) {
-  window._flutter = {};
-}
-_flutter.buildConfig = ${jsonEncode(buildConfig)};
-''';
-  }
+  }) : templatedFilesTarget = WebTemplatedFiles(
+    compileTargets.map((Dart2WebTarget target) => target.buildConfig).toList()
+  );
 
   final List<Dart2WebTarget> compileTargets;
   final WebTemplatedFiles templatedFilesTarget;
@@ -516,12 +509,12 @@ _flutter.buildConfig = ${jsonEncode(buildConfig)};
 }
 
 class WebTemplatedFiles extends Target {
-  WebTemplatedFiles(this.buildConfigString);
+  WebTemplatedFiles(this.buildDescriptions);
 
-  final String buildConfigString;
+  final List<Map<String, Object?>> buildDescriptions;
 
   @override
-  String get buildKey => buildConfigString;
+  String get buildKey => jsonEncode(buildDescriptions);
 
   void _emitWebTemplateWarning(
     Environment environment,
@@ -533,6 +526,21 @@ class WebTemplatedFiles extends Target {
     );
   }
 
+  String buildConfigString(Environment environment) {
+    final Map<String, Object> buildConfig = <String, Object>{
+      'engineRevision': globals.flutterVersion.engineRevision,
+      'builds': buildDescriptions,
+      if (environment.defines[kUseLocalCanvasKitFlag] == 'true')
+        'useLocalCanvasKit': true,
+    };
+    return '''
+if (!window._flutter) {
+  window._flutter = {};
+}
+_flutter.buildConfig = ${jsonEncode(buildConfig)};
+''';
+  }
+
   @override
   Future<void> build(Environment environment) async {
     final Directory webResources = environment.projectDir
@@ -555,6 +563,8 @@ class WebTemplatedFiles extends Target {
       'flutter.js',
     ));
 
+    final String buildConfig = buildConfigString(environment);
+
     // Insert a random hash into the requests for service_worker.js. This is not a content hash,
     // because it would need to be the hash for the entire bundle and not just the resource
     // in question.
@@ -563,7 +573,7 @@ class WebTemplatedFiles extends Target {
       baseHref: '',
       serviceWorkerVersion: serviceWorkerVersion,
       flutterJsFile: flutterJsFile,
-      buildConfig: buildConfigString,
+      buildConfig: buildConfig,
     );
 
     final File outputFlutterBootstrapJs = fileSystem.file(fileSystem.path.join(
@@ -585,7 +595,7 @@ class WebTemplatedFiles extends Target {
           baseHref: environment.defines[kBaseHref] ?? '/',
           serviceWorkerVersion: serviceWorkerVersion,
           flutterJsFile: flutterJsFile,
-          buildConfig: buildConfigString,
+          buildConfig: buildConfig,
           flutterBootstrapJs: bootstrapTemplate.content,
         );
         final File outputIndexHtml = fileSystem.file(fileSystem.path.join(

packages/flutter_tools/lib/src/commands/run.dart

@@ -235,6 +235,19 @@ abstract class RunCommandBase extends FlutterCommand with DeviceBasedDevelopment
 
   bool get useWasm => boolArg(FlutterOptions.kWebWasmFlag);
 
+  bool get useLocalCanvasKit {
+    // If we have specified not to use CDN, use local CanvasKit
+    if (!boolArg(FlutterOptions.kWebResourcesCdnFlag)) {
+      return true;
+    }
+
+    // If we are using a locally built web sdk, we should use local CanvasKit
+    if (stringArg(FlutterGlobalOptions.kLocalWebSDKOption, global: true) != null) {
+      return true;
+    }
+    return false;
+  }
+
   WebRendererMode get webRenderer => WebRendererMode.fromCliOption(
     stringArg(FlutterOptions.kWebRendererFlag),
     useWasm: useWasm
@@ -274,6 +287,7 @@ abstract class RunCommandBase extends FlutterCommand with DeviceBasedDevelopment
         webHeaders: webHeaders,
         webRenderer: webRenderer,
         webUseWasm: useWasm,
+        webUseLocalCanvaskit: useLocalCanvasKit,
         enableImpeller: enableImpeller,
         enableVulkanValidation: enableVulkanValidation,
         uninstallFirst: uninstallFirst,
@@ -325,6 +339,7 @@ abstract class RunCommandBase extends FlutterCommand with DeviceBasedDevelopment
         webHeaders: webHeaders,
         webRenderer: webRenderer,
         webUseWasm: useWasm,
+        webUseLocalCanvaskit: useLocalCanvasKit,
         vmserviceOutFile: stringArg('vmservice-out-file'),
         fastStart: argParser.options.containsKey('fast-start')
           && boolArg('fast-start')

packages/flutter_tools/lib/src/commands/test.dart

@@ -412,6 +412,7 @@ class TestCommand extends FlutterCommand with DeviceBasedDevelopmentArtifacts {
       debugLogsDirectoryPath: debugLogsDirectoryPath,
       webRenderer: webRenderer,
       webUseWasm: useWasm,
+      webUseLocalCanvaskit: true,
     );
 
     String? testAssetDirectory;

packages/flutter_tools/lib/src/device.dart

@@ -994,6 +994,7 @@ class DebuggingOptions {
     this.webLaunchUrl,
     WebRendererMode? webRenderer,
     this.webUseWasm = false,
+    this.webUseLocalCanvaskit = false,
     this.vmserviceOutFile,
     this.fastStart = false,
     this.nullAssertions = false,
@@ -1026,6 +1027,7 @@ class DebuggingOptions {
       this.webHeaders = const <String, String>{},
       WebRendererMode? webRenderer,
       this.webUseWasm = false,
+      this.webUseLocalCanvaskit = false,
       this.cacheSkSL = false,
       this.traceAllowlist,
       this.enableImpeller = ImpellerStatus.platformDefault,
@@ -1108,6 +1110,7 @@ class DebuggingOptions {
     required this.webLaunchUrl,
     required this.webRenderer,
     required this.webUseWasm,
+    required this.webUseLocalCanvaskit,
     required this.vmserviceOutFile,
     required this.fastStart,
     required this.nullAssertions,
@@ -1198,6 +1201,9 @@ class DebuggingOptions {
   /// Whether to compile to webassembly
   final bool webUseWasm;
 
+  /// If true, serve CanvasKit assets locally rather than using the CDN.
+  final bool webUseLocalCanvaskit;
+
   /// A file where the VM Service URL should be written after the application is started.
   final String? vmserviceOutFile;
   final bool fastStart;
@@ -1308,6 +1314,7 @@ class DebuggingOptions {
     'webHeaders': webHeaders,
     'webRenderer': webRenderer.name,
     'webUseWasm': webUseWasm,
+    'webUseLocalCanvaskit': webUseLocalCanvaskit,
     'vmserviceOutFile': vmserviceOutFile,
     'fastStart': fastStart,
     'nullAssertions': nullAssertions,
@@ -1365,6 +1372,7 @@ class DebuggingOptions {
       webLaunchUrl: json['webLaunchUrl'] as String?,
       webRenderer: WebRendererMode.values.byName(json['webRenderer']! as String),
       webUseWasm: json['webUseWasm']! as bool,
+      webUseLocalCanvaskit: json['webUseLocalCanvaskit']! as bool,
       vmserviceOutFile: json['vmserviceOutFile'] as String?,
       fastStart: json['fastStart']! as bool,
       nullAssertions: json['nullAssertions']! as bool,

packages/flutter_tools/lib/src/drive/web_driver_service.dart

@@ -79,7 +79,8 @@ class WebDriverService extends DriverService {
           port: debuggingOptions.port,
           hostname: debuggingOptions.hostname,
           webRenderer: debuggingOptions.webRenderer,
-          webUseWasm: debuggingOptions.webUseWasm
+          webUseWasm: debuggingOptions.webUseWasm,
+          webUseLocalCanvaskit: debuggingOptions.webUseLocalCanvaskit,
         )
         : DebuggingOptions.enabled(
           buildInfo,
@@ -88,6 +89,7 @@ class WebDriverService extends DriverService {
           disablePortPublication: debuggingOptions.disablePortPublication,
           webRenderer: debuggingOptions.webRenderer,
           webUseWasm: debuggingOptions.webUseWasm,
+          webUseLocalCanvaskit: debuggingOptions.webUseLocalCanvaskit,
         ),
       stayResident: true,
       flutterProject: FlutterProject.current(),

packages/flutter_tools/lib/src/isolated/devfs_web.dart

@@ -120,6 +120,7 @@ class WebAssetServer implements AssetReader {
     this._nullSafetyMode,
     this._ddcModuleSystem, {
     required this.webRenderer,
+    required this.useLocalCanvasKit,
   }) : basePath = _getWebTemplate('index.html', _kDefaultIndex).getBaseHref();
 
   // Fallback to "application/octet-stream" on null which
@@ -181,6 +182,7 @@ class WebAssetServer implements AssetReader {
     NullSafetyMode nullSafetyMode, {
     required WebRendererMode webRenderer,
     required bool isWasm,
+    required bool useLocalCanvasKit,
     bool testMode = false,
     DwdsLauncher dwdsLauncher = Dwds.start,
     // TODO(markzipan): Make sure this default value aligns with that in the debugger options.
@@ -233,6 +235,7 @@ class WebAssetServer implements AssetReader {
       nullSafetyMode,
       ddcModuleSystem,
       webRenderer: webRenderer,
+      useLocalCanvasKit: useLocalCanvasKit,
     );
     if (testMode) {
       return server;
@@ -530,6 +533,8 @@ class WebAssetServer implements AssetReader {
   /// Determines what rendering backed to use.
   final WebRendererMode webRenderer;
 
+  final bool useLocalCanvasKit;
+
   String get _buildConfigString {
     final Map<String, dynamic> buildConfig = <String, dynamic>{
       'engineRevision': globals.flutterVersion.engineRevision,
@@ -540,6 +545,7 @@ class WebAssetServer implements AssetReader {
           'mainJsPath': 'main.dart.js',
         },
       ],
+      if (useLocalCanvasKit) 'useLocalCanvasKit' : true,
     };
     return '''
 if (!window._flutter) {
@@ -740,6 +746,7 @@ class WebDevFS implements DevFS {
     required this.ddcModuleSystem,
     required this.webRenderer,
     required this.isWasm,
+    required this.useLocalCanvasKit,
     required this.rootDirectory,
     this.testMode = false,
   }) : _port = port;
@@ -767,6 +774,7 @@ class WebDevFS implements DevFS {
   final String? tlsCertKeyPath;
   final WebRendererMode webRenderer;
   final bool isWasm;
+  final bool useLocalCanvasKit;
 
   late WebAssetServer webAssetServer;
 
@@ -868,6 +876,7 @@ class WebDevFS implements DevFS {
       nullSafetyMode,
       webRenderer: webRenderer,
       isWasm: isWasm,
+      useLocalCanvasKit: useLocalCanvasKit,
       testMode: testMode,
       ddcModuleSystem: ddcModuleSystem,
     );

packages/flutter_tools/lib/src/isolated/resident_web_runner.dart

@@ -318,6 +318,7 @@ Please provide a valid TCP port (an integer between 0 and 65535, inclusive).
           ddcModuleSystem: debuggingOptions.buildInfo.ddcModuleFormat == DdcModuleFormat.ddc,
           webRenderer: debuggingOptions.webRenderer,
           isWasm: debuggingOptions.webUseWasm,
+          useLocalCanvasKit: debuggingOptions.webUseLocalCanvaskit,
           rootDirectory: fileSystem.directory(projectRootPath),
         );
         Uri url = await device!.devFS!.create();