[web] support bundling CanvasKit instead of CDN

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)

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

@sidrao2006

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

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.

@yjbanov

@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

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/[email protected]/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.

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/[email protected]/bin/canvaskit.js

above command still loads the default 0.19.0 from unpkg.

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

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

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/[email protected]/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.

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

Similar issue loading fonts at #77580

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?

@Wissperwind

@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

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?

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

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.

Navigation Menu

Repository navigation

[web] support bundling CanvasKit instead of CDN #70101

Use case

Proposal

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[web] support bundling CanvasKit instead of CDN #70101

Description

Use case

Proposal

Activity

sidrao2006 commented on Nov 9, 2020

jonahwilliams commented on Nov 9, 2020

yjbanov commented on Nov 9, 2020

peerwaya commented on Nov 10, 2020

kubaprzetakiewicz commented on Nov 30, 2020

yjbanov commented on Dec 10, 2020

yjbanov commented on Feb 11, 2021

evenremy commented on Mar 15, 2021

jonahwilliams commented on Mar 15, 2021

philippecade commented on Apr 27, 2021

Wissperwind commented on Jul 6, 2021

philippecade commented on Jul 6, 2021

jhollar commented on Aug 15, 2021

Wissperwind commented on Oct 21, 2021

github-actions commented on Nov 4, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions