How should a simple cross-platform mobile application be arranged?

Question

JavaScript

Sometimes you need a simple application utility that can, for example, be distributed to laboratory staff. Roughly speaking - 4 squares, when clicked, the square changes color from red to gray and vice versa. The state is saved while the utility is open, no more.

I tried one approach - I made an application on React Native, I made a Debug Apk. But it turns out that 4 colored squares weigh 65MB. I think this is overkill.

The second approach - I have not tried it yet, but the point is - the same is done on HTML + JS, put in a folder, shared on the Internet, and then a person uses the utility via the Internet. It turns out 65Kb, it's already easier, but I want offline.

Please advise how best to organize.

Answer 1

Take HTML + JS, make PWA, share it on the Internet (or locally, it doesn't matter), install it on your phone (in chrome: three dots > more > add to home screen).
Weight is small.
The need for a network is only for installation.
All platforms (where there is a PWA-enabled browser, such as Chrome)
The trick is that when you open a PWA application, it actually launches a browser window, but without a browser interface.
That is, the engine for running JS and rendering HTML is not dragged into the build, but is presented by the browser.
Of the minuses - a person must have a browser or other software installed that supports PWA. Otherwise, the application will not start.

Answer 2

maybe this will fit?

Answer 3

you can simply open a single-page html application in any browser from the file system of a smartphone/tablet, which can save data to the server
. disadvantage - the browser interface is visible, but you can find a full-screen browser and open it in it
. you can pack a single-page html application using phonegap into a mobile ios / android app
disadvantage - you have to pay to participate in the Apple and Google app store