Forem: yu

Surviving Screen Rotation without ViewModel: An Experimental Deep Dive into Circuit and Flow

yu — Sat, 13 Sep 2025 01:00:17 +0000

As a modern Android developer, I love Jetpack ViewModel. It's the standard, safe way to handle UI state and survive configuration changes like screen rotation. But what if I tried to build an app without it, just as an experiment? This question came up during a deep technical discussion with Google's AI, Gemini, and it led to a fascinating exploration. This question is also becoming more relevant as we look towards a future with Kotlin Multiplatform (KMP), where Android-specific libraries can't be used in shared code.

This article documents our experiment: an exploration into building a robust, lifecycle-aware, and ViewModel-less architecture using Circuit, Koin, and the power of Kotlin Flow.

We'll use a simple Barometer app as our example. The goal was simple:

Read sensor data.
Display it on the screen.
Survive screen rotation without losing data.
Stop using the sensor when the screen is not visible to save battery.
Crucially, avoid re-registering the sensor listener on every screen rotation.

The final code for this project can be found on GitHub.

The Challenge: Replacing ViewModel's Magic

ViewModel gives us two key features for free:

Instance Survival: It stays alive during configuration changes.
viewModelScope: A CoroutineScope that is automatically canceled when the ViewModel is no longer needed.

If we don't use ViewModel, we have to find replacements for these two features. This is where our experiment with Circuit and smart Flow operators begins.

Step 1: The Data Source - Making the Repository Smart

First, let's look at the data layer. The BarometricPressureRepository is responsible for getting data from the device's sensor. The key to our solution was how to expose this data.

Instead of a simple callbackFlow, we tried making it a "smart" hot stream using shareIn.

app/src/main/java/dev/yuyuyuyuyu/barometer/data/repository/impl/BarometricPressureRepositoryImpl.kt

class BarometricPressureRepositoryImpl(  
    private val sensorManager: SensorManager,  
    // We inject an application-level CoroutineScope from Koin  
    coroutineScope: CoroutineScope,   
) : BarometricPressureRepository {  
    // ...  
    override val pressure: Result<Flow<Float>, BarometricPressureRepositoryError> =  
        if (barometricPressureSensor == null) {  
            // ... handle error  
        } else {  
            Ok(  
                callbackFlow {  
                    val listener = object : SensorEventListener {  
                        // ...  
                    }

                    // Register the listener when the Flow starts  
                    sensorManager.registerListener(...)

                    // Unregister when the Flow is cancelled  
                    awaitClose {  
                        Timber.d("awaitClose in Repository")  
                        sensorManager.unregisterListener(listener)  
                    }  
                }  
                    // This is the magic part!  
                    .shareIn(  
                        scope = coroutineScope, // The "host" for the sharing mechanism  
                        started = SharingStarted.WhileSubscribed(5000), // The "rules" for starting/stopping  
                    )  
            )  
        }  
}

The Magic of shareIn and WhileSubscribed

This small piece of code is the heart of the solution.

shareIn: This operator turns a "cold" Flow (that starts for every collector) into a "hot" SharedFlow (that is shared among all collectors).
scope = coroutineScope: We provide a CoroutineScope that lives as long as the application. This scope doesn't run the sensor forever. Instead, it acts as a long-living "manager" for the sharing mechanism.
started = SharingStarted.WhileSubscribed(5000): This tells the manager the rules.
- Start the callbackFlow (and register the sensor listener) only when the first UI component starts listening.
- When the last UI component stops listening, wait for 5000 milliseconds (5 seconds).
- If no one starts listening again within 5 seconds, then and only then, stop the callbackFlow and call awaitClose to unregister the listener.

This 5-second timeout is the key to surviving screen rotation. The old UI stops listening, but the new UI starts listening again almost instantly, well within the timeout. The result? The sensor listener is never re-registered!

We set up this application scope in our Koin module.

app/src/main/java/dev/yuyuyuyuyu/barometer/di/BarometerAppModule.kt

val barometerAppModule = module {  
    single {  
        // This scope will live as long as the application process.  
        CoroutineScope(SupervisorJob() + Dispatchers.Default)  
    }  
    // ...  
}

Step 2: The UI Logic - Circuit's Presenter

Now let's look at the Presenter. This is Circuit's version of a ViewModel. Its job is to prepare the state for the UI.

Here, we hit another interesting problem: How to survive screen rotation and also avoid a flicker of a "Loading" screen?

