[web] support bundling CanvasKit instead of CDN

[kubaprzetakiewicz]

Use case

CanvasKit is currently being downloaded from the CDN resource, which can cause problems with very strict content security policies.

Since https://unpkg.com links used by Flutter point to the specific versions of CanvasKit WASM, whitelisting them manually to keep up-to-date is unfeasible (wildcarding is not always possible).

Proposal

Bundle it with the app - this was already mentioned regarding CanvasKit in similar issues, e.g. #53639 (comment)

[sidrao2006]

This will be useful but it should definitely be made optional, since it will increase the (already big) app size even more

[jonahwilliams]

@sidrao2006 the binary will be the same size whether you download from a CDN or your own server

[yjbanov]

We should support building an app with a bundled version of CanvasKit. However, you can achieve it today with some manual effort. Simply pass --dart-define=FLUTTER_WEB_CANVASKIT_URL=... and host your own copy of CanvasKit at the URL specified in the --dart-define.

[peerwaya]

@yjbanov will. I be able to specify for example --dart-define= FLUTTER_WEB_CANVASKIT_URL=mycanvaskit.wasm where mycanvaskit is adjacent to index.html in the same folder. My use case is to run flutter in electron

[kubaprzetakiewicz]

We should support building an app with a bundled version of CanvasKit. However, you can achieve it today with some manual effort. Simply pass --dart-define=FLUTTER_WEB_CANVASKIT_URL=... and host your own copy of CanvasKit at the URL specified in the --dart-define.

Unfortunately, that doesn't seem to have any effect.

For example:
➜ flutter run -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=true --dart-define=FLUTTER_WEB_CANVASKIT_URL=https://unpkg.com/canvaskit-wasm@0.20.0/bin/canvaskit.js

above command still loads the default 0.19.0 from unpkg.

I also cannot find any reference to this specific Dart define in code.

[yjbanov]

Unfortunately, that doesn't seem to have any effect.

For example:
➜ flutter run -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=true --dart-define=FLUTTER_WEB_CANVASKIT_URL=https://unpkg.com/canvaskit-wasm@0.20.0/bin/canvaskit.js

above command still loads the default 0.19.0 from unpkg.

The value should be https://unpkg.com/canvaskit-wasm@0.20.0/bin/ (i.e. no canvaskit.js at the end). Your command-line should have crashed the app. I'm surprised that it still worked 🤔

[yjbanov]

Added this to the PWA project because this is required in order to support fully offline apps out-of-the-box.

[evenremy]

We should support building an app with a bundled version of CanvasKit. However, you can achieve it today with some manual effort. Simply pass --dart-define=FLUTTER_WEB_CANVASKIT_URL=... and host your own copy of CanvasKit at the URL specified in the --dart-define.

Unfortunately, that doesn't seem to have any effect.

For example:
➜ flutter run -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=true --dart-define=FLUTTER_WEB_CANVASKIT_URL=https://unpkg.com/canvaskit-wasm@0.20.0/bin/canvaskit.js

above command still loads the default 0.19.0 from unpkg.

I also cannot find any reference to this specific Dart define in code.

Same problem for me.

[jonahwilliams]

this setting will only work in release/profile mode. in debug mode the engine is prebuilt so the string cannot be changed.

[philippecade]

Similar issue loading fonts at #77580

[Wissperwind]

While we are in the workaround state:
Does someone knows a way to find out programatically, which version of canvas kit do bundle?
So how does my script know if it should bundle vserion 28 or 29 in future?

[philippecade]

@Wissperwind: we take the version directly from the main.dart.js file and download this one locally. So the version can change and we will always use the correct one.

We have this code in our pipeline:

#!/bin/sh
# Downloads WASM locally and use local fonts
# Temporary solution until https://github.com/flutter/flutter/issues/70101 and 77580 provide a better way
flutter build web
wasmLocation=$(grep canvaskit-wasm build/web/main.dart.js | sed -e 's/.*https/https/' -e 's/\\/bin.*/\\/bin/' | uniq)
echo "Downloading WASM from $wasmLocation"
curl -o build/web/canvaskit.js "$wasmLocation/canvaskit.js"
curl -o build/web/canvaskit.wasm "$wasmLocation/canvaskit.wasm"
sed -i -e "s!$wasmLocation!.!" \\
  -e "s!https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf!./assets/packages/amos_mobile_widgets/assets/google_fonts/Roboto-Regular.ttf!" \\
  -e "s!https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols!./assets/assets/css/Noto-Sans-Symbols.css!" \\
  -e "s!https://fonts.googleapis.com/css2?family=Noto+Color+Emoji+Compat!./assets/assets/css/Noto-Color-Emoji-Compat.css!" \\
  build/web/main.dart.js

[jhollar]

just so I'm clear from all the discussions, a future version of flutter will support the caching of canvaskit so the CDN approach will not be used?

[Wissperwind]

Can someone please explain or link how the fix work?
Will we be able to ship flutter applications to intranets that block unpkg.com?

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.