I have ported a small app for our annual Java conf...

# compose-web

[Michael Paus]

I have ported a small app for our annual Java conference to wasmJs. The core is fully functional and actually works very nicely. At least I think so 😉. The primary problem though is the fact that the back button on an Android device is not synchronised with the internal navigation. Does anybody have a suggestion of a solution for that?

Another problem is that I would like to be able to use this app also when I am offline. In order to test that I installed the app as a PWA via Chrome on desktop, which also works nicely, but when I am offline I am not able to start the application. However, when the app is running already when I go offline then it continues to work. All data is loaded at the beginning and update attempts will just time-out. A possible solution for that would also be welcomed.

If you want to give it a try, here is the link:
https://mpmediasoft.de/products/JavaForumStuttgartApp/JFSWebApp/index.html

[PHondogo]

I would suggest to tune caching.
For example such file dd568dbcd078c0adf7cf.wasm could be always cached (it is skiko.wasm, if it's version updated there will be another unique name)

[PHondogo]

I don't know why your app wasm file is named composeApp.wasm. May be you change smth in gradle for that, but in my case it is also have name made unique on each build, so the same caching policy as for skiko.wasm could be applied.

[Chrimaeon]

To make it an offline PWA you need to incorporate “Service Workers” that will cache the requests and replay if offline. https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Offline_Service_workers

[Michael Paus]

@PHondogo At the moment caching was explicitly turned off because it caused me less headaches during development. For a final version this would of course be turned on again. The name “composeApp.wasm” is just the default which the Jetbrains wizard created and in the final version this should of course also be changed.

[Michael Paus]

@Chrimaeon I also found this description from mozilla but it looks like overkill to me. It looks like a hack to make an application to work offline, which was written without offline capabilities in mind. My app actually does work offline because it stores all relevant data in LocalStorage. The problem just is that it cannot be started offline.

[ephemient]

https://developer.mozilla.org/en-US/docs/Web/Manifest you need a manifest that tells the browser which resources are necessary, then your app can run offline once those are fetched

[ephemient]

for back button, you need to work with https://developer.mozilla.org/en-US/docs/Web/API/History_API
I'm not sure what you're using for navigation; some frameworks like Decompose already integrate with it, otherwise doing it yourself shouldn't be too bad

[Michael Paus]

@ephemient Thanks. I’ll look into that. It looks like the way to go.

[Chrimaeon]

having a simple file like this is overkill 😅

[Chrimaeon]

https://github.com/chrimaeon/curriculumvitae/blob/dd7ce811c8fb656ab53183853bf169d989980ee2/web/src/jsMain/resources/sw.js

[Chrimaeon]

and using it like this in your main https://github.com/chrimaeon/curriculumvitae/blob/dd7ce811c8fb656ab53183853bf169d989980ee2/web/src/jsMain/kotlin/Main.kt#L29

[Michael Paus]

@Chrimaeon With an example like this it looks more manageable. Thanks.

[ephemient]

be careful with service workers' lifetime otherwise a single bug may accidentally break users and prevent them from ever getting an update again (we did this… 🫠)

[Chrimaeon]

That’s why you use versioning for the cache. 😉

[ephemient]

the issue we ran into: the page was being served by the service worker, and (bug) never updated the page or itself even when online, so it didn't matter what updates we made on the server