app/src/main/java/dev/yuyuyuyuyu/barometer/ui/barometer/BarometerPresenter.kt

class BarometerPresenter(  
    private val getFormattedBarometricPressureFlowUseCase: GetFormattedBarometricPressureFlowUseCase,  
) : Presenter<BarometerScreen.State> {  
    @Composable  
    override fun present(): BarometerScreen.State {  
        // 1. Retain the last known state across screen rotations.  
        var barometerState: BarometerState by rememberRetained {  
            mutableStateOf(BarometerState.Loading)  
        }

        // 2. Use the result of the Flow to update our retained state.  
        getFormattedBarometricPressureFlowUseCase().fold(  
            success = { pressureFlow ->  
                // This is the Flow coming from our smart Repository  
                pressureFlow.map { pressureString ->  
                    BarometerState.SuccessToGetPressure(pressureString)  
                }  
            },  
            failure = { error ->  
                // ... handle error  
            },  
        )  
            .onEach { state ->  
                // Update the retained state with the latest value from the Flow  
                barometerState = state  
            }  
            // 3. Collect the flow only when the UI is visible.  
            .collectAsStateWithLifecycle(  
                // IMPORTANT: Use the retained state as the initial value!  
                initialValue = barometerState,  
            )

        return BarometerScreen.State(barometerState)  
    }  
}

The Key: rememberRetained + collectAsStateWithLifecycle

This Presenter code is subtle but very powerful.

rememberRetained: This is Circuit's version of rememberSaveable for complex objects. It keeps our barometerState variable alive during screen rotation. This is our replacement for ViewModel's instance survival.
collectAsStateWithLifecycle: This is the standard, safe way to collect a Flow in a Composable. It automatically starts collecting when the screen is visible and stops when it's not. This is our replacement for viewModelScope's lifecycle awareness.
initialValue = barometerState: This is the clever trick! When the screen rotates, a new collectAsStateWithLifecycle is created. But instead of starting with a Loading state, we give it the last known state that we saved with rememberRetained. This prevents any flickering on the screen during rotation. The UI instantly shows the last pressure value while waiting for the next update from the Flow.

Conclusion: A New Way of Thinking

Through this experiment, we were able to build an architecture that is:

ViewModel-less: Free from Android-specific architecture components, making it more portable (ready for KMP!).
Lifecycle-Aware: It smartly uses and releases resources like sensors only when the UI is visible, saving battery.
Rotation-Proof: It survives screen rotation without re-initializing data streams or showing annoying "Loading" flickers.

This wasn't just about finding an alternative to ViewModel; for us, it was about discovering a different way to think about state and lifecycles. By giving more responsibility to the Repository (with shareIn) and using the right tools in our Presenter (with rememberRetained), we were able to achieve a very clean and powerful architecture.

This pattern shows the true power of declarative UI and structured concurrency. While it might be an experimental approach and seem complex at first, it's an interesting solution for this difficult problem. We hope this exploration provides some useful insights for your own projects!

How to Integrate Koin and Circuit in Compose Multiplatform

yu — Sun, 06 Jul 2025 06:16:21 +0000

Building user interfaces (UIs) with Compose Multiplatform is becoming popular. When building your app, you might look for good ways to structure it. For UI architecture, you can use Circuit from Slack. For dependency injection, you can use Koin. They work well together.

This article explains how to use Koin and Circuit together in a Compose Multiplatform project. We will create a simple app that moves between two screens. This will help you understand how they connect.

What are Koin and Circuit?

Koin: A simple dependency injection tool for Kotlin. It helps you manage the parts of your application in an easy way.
Circuit: A library from Slack for UI architecture. It helps you build UIs that are based on state and events. This makes your UI code separate from the platform it runs on. It is built for Jetpack Compose and works well with Compose Multiplatform.

Step 1: Add Dependencies

First, we need to add the Koin and Circuit libraries to our project.

1.1. Define Versions in `gradle/libs.versions.toml`

In your gradle/libs.versions.toml file, add the versions and libraries:

[versions]
koin = "4.1.0"
circuit = "0.29.1"
# ... other versions

[libraries]
koin-compose = { group = "io.insert-koin", name = "koin-compose", version.ref = "koin" }
circuit = { group = "com.slack.circuit", name = "circuit-foundation", version.ref = "circuit" }
# ... other libraries

1.2. Add Dependencies in `composeApp/build.gradle.kts`

Next, add these libraries to the commonMain source set in your composeApp/build.gradle.kts file. This makes Koin and Circuit available for all platforms your app supports.

