Big thanks to the awesome <@U070RR9Q6BE> — my Kotlin/WASM Minesweeper app (<https://stefan-oltmann.d...

# feed

[Stefan Oltmann]

Big thanks to the awesome @אליהו הדס — my Kotlin/WASM Minesweeper app (https://stefan-oltmann.de/mines/) can now be installed as a Progressive Web App (PWA) for offline use! 🎉

This PR outlines the steps needed to make it work: https://github.com/StefanOltmann/mines/pull/3/commits/3366300a53cf215679e8b4406e74b136770c41b9

I'll definitely turn my other Kotlin/WASM apps into PWAs as well.
Seeing it work like this really makes me wish PWA support came out of the box.

[Frank Bouwens]

Awesome 😄 !

[Frank Bouwens]

Question, would it be needed to add the compose resources to the ASSETS_TO_CACHE too?
( like the font, explosion, and confetti )

[Stefan Oltmann]

Good question. 👀
@אליהו הדס is the expert on that. 😅

[אליהו הדס]

Compose already caches its own resources, so there's no need to add it. You can check this once you've loaded the app for the first time. It's instantaneous when you reopen it.

[Armond Avanes]

Can this be added as an option to kmp.jetbrains.com (on wasmjs platform)?

[Stefan Oltmann]

I'd love to see that in the template.

@Konstantin Tskhovrebov What do you think? 🙂

[אליהו הדס]

I think it would be better to make a gradle plugin to configure the pwa a bit like what compose desktop does.

[Stefan Oltmann]

Yeah, you are right. Some of the stuff can certainly be generated

[אליהו הדס]

Something like this :

compose.web {
    pwa {
        enabled = true
        manifest {
            name = "My Application" 
            shortName = "MyApp"  
            backgroundColor = Color.White 
            themeColor = Color.Black  
            displayMode = DisplayMode.Standalone  // Display mode (Browser, Standalone, Fullscreen)
            orientation = Orientation.Portrait  // Orientation (Any, Landscape, Portrait)
            primaryIcon = "assets/icon.png"
        }

        offlineMode = true
        offlineStrategy = OfflineStrategy.OfflineFirst  // Caching strategy (OfflineFirst, OnlineFirst, CacheOnly)

        cacheExpiration {
            enabled = true 
            duration = "30d"
        }

    }
}

[אליהו הדס]

We should also find a way to easily manage background synchronization as well as notifications and permissions.

[אליהו הדס]

I always thought pwas were completely useless, but I think with compose web it makes perfect sense.

[Frank Bouwens]

There’s something I worry about a bit;

My side project, uses a LOT of images;
And it looks like the browser will only download an image from my static hosting, when my code specifically asks for it. (When it will be visible in the UI)

So after one use, not all images may be in the cache yet. (to be used offline)

And it’s probably not a great idea to force users to download all images on the first load 🤔
Maybe this app is not fit for offline use.

[אליהו הדס]

It is possible to cache images in a background task, without affecting the use of the app

[אליהו הדס]

But for now, there is no easy way to create background tasks in kotlin with wasm like on android for example, but I think it would be good to implement something similar, because technically it is possible, a pwa supports background tasks

[אליהו הדס]

a pwa also supports push notifications, I would also like that to be implemented

[Konstantin Tskhovrebov]

https://www.jetbrains.com/help/kotlin-multiplatform-dev/whats-new-compose-180.html#preloading-of-resources

[Konstantin Tskhovrebov]

it should help with resources

[אליהו הדס]

@Konstantin Tskhovrebov How does it work? Does it load them before the application starts?