Progressive Web Apps and Emscripten: A Minimal Example

Here's the app, here's the code

While working on my unusual concatenative lisp thingy, I realized I wanted to do the chic thing and have a proper web repl. Beyond that, knowing I had an upcoming trip ahead where I wasn't going to be on my laptop or on the internet much, so I wanted to be able to use the web repl offline. The two biggest things that I need to make it happen are emscripten and progressive web app tech. I didn't see any sort of minimal example combining the two pieces so here's my code and a bit of explaining. I do make a decent amount of decisions on how to do things here, but if you're working on a more detailed or complicated project (or just harbor differing opinions) they're the types of things that aren't too hard to switch away from.

the C code

Really not much to this beyond a couple little additions. Gotta include <emscripten/emscripten.h>, then throw EMSCRIPTEN_KEEPALIVE in front of whatever functions you want to be able to call from javascript. I haven't bothered trying to take or return anything but strings in these functions yet, but then again I am more of a C person than a javascript person, and it isn't terribly difficult to mix things up in this way.

the Makefile

It'll be more complicated if you're doing something more complicated, but in my experience not exceedingly so. The main 'trick' I use here is that I have the makefile collect everything you need for the site in an output folder.

the shell

This is the last piece needed to get the thing working as a webpage in the first place, and it's definitely the trickiest piece. Most of it is undramatic HTML, there's a form and a div for output, and then a script. The script is genuinely non-obvious in many ways. The first part (the Module bit) is what we use to get output from things like printf to get output.

The second bit (the event listener on the form) is how I'm taking input and calling the C function. A solid portion of this is scene-setting and normal javascript form-handling. The big magic happens in Module.ccall, where we actually call the C function. We get the output, and finish setting the scene, and that's it.

Finally, we set up the service worker. The sw.js file is what we'll get to next, but for the moment just know it's a separate javascript file we look to here, and pretty much do this call (with a couple of console logs solely for debugging purposes).

the service worker

Fortunately the service worker itself is not terribly complicated. The first bit opens up a cache, and places in that cache pretty much all the relevant files. If you've got more files to cache, put 'em here. The second bit messes with 'fetch' requests, so that they look in the cache before checking the network.

the icon

An icon is needed to make it an installable web app.

the manifest

More importantly than the icon, the manifest is also needed to make an installable progressive web app. It's mostly boilerplate, anything that feels like it would be an obvious change to one's specific app would indeed be an obvious change.

putting it all together

That's about it. The makefile will put all of the needed files in the created 'outdir' directory, and all you need to do now is put these files wherever a webserver will host them (with ssl). That's it!