// ...
kotlin {
    // ...
    sourceSets {
        // ...
        commonMain.dependencies {
            // ...
            implementation(libs.koin.compose)
            implementation(libs.circuit)
        }
        // ...
    }
}
// ...

Step 2: Create Screens with Circuit

Now that the libraries are added, we can create our screens. We will use Circuit's main parts: Screen, Presenter, and the UI. We will make two screens: FooScreen and BarScreen.

2.1. FooScreen: The First Screen

FooScreen is the first screen the user will see. It has a button to go to BarScreen.

composeApp/src/commonMain/kotlin/dev/yuyuyuyuyu/koincircuitintegrationexample/ui/foo/FooScreen.kt

package dev.yuyuyuyuyu.koincircuitintegrationexample.ui.foo

import com.slack.circuit.runtime.CircuitUiEvent
import com.slack.circuit.runtime.CircuitUiState
import com.slack.circuit.runtime.screen.Screen

data object FooScreen : Screen {
    data class State(
        val eventSink: (Event) -> Unit,
    ) : CircuitUiState

    sealed class Event : CircuitUiEvent {
        data object NavigateBarButtonClicked : Event()
    }
}

The FooPresenter contains the logic for navigation.

composeApp/src/commonMain/kotlin/dev/yuyuyuyuyu/koincircuitintegrationexample/ui/foo/FooPresenter.kt

package dev.yuyuyuyuyu.koincircuitintegrationexample.ui.foo

import androidx.compose.runtime.Composable
import com.slack.circuit.runtime.CircuitContext
import com.slack.circuit.runtime.Navigator
import com.slack.circuit.runtime.presenter.Presenter
import com.slack.circuit.runtime.screen.Screen
import dev.yuyuyuyuyu.koincircuitintegrationexample.ui.bar.BarScreen

class FooPresenter(
    private val navigator: Navigator,
) : Presenter<FooScreen.State> {
    @Composable
    override fun present(): FooScreen.State {
        return FooScreen.State { event ->
            when (event) {
                FooScreen.Event.NavigateBarButtonClicked -> navigator.goTo(BarScreen)
            }
        }
    }

    class Factory : Presenter.Factory {
        override fun create(screen: Screen, navigator: Navigator, context: CircuitContext): Presenter<*>? {
            return when (screen) {
                is FooScreen -> FooPresenter(navigator = navigator)
                else -> null
            }
        }
    }
}

Here is the UI for FooScreen:

composeApp/src/commonMain/kotlin/dev/yuyuyuyuyu/koincircuitintegrationexample/ui/foo/Foo.kt

package dev.yuyuyuyuyu.koincircuitintegrationexample.ui.foo

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun Foo(state: FooScreen.State, modifier: Modifier = Modifier) = Column(
    modifier = modifier.fillMaxSize(),
    verticalArrangement = Arrangement.spacedBy(space = 16.dp, alignment = Alignment.CenterVertically),
    horizontalAlignment = Alignment.CenterHorizontally,
) {
    Text("Foo screen")
    Button(
        content = { Text("Navigate to Bar screen") },
        onClick = { state.eventSink(FooScreen.Event.NavigateBarButtonClicked) },
    )
}

2.2. BarScreen: A Screen with Dependencies

BarScreen shows how a presenter can get dependencies from Koin. It has a button that uses a HelloUseCase and another button to go back.

composeApp/src/commonMain/kotlin/dev/yuyuyuyuyu/koincircuitintegrationexample/ui/bar/BarScreen.kt

package dev.yuyuyuyuyu.koincircuitintegrationexample.ui.bar

import com.slack.circuit.runtime.CircuitUiEvent
import com.slack.circuit.runtime.CircuitUiState
import com.slack.circuit.runtime.screen.Screen

data object BarScreen : Screen {
    data class State(
        val eventSink: (Event) -> Unit,
    ) : CircuitUiState

    sealed class Event : CircuitUiEvent {
        data object HelloButtonClicked : Event()
        data object NavigateBackButtonClicked : Event()
    }
}

The BarPresenter needs a HelloUseCase to work.

composeApp/src/commonMain/kotlin/dev/yuyuyuyuyu/koincircuitintegrationexample/ui/bar/BarPresenter.kt

package dev.yuyuyuyuyu.koincircuitintegrationexample.ui.bar

