Progressive Web Adventure
Being a hater of apps, and finding myself in need of a point-counter app, I dediced to put something together, modern-web style – and in order to actually understand what I’m doing, I did it all from scratch: no frameworks, no libraries, no helpers.
An hour-or-so later, the app was mostly ready. In around 50 lines of CSS, 4 lines of JS and 25 lines of HTML I got something that looks and behaves alright on mobile, and with an addition of some 5 lines of JSON and an icon I found somewhere on the web, it became „installable” like any modern webapp is. Neat!
But it’s hard to shake off the feeling that modern web „standards”, while theoretically helpful, are still as half-assed as ever, and developing for them still sucks.
I initially made the element displaying the current score to be <input type="number>
– as it should be, logically at least. But since I already have giant +1/-1 buttons,
it made no sense to keep the default up-down arrows, so I started looking for a way
to find these. As always, StackOverflow provided
an answer: a few lines of CSS, different for Webkit-likes and Firefox. Disgusted, I changed
it to type="text". This kind of „cross-platformness” that boils down to enumerating two
most popular platforms and writing platform-specific solution for each of them is exactly
what I was hoping to solve with a PWA (as an alternative to writing something for Android,
something for iOS and fuck everyone else).
Another thing came up when I noticed that on mobile, double-tapping a button causes the
browser to zoom in – which is of course massively annoying in an app that’s supposed to
enable you to tap the +1 button until you’re satisfied. What’s more, the zooming behaviour
introduced sort of an input lag when using the app on mobile: every click would be delayed
by a few hundred ms, since the browser was waiting for the second tap, since maybe I was
just double-tapping here. After rejecting half-assed solutions like „just disable the zoom
on your page!” (which also broke the layout for some reason), it turned out that modern web
actually provides an answer: touch-action: none; added to a clickable area makes taps
register as clicks and not anything else.
The manifest file is a small bit of JSON that you link to on your site to convince a mobile
device that your website is as good as an app: you give it a name, icon and stuff. It’s easy
enough to have something that works, but it quickly goes downhill from there. My icon size of
256x256 worked fine for Firefox on my device, but was happily ignored by the stock android
browser and Chrome on my girlfriend’s phone. Presumably more sizes would help – or maybe some
disgusting vendor-specific tag like <link rel="apple-touch-icon"> – but I’d hope that a piece
of software as powerful and capable as a web browser shouldn’t have much trouble with resizing
images – it does that all the time! In a typical webdev fashion, there is no error of course:
things just don’t work on some platforms. Similarly, "purpose":"maskable" added to the icon
definition is suppose to make it displayable as a circle without turning into a rectangle in
a circle: but that didn’t work either, for one reason or another.
The tribal knowledge answering questions related to this seems to be „use this PWA helper JS library!” or „use a framework that does this for you!”; that’s what I wanted to avoid though. I assume a correct answer exists – but I’m afraid it may be another „add this for Chrome, this for Firefox, this for Safari, bla bla bla” – which I’d rather not support as a principle. Thankfully, in the web world, everyone’s used to things not working for random reasons, so it’s not a big deal for anyone in practice ;)
All in all, I can’t say that the adventure was a failure: it took very little time to get something working, and the vast majority of it was spend fucking with CSS and trying to make things finger-sized. This is one of those things that you’d hope a UI toolkit would do for you: and perhaps it would, were I to use an actual UI toolkit rather than the UI-toolkit-toolkit that HTML+CSS really is. That will have to be another adventure for another time though :) Feel free to check out the app and criticize it as much as you like. If you have some feedback you’d like to share, my email is on my homepage.