Drift not working on Web

[ehtiqamar]

Can't seem to get it working on web(Works fine for native platform). Went through all the docs properly. I have a pre - populated .db file which I want to use for web. But can't seem to get any entry or any query executed.

[simolus3]

Does the example app work on the web for you? Does drift work without trying to use a pre-populated database or is that broken too? Are there any logs in the browser console? I think I need to see some code or more details on what you're doing to fix this.

[panalgin]

Hello, example app works on web (ubuntu + brave browser ) just fine.

Is there a planned web-assembly support ? Due to dart:html usage in drift (probably in sqlite3) and filepicker dependencies used, I can't get it to compile with flutter build web --wasm. Or am I asking too much too early? 😁

Thanks for this great library @simolus3 . Insane work, I wish I could help somehow

[simolus3]

Yeah, I'm currently using dart:html to access some web APIs like workers and message channels. I can rewrite these bindings ontop of dart:js, but I think I want to wait for dart:js_interop to mature before I start changing things.

Given that sqlite3 is also using wasm, hopefully we can eventually just link sqlite and your Flutter application into the same web assembly module. But I don't think the platform can do these things yet, so it might be a little early for drift to start migrating.

[panalgin]

Yeah, I'm currently using dart:html to access some web APIs like workers and message channels. I can rewrite these bindings ontop of dart:js, but I think I want to wait for dart:js_interop to mature before I start changing things.

Given that sqlite3 is also using wasm, hopefully we can eventually just link sqlite and your Flutter application into the same web assembly module. But I don't think the platform can do these things yet, so it might be a little early for drift to start migrating.

Thank you @simolus3 for the detailed answer. I am planning to use drift for my next big project and it is great to hear that there will be full wasm support once things get mature on flutter side.

[AndreLuizNogueira]

any news on the problem ?

@panalgin was your test local or in a real website ?

I am also facing error to use on the web, even with the example app.... it works when I run it from vscode, but when I build it with "flutter build web", and push it to my website it doesnt work. tested with chrome 120.0.6099.217, edge 120.0.2210.133 and fireforx 121.0.1

chrome and edge throws same error:

Using WasmStorageImplementation.sharedIndexedDb due to unsupported browser features: {MissingBrowserFeature.dedicatedWorkersInSharedWorkers, MissingBrowserFeature.sharedArrayBuffers}

TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

firefox throws:

Using WasmStorageImplementation.opfsShared due to unsupported browser features: {MissingBrowserFeature.sharedArrayBuffers} main.dart.js:28768:78
TypeError: WebAssembly: Response has unsupported MIME type 'text/plain' expected 'application/wasm' main.dart.js:28768:78

[simolus3]

WebAssembly: Response has unsupported MIME type 'text/plain' expected 'application/wasm'

Which web server are you using? It needs to recognize .wasm files and serve them with an Content-Type: application/wasm header.

[AndreLuizNogueira]

WebAssembly: Response has unsupported MIME type 'text/plain' expected 'application/wasm'

Which web server are you using? It needs to recognize .wasm files and serve them with an Content-Type: application/wasm header.

using apache, thanks. resolved by adding all headers and clearing cache. I was fooled by the table, where it says full support without headers. Below are the headers I added to my .htacess file to make it work if anyone need it.

btw @simolus3 when I posted the comment, I looked for solved problems closed to the web, and I found many, some repeated several times. I know there is a manual, but I got lost there myself. Maybe you could do step-by-step testing of the known issues and how to resolve them.

<IfModule mod_headers.c> Header always set Cross-Origin-Opener-Policy "same-origin" Header always set Cross-Origin-Embedder-Policy "require-corp" Header always set Access-Control-Allow-Origin "*" </IfModule> <IfModule mod_mime.c> AddType application/wasm .wasm </IfModule>

[simolus3]

Good point, I'll change the documentation to highlight that better.

[PrimeTimeTran]

Would someone care to share how they were able to enable Content-Type: application/wasm when serving their web app? I've tried these instructions I found:

https://docs.flutter.dev/platform-integration/web/wasm

but when I run the following command I error "Not Found"

dhttpd '--headers=Cross-Origin-Embedder-Policy=credentialless;Cross-Origin-Opener-Policy=same-origin'
Server started on port 8080

At
http://localhost:8080

I've also tried
0.0.0.0:8080

But this didn't find the web server at all.

Thanks in advance.

PS: Machine Info.
[✓] Flutter (Channel stable, 3.19.5, on macOS 14.3 23D56 darwin-arm64, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.2)
[✓] VS Code (version 1.86.1)
[✓] Connected device (2 available)
[✓] Network resources

I've also tested on Safari, FireFox, Chrome. None of these work for me. I get the following error.
Using WasmStorageImplementation.sharedIndexedDb due to unsupported browser features: {MissingBrowserFeature.dedicatedWorkersInSharedWorkers, MissingBrowserFeature.sharedArrayBuffers}

However when running the example app it works fine.

Thanks in advance again.

[simolus3]

I went to examples/app in this repository, ran dart run build_runner build and flutter build web. This generates a website into build/web, which I ran with:

dhttpd '--headers=Cross-Origin-Embedder-Policy=credentialless;Cross-Origin-Opener-Policy=same-origin' --path build/web/

That worked (well I've only tested Firefox but the headers are there). I've actually had to run dart pub global activate dhttpd again because my local version was too old to support custom headers. Maybe that's a problem with your local copy as well, does dhttpd --help mention the --headers option?

However when running the example app it works fine.

Also with the dhttpd server after building it? I don't see what could break this in another project if the headers are there.

[PrimeTimeTran]

@simolus3 I was missing the --path build/web/ path. Thanks so much!