import androidx.compose.runtime.Composable
import com.slack.circuit.runtime.CircuitContext
import com.slack.circuit.runtime.Navigator
import com.slack.circuit.runtime.presenter.Presenter
import com.slack.circuit.runtime.screen.Screen
import dev.yuyuyuyuyu.koincircuitintegrationexample.domain.useCase.HelloUseCase

class BarPresenter(
    private val navigator: Navigator,
    private val helloUseCase: HelloUseCase,
) : Presenter<BarScreen.State> {
    @Composable
    override fun present(): BarScreen.State {
        return BarScreen.State { event ->
            when (event) {
                BarScreen.Event.HelloButtonClicked -> helloUseCase()
                BarScreen.Event.NavigateBackButtonClicked -> navigator.pop()
            }
        }
    }

    class Factory(
        private val helloUseCase: HelloUseCase,
    ) : Presenter.Factory {
        override fun create(screen: Screen, navigator: Navigator, context: CircuitContext): Presenter<*>? {
            return when (screen) {
                is BarScreen -> BarPresenter(helloUseCase = helloUseCase, navigator = navigator)
                else -> null
            }
        }
    }
}

Here is the UI for BarScreen:

composeApp/src/commonMain/kotlin/dev/yuyuyuyuyu/koincircuitintegrationexample/ui/bar/Bar.kt

package dev.yuyuyuyuyu.koincircuitintegrationexample.ui.bar

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun Bar(state: BarScreen.State, modifier: Modifier) = Column(
    modifier = modifier.fillMaxSize(),
    verticalArrangement = Arrangement.spacedBy(space = 16.dp, alignment = Alignment.CenterVertically),
    horizontalAlignment = Alignment.CenterHorizontally,
) {
    Text("Bar screen")
    Button(
        content = { Text("Hello, world!") },
        onClick = {
            state.eventSink(BarScreen.Event.HelloButtonClicked)
        },
    )
    Button(
        content = { Text("Navigate back") },
        onClick = {
            state.eventSink(BarScreen.Event.NavigateBackButtonClicked)
        },
    )
}

Step 3: Create Koin Modules

Now, we will create Koin modules. These modules will provide the dependencies for our application. This includes the Circuit object and other dependencies like HelloUseCase.

3.1. Domain and Data Modules

First, we create modules for our domain and data layers. In this example, we only have a simple HelloUseCase.

composeApp/src/commonMain/kotlin/dev/yuyuyuyuyu/koincircuitintegrationexample/di/domainModule.kt

package dev.yuyuyuyuyu.koincircuitintegrationexample.di

import dev.yuyuyuyuyu.koincircuitintegrationexample.domain.useCase.HelloUseCase
import org.koin.core.module.dsl.singleOf
import org.koin.dsl.module

val domainModule = module {
    singleOf(::HelloUseCase)
}

We also have a dataModule. But this sample app does not have a data layer, so the module is empty.

composeApp/src/commonMain/kotlin/dev/yuyuyuyuyu/koincircuitintegrationexample/di/dataModule.kt

package dev.yuyuyuyuyu.koincircuitintegrationexample.di

import org.koin.dsl.module

val dataModule = module {
    // add modules if needed
}

3.2. UI Module with Circuit

Next, we create a uiModule that provides the Circuit object. This is where we connect Koin and Circuit. We set up Circuit with our screens and presenters. We use Koin's get() function to give the HelloUseCase to the BarPresenter.Factory.

composeApp/src/commonMain/kotlin/dev/yuyuyuyuyu/koincircuitintegrationexample/di/uiModule.kt

package dev.yuyuyuyuyu.koincircuitintegrationexample.di

import com.slack.circuit.foundation.Circuit
import dev.yuyuyuyuyu.koincircuitintegrationexample.ui.bar.Bar
import dev.yuyuyuyuyu.koincircuitintegrationexample.ui.bar.BarPresenter
import dev.yuyuyuyuyu.koincircuitintegrationexample.ui.bar.BarScreen
import dev.yuyuyuyuyu.koincircuitintegrationexample.ui.foo.Foo
import dev.yuyuyuyuyu.koincircuitintegrationexample.ui.foo.FooPresenter
import dev.yuyuyuyuyu.koincircuitintegrationexample.ui.foo.FooScreen
import org.koin.dsl.module

val uiModule = module {
    single {
        Circuit.Builder()
            .addUi<FooScreen, FooScreen.State> { state, modifier ->
                Foo(state = state, modifier = modifier)
            }
            .addPresenterFactory(factory = FooPresenter.Factory())

            .addUi<BarScreen, BarScreen.State> { state, modifier ->
                Bar(state = state, modifier = modifier)
            }
            .addPresenterFactory(
                factory = BarPresenter.Factory(
                    helloUseCase = get()
                )
            )

            .build()
    }
}

