[BUG] Flutter Web apps with Drift on a mobile browsers

[zs-dima]

Flutter Web apps with Drift do not work on a mobile browsers. However the same apps working well on Desktop browsers.

Tested on Chrome (Desktop and Mobile) and some other browsers.

I tried this approach as well: https://drift.simonbinder.eu/web/

Could be nice to have Flutter Web apps with Drift working well on all devices browsers.

[simolus3]

There's a cross-platform Flutter app with web support in this repository: https://github.com/simolus3/drift/tree/develop/examples/app

Does that work for you? On mobile browsers, which exception are you getting? Since we're using sqlite3, we need somewhat recent browsers with wasm support.

[zs-dima]

@simolus3 thanks a lot for the answer. The similar database initialization but with sql-wasm.wasm in my app does not work with mobile browsers (for example Chrome v107.0.5304.141), but works with Desktop (for example Chrome v108.0.5359.72 x64) Your sample form the 'develop' branch do not work even in the Desktop Chrome:

CompileError: WebAssembly.instantiateStreaming(): expected magic word 00 61 73 6d, found 2e 2e 2f 2e @+0

isolate_helper.dart 48:19    internalCallback
    at Object.createErrorWithStack (errors.dart:299:10)
    at Error._throw (core_patch.dart:341:28)
    at Error.throwWithStackTrace (errors.dart:116:5)
    at async._AsyncCallbackEntry.new.callback (zone.dart:1378:11)
    at Object._microtaskLoop (schedule_microtask.dart:40:11)
    at _startMicrotaskLoop (schedule_microtask.dart:49:5)
    at async_patch.dart:166:15

Android Chrome supports wasm, and this documents open well on the Android device: https://asinclair-hosted-envs.firebaseapp.com/android-chrome-wasm-docx/

[crisperit]

@simolus3 I think that SharedWorker itself is an issue on mobile browsers - it is supported in 41.27% according to https://caniuse.com/sharedworkers

I've tried to debug your basic example (https://github.com/simolus3/drift/tree/develop/examples/flutter_web_worker_example) https://drift-web-example.netlify.app/#/

I've used Edge mobile browser and connected to the mobile DevTools:

Is it possible to use somehow service worker for that? (Tabs sync will be lost but maybe it would be nice to create such an example)

[crisperit]

@simolus3 That implementation works for mine Edge mobile browser https://github.com/simolus3/drift/blob/develop/examples/app/lib/database/connection/web.dart#L21-L36

Only worker one is not working in my case

[zs-dima]

@simolus3 @crisperit any updates are more then welcome

[crisperit]

@zs-dima I've came to a conclusion that SharedWorker implementation does not work for mobile browsers and used the experimental approach https://drift.simonbinder.eu/web/#drift-wasm which works fine in all mine cases

[zs-dima]

@crisperit @simolus3 thanks a lot for looking into. This experimental approach drift-wasm working well, however sqlite3.wasm increased significantly: https://github.com/simolus3/sqlite3.dart/releases sqlite3.wasm about 1.2Mb instead of previous one about 0.5Mb Could sqlite3.wasm file size be reduced?