CODEWITHSUNDEEP
fluttercaching
Daniel Brunner
Daniel Brunner

Reputation: 83

Is it possible to cache canvaskit.wasm for Flutter Web to avoid repeated downloads?

I'm developing a Flutter Web app, and every time I load the app, it downloads the canvaskit.wasm file, which is around 1.5 MB. Since this can significantly affect load times for users with slower internet connections, I'm wondering if there's a way to cache this file and serve it locally or from a CDN, so the browser doesn't need to download it on every page load.

I've tried looking into Flutter's build configuration and the service worker settings, but I'm not sure how to approach this issue in the best way.

  1. Can I configure the service worker (or any other caching mechanism) to cache canvaskit.wasm effectively?

  2. How do browsers typically handle caching of .wasm files, and are there specific headers or strategies I should implement?

Any insights or examples would be much appreciated! Thanks.

Upvotes: 0

Views: 234

Answers (1)

Khamidjon Khamidov
Khamidjon Khamidov

Reputation: 8999

You can cache it in your deployment settings. Your HTTP server controls the Cache-Control HTTP headers.

That's unrelated to Flutter.

If you use Firebase hosting, you could add this to firebase.json:

{
  "hosting": {
    ...
    "headers": [
      {
        "source": "**/canvaskit.wasm",
        "headers": [
          { "key": "cache-control", "value": "max-age=600001" }
        ]
      }
    ]
  }
}

Upvotes: 0

Related Questions