3.3. Application Module

Finally, we create a main application module that includes all the other modules.

composeApp/src/commonMain/kotlin/dev/yuyuyuyuyu/koincircuitintegrationexample/di/koinCircuitIntegrationExampleAppModule.kt

package dev.yuyuyuyuyu.koincircuitintegrationexample.di

import org.koin.dsl.module

val koinCircuitIntegrationExampleAppModule = module {
    includes(uiModule, domainModule, dataModule)
}

Step 4: Connect Koin and Circuit in the Main App

Now that we have our screens and Koin modules, the last step is to connect them in our main composable. We will use the KoinApplication composable to start Koin. We will use CircuitCompositionLocals to give the Circuit object to our UI.

composeApp/src/commonMain/kotlin/dev/yuyuyuyuyu/koincircuitintegrationexample/ui/KoinCircuitIntegrationExampleApp.kt

package dev.yuyuyuyuyu.koincircuitintegrationexample.ui

import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import com.slack.circuit.backstack.rememberSaveableBackStack
import com.slack.circuit.foundation.CircuitCompositionLocals
import com.slack.circuit.foundation.NavigableCircuitContent
import com.slack.circuit.foundation.rememberCircuitNavigator
import dev.yuyuyuyuyu.koincircuitintegrationexample.di.koinCircuitIntegrationExampleAppModule
import dev.yuyuyuyuyu.koincircuitintegrationexample.ui.foo.FooScreen
import org.jetbrains.compose.ui.tooling.preview.Preview
import org.koin.compose.KoinApplication
import org.koin.compose.koinInject

@Composable
@Preview
fun KoinCircuitIntegrationExampleApp() {
    val backStack = rememberSaveableBackStack(root = FooScreen)
    val navigator = rememberCircuitNavigator(backStack) {}

    KoinApplication(
        application = {
            printLogger()
            modules(koinCircuitIntegrationExampleAppModule)
        },
    ) {
        MaterialTheme {
            CircuitCompositionLocals(circuit = koinInject()) {
                NavigableCircuitContent(navigator, backStack)
            }
        }
    }
}

This is how it works:

KoinApplication starts Koin with our koinCircuitIntegrationExampleAppModule.
koinInject() gets the Circuit object that we defined in our uiModule.
CircuitCompositionLocals makes the Circuit object available to all composables in the UI tree.
NavigableCircuitContent uses the Circuit object to manage screen navigation and display.

A big benefit of the koin-compose library is the KoinApplication composable. If your Compose Multiplatform project does not use Android, you do not need to call startKoin { ... } for each platform. You can just use KoinApplication in your main composable to make Koin available.

Conclusion

When you use Koin and Circuit together, you get two big benefits. Circuit gives you a clean UI architecture. Koin gives you a simple way to manage dependencies. This combination helps you build Compose Multiplatform applications that are easy to scale, test, and maintain. The setup is simple and gives you a strong base for managing dependencies in your whole app, from the data layer to the UI presenters.

Happy coding!

ComposePWA: Build Progressive Web Apps with Compose Multiplatform

yu — Sat, 05 Jul 2025 09:02:41 +0000

ComposePWA is a Gradle plugin that makes it easy to create Progressive Web Apps (PWAs) from your
Compose Multiplatform projects. This article will show you how to use it.

What is a Progressive Web App (PWA)?

A Progressive Web App is a web application that works like a mobile app. Users can:

Install it on their phone or computer
Use it offline
Get notifications
See it in their app drawer

What is `ComposePWA`?

ComposePWA is a tool that turns your Compose Multiplatform web app into a PWA automatically. It does
all the hard work for you.

Installation

Step 1: Add the plugin to your project

First, open your gradle/libs.versions.toml file and add these lines:

[versions]
# ... your existing versions

composePwa = "x.x.x"  # Replace with the latest version

[plugins]
# ... your existing plugins

composePwa = { id = "dev.yuyuyuyuyu.composepwa", version.ref = "composePwa" }

Step 2: Apply the plugin

Open your composeApp/build.gradle.kts file and add the plugin:

plugins {
    // ... your existing plugins

    alias(libs.plugins.composePwa)
}

That's it! Installation is complete.

How to Use `ComposePWA`

Building Your PWA

After installing the plugin, simply run wasmJsBrowserDistribution as usual.

