https://kotlinlang.org logo
#webassembly
Title
# webassembly
j

Jose Garcia

03/26/2024, 3:59 PM
Hi, I created a simple web app with Kotlin/Wasm using Compose multiplatform. The issue I’m experiencing comes when running the website on mobile device browsers. AFAIK Kotlin/Wasm doesn’t work on Safari browsers. However, some Android devices can run the web and some other Android devices experience a blank screen. On my iOS device I get a blank screen on both Safari (as expected) and Google Chrome. Is this normal? Do I have to add some configuration so that small screens can run my webapp?
s

Svyatoslav Kuzmich [JB]

03/26/2024, 4:05 PM
Hi, it is expected. iOS version of Chrome and most other browsers use Safari’s Wasm engine.
j

Jose Garcia

03/26/2024, 4:10 PM
Thank you, do you know what is the timeline for providing support to these browsers?
s

Svyatoslav Kuzmich [JB]

03/26/2024, 4:22 PM
Safari hasn’t provided the timeline for new Wasm features, but it seems that they’re getting close to making them work.
j

Jose Garcia

03/26/2024, 4:27 PM
Thank you 🙂
o

Oliver.O

03/26/2024, 5:45 PM
Are you aware that you can use Kotlin/JS to run your Compose Web app in the meantime? What looks like this on Wasm
Copy code
fun main() {
    CanvasBasedWindow("App Name") {
        // ...
    }
}
looks like this on JS
Copy code
fun main() {
    onWasmReady {
        CanvasBasedWindow("App Name") {
            // ...
        }
    }
}
Apart from the above and configuring the build for a
js
target, no other changes to your app are required.
K 4
🎉 2
y

Yogeshvu

03/27/2024, 9:43 AM
I think the documentation about ^ this is lacking in the compose multiplatform documentation… it as such appears that the compose-web is only wasm based and not js targeted
o

Oliver.O

03/27/2024, 9:49 AM
That's true. You actually get more than what's marketed.
j

Jose Garcia

03/27/2024, 1:45 PM
That’s great, I was trying to get a js target running compose before posting my message, but I wasn’t able. I think it had something to do with the name of my generated
.js
file. I will try again with
onWAsmReady {}
y

Yogeshvu

03/29/2024, 5:13 PM
@Oliver.O are there any github examples with the configuration you suggested?
o

Oliver.O

03/29/2024, 5:28 PM
Possibly plenty. I have one but it’s not up to date: https://github.com/OliverO2/compose-counting-grid
With current Kotlin versions you no longer need separate build configurations for JS and Wasm, so much easier now.
y

Yogeshvu

03/29/2024, 5:42 PM
Thanks. Can you please elaborate on this ^
o

Oliver.O

03/30/2024, 10:10 PM
I have just updated the project to the latest Kotlin and library releases. It now contains the simplified build configuration.
🙌 1
j

Jose Garcia

04/01/2024, 4:30 PM
thank you @Oliver.O that was very helpful. Now my web app works on Android phones using chrome and mozilla, and laptop using Safari, However, it does not work on iOS (tried on safari and google chrome). Is this still normal behaviour for js targets?
o

Oliver.O

04/01/2024, 5:02 PM
Just tried the JS target on an iPhone SE (3rd generation) on iOS 17.3.1 using Safari. It works as expected.
24 Views