Think about offering an offline version and/or multi-platform desktop apps?

[Naereen]

Hello there,

Using Electron and recent technologies, it shouldn't be too hard to bundle this web app as a desktop app!
It could be multi-platform, as it's easy to use electron-packager or electron.build to produce zip files for different platforms.
(There is no need to be on such platforms, see for instance this project where I published apps for all platforms, built on Ubuntu.)

The advantage is that it's then possible to install it as a local desktop app, which can be used without Internet.

What do you think?
I could try to play again with electron.build, if you think this is interesting.)

Thanks in advance! -- @Naereen

[Naereen]

Another solution I just discovered is webcatalog.app, and apparently I can set-up a custom app using https://betterocaml.ml/editor/

I'll add screenshots or a GIF showing this, just for demonstration.

[Naereen]

Creating the WebCatalog webapp (using a PNG logo from, that I manually edited using GIMP to put it in square format):

Launching the app:

Lauching the app offline:

[Naereen]

Full tutorial (~1min30)

[Naereen]

A similar or follow-up discussion would be about packaging the BetterOCaml website for a tiny IDE on Android/iOS.

I've been using OCaml Toplevel for Android since 2011, but it's using OCaml v3.12 and compiling natively to Android is painful, bundling your online javascript editor would be a much quicker solution.

Note that I haven't been able to use https://betterocaml.ml/editor/ on my (not so recent) smartphone.

[jbdoderlein]

Hi,

When i started this project, my goal was to build with electron, but the main issue iI have with electron is the size of the application at the end. When I tested it, it worked well but with a final size of 200Mb where the entire project fit in 5Mb zipped.

Maybe I will create a new branch for electron setup, because there is some feature I want to implement ( for exemple the file management with recent files , ...)

Webcatalog.app is nice but if I understand correctly each customer must install the software ?

Moreover, the website can be used offline, because all the file are kept in browser cache.

Finally for the mobile version, I need to work on CSS but when I tested it on my phone it worked pretty good (Safari , iOS 14)

[Naereen]

Hi,
Thanks for the reply.

• Yes the Electron apps are huge even for tiny websites. 200Mb is a rough upper-bound, for instance for https://github.com/Naereen/kaamelott-soundboard-desktop-app/releases/tag/v0.6 it includes 35 Mo of sounds, and the resulting apps are all between 88 and 98 Mo (depending on the platform). So for low-storage laptops, it can be a problem. However I think for most laptops, having a few Electron more apps is not such an issue.

• I can help, or at least be your guinea pig, if you develop an Electron app on another branch ! Don't hesitate to ping me @Naereen when a new version will be ready for test!

• Regarding WebCatalog.app, yes it's an open-source desktop app that each user has to install, so it's a drawback, but an advantage is that it's just brilliant and easy to use for other websites as well! I've been using (and helping develop) https://tableaunoir.github.io/ for six months, and using it offline with Electron was painful, but installing as a "native" desktop app (it shows in my app menu etc) was just 20 seconds using WebCatalog.app, and it works very well.

• I guessed so that the website can be used offline, but maybe enforcing/helping it with a "Cache manifest" could improve this possibility, and it could also be advertised somewhere on the README here and on the webpage https://betterocaml.ml/ or https://betterocaml.ml/editor : basically I suspect nobody tries to access a website when they are offline except if they know it will work!

• Regarding cache manifest: generic search, 10 years old tutorial and Wikipedia page in English (to be translated...)

• For smartphone, I think my screen is too small, but of course the Javascript part should work with no trouble. The official TryOCaml (and the tiny pages hosting it on my website) worked since 2014 at least!

• I remember something about automating generation of an app using websites like https://www.webintoapp.com/ I remember trying in 2018 a website powered by Adobe or Amazon, but I can't find it, probably discontinued.

[jbdoderlein]

Hi,

I created a new branch named electron with the basic setup : I tested on windows and it work ! (80 Mb zip and 160 with the installer)
Maybe you could try on Linux and if you see any improvement or bug to fix (I'm struggling a bit with the icons) , open a pull request 👍

It's a very good idea for the cache, I will work on this next week.

For WebCatalog, you could add a section to the Readme if you want 😃

[Naereen]

Just FYI, I contacted the developer of OCaml Toplevel for Android, which still works but wasn't updated since 2011!

[jbdoderlein]

Thank's for the readme update ! I added a cache amnifest and a little python script to generate the file, but this is a partial solution because Application Cache API is now deprecated :(

The solution is to use service worker but I have to learn how to use them first .

[Naereen]

Hi there!
Oh yes indeed, I just read that it's not the most recent solution to use... it's awesome how fast the web progresses, but it's sometimes boring and painful, 4-year-old tutorials are not valid anymore...

I found these references:

• https://css-tricks.com/making-your-web-app-work-offline-part-1/
• https://medium.com/swlh/how-to-make-your-web-apps-work-offline-be6f27dd28e
• and then I tried SO but 300+ answers so... not SO for this.

[Naereen]

Also, just for your information, I found yesterday JSCPP which is a project quite similar to BetterOCaml... except that it's for the C language! interpreted in javascript! how awesome is that!

[Naereen]

I kept looking for more resources about web workers, and this article https://levelup.gitconnected.com/build-a-pwa-using-only-vanilla-javascript-bdf1eee6f37a seems to be pretty clear. (it behind shitty medium, and I read too much this week so I must use Tor just to read it...). The code is there https://github.com/S-ayanide/MixCentro.

[Naereen]

So I guess with the two solutions of using WebCatalog.app or installing it as a "progressive web app" using Chrome or Chromium, this can be closed (for now at least).