./gradlew :composeApp:wasmJsBrowserDistribution

Your PWA will be ready in the composeApp/build/dist/wasmJs/productionExecutable folder.

What Files Are Created?

When you run the build command, ComposePWA automatically creates these files:

workbox-config.js - Configuration for offline support
src/wasmJsMain/resources/manifest.json - App information for browsers
src/wasmJsMain/resources/registerServiceWorker.js - Service worker registration
src/wasmJsMain/resources/icons/* - App icons for different sizes
Updated src/wasmJsMain/resources/index.html - HTML with PWA tags

Customizing Your PWA

App Information

You can change your PWA's name, colors, and other settings by editing the manifest.json file:

{
  "name": "My Amazing App",
  "short_name": "Amazing App",
  "theme_color": "#FFFBFE",
  "background_color": "#FFFBFE",
  "display": "standalone",
  "scope": "./",
  "start_url": "./"
}

App Icons

ComposePWA includes default icons, but you can replace them with your own:

Create icons in these sizes: 72x72, 96x96, 128x128, 144x144, 152x152, 192x192, 384x384, 512x512
Put them in the src/wasmJsMain/resources/icons/ folder
Name them like: icon-72x72.png, icon-96x96.png, etc.

Tip: You can use the ngx-pwa-icons tool to
generate all icon sizes from one image:

npx ngx-pwa-icons

Offline Support

You can customize offline behavior by editing the workbox-config.js file:

module.exports = {
    globDirectory: "build/dist/wasmJs/productionExecutable/",
    globPatterns: [],
    maximumFileSizeToCacheInBytes: 10 * 1024 * 1024,
    runtimeCaching: [{
        urlPattern: /.+/,
        handler: "StaleWhileRevalidate",
    }],
    swDest: "build/dist/wasmJs/productionExecutable/serviceWorker.js",
};

Example Project Structure

After using ComposePWA, your project will look like this:

composeApp/
├── src/
│   └── wasmJsMain/
│       ├── kotlin/
│       │   └── your app code
│       └── resources/
│           ├── index.html (updated with PWA tags)
│           ├── manifest.json (PWA configuration)
│           ├── registerServiceWorker.js (service worker)
│           └── icons/ (app icons)
├── build.gradle.kts
└── ...
workbox-config.js (offline support config)

Benefits of Using ComposePWA

Easy to use - Just add the plugin and run one command
Automatic - Creates all PWA files for you
Customizable - You can change everything to fit your needs

Conclusion

ComposePWA makes it very easy to turn your Compose Multiplatform web app into a Progressive Web App.
With just a few simple steps, your users can install your app on their devices and use it like a
native mobile app.

The plugin handles all the complex PWA setup automatically, so you can focus on building your app
instead of configuring PWA features.

Try ComposePWA today and give your users a better app experience!

Resources

License

ComposePWA is available under the Apache License 2.0.

Forem: yu

Surviving Screen Rotation without ViewModel: An Experimental Deep Dive into Circuit and Flow

The Challenge: Replacing ViewModel's Magic

Step 1: The Data Source - Making the Repository Smart

The Magic of shareIn and WhileSubscribed

Step 2: The UI Logic - Circuit's Presenter

The Key: rememberRetained + collectAsStateWithLifecycle

Conclusion: A New Way of Thinking

How to Integrate Koin and Circuit in Compose Multiplatform

What are Koin and Circuit?

Step 1: Add Dependencies

1.1. Define Versions in gradle/libs.versions.toml

1.2. Add Dependencies in composeApp/build.gradle.kts

Step 2: Create Screens with Circuit

2.1. FooScreen: The First Screen

2.2. BarScreen: A Screen with Dependencies

Step 3: Create Koin Modules

3.1. Domain and Data Modules

3.2. UI Module with Circuit

3.3. Application Module

Step 4: Connect Koin and Circuit in the Main App

Conclusion

ComposePWA: Build Progressive Web Apps with Compose Multiplatform

What is a Progressive Web App (PWA)?

What is ComposePWA?

Installation

Step 1: Add the plugin to your project

Step 2: Apply the plugin

How to Use ComposePWA

Building Your PWA

What Files Are Created?

Customizing Your PWA

App Information

App Icons

Offline Support

Example Project Structure

Benefits of Using ComposePWA

Conclusion

Resources

License

1.1. Define Versions in `gradle/libs.versions.toml`

1.2. Add Dependencies in `composeApp/build.gradle.kts`

What is `ComposePWA`?

How to Use `ComposePWA`