
Tiny PWAs and why I keep building them - helloworld
https://justinribeiro.com/chronicle/2019/01/31/tiny-pwas-and-why-i-keep-building-them/
======
emmanueloga_
When I first heard someone talking about "Progressive Web Apps" I thought they
were talking about "Progressive Enhancement" [1].

Turns out doing a PWA is just basically about using the "Service Workers" API
[2] and the practices around that.

This nice article does a lengthy trace on the origins of the "PWA" term [3].
The same guy that started the "Service Workers" spec in Github [4] created the
PWA marketing campaign, apparently. Makes me wonder why he thought it was more
marketable to sell this PWA idea more than the simpler and more direct
message: "use Service Workers".

The PWA campaign also reminds me of the less successful "Offline First"
campaign from a couple of years ago [5].

1:
[https://alistapart.com/article/understandingprogressiveenhan...](https://alistapart.com/article/understandingprogressiveenhancement)

2:
[https://jakearchibald.github.io/isserviceworkerready/](https://jakearchibald.github.io/isserviceworkerready/)

3: [https://medium.com/@amberleyjohanna/seriously-though-what-
is...](https://medium.com/@amberleyjohanna/seriously-though-what-is-a-
progressive-web-app-56130600a093)

4:
[https://github.com/w3c/ServiceWorker/tree/c49c878cdcbaf7a81e...](https://github.com/w3c/ServiceWorker/tree/c49c878cdcbaf7a81e9e8cf3cca9970787017a19)

5: [http://offlinefirst.org/](http://offlinefirst.org/)

~~~
kaycebasques
I work on the same team (Web DevRel) as the "service worker guy" you mention
(Jake Archibald). Alex Russell (who introduced the "PWA" and is now advocating
for the "Never-Slow Mode" idea you may have heard about recently) works on
Chrome but collaborates with us frequently.

> When I first heard someone talking about "Progressive Web Apps" I thought
> they were talking about "Progressive Enhancement"

Progressive enhancement is indeed where the P in PWA comes from. The core idea
is to ship great sites for all users, and progressively upgrade with the
latest web capabilities (service workers for offline, manifest for adding to
homescreen and full-screen displays, and so on) when a user's device supports
it. If the user's device doesn't support it, they should still get a good,
traditional web experience: fast, secure, usable.

> Turns out doing a PWA is just basically about using the "Service Workers"
> API [2] and the practices around that.

Your first impression about progressive enhancement was closer to the mark.
The PWA Checklist [1] is the canonical document about what constitutes a PWA.
We created that doc in November 2016 [2] to try to clear up the massive
confusion about the definition of a PWA, but apparently to no avail.

Under the "Baseline PWA" checklist you'll notice that there's mention of
service workers and manifest files, but there's also mention of loading fast
on 3G, having mobile-friendly design, being secure, supporting all browsers,
and so on. Again, the core idea is to ship good experiences for all users, and
progressively enhance the UX when possible.

It'd be an interesting postmortem to study why the "PWA" term has been so
notoriously confusing. IMO part of the problem was that we as a team weren't
100% crystal-clear on the definition at the start. But to be fair, I think we
did straighten out our messaging pretty early on. The PWA Checklist that I
linked to which has been out since November 2016 is evidence of this. But by
that time it was already too late. PWA became a buzzword, and the blogging
community seemed to conflate "PWA" with "promising new web platform
capabilities" (service workers and manifests). I don't mean to shift blame. We
(Web DevRel) most likely caused that conflation. I think the takeaway is that
this is a lesson on what can happen when you're not 100% clear on messaging
right from the start.

[1] [https://developers.google.com/web/progressive-web-
apps/check...](https://developers.google.com/web/progressive-web-
apps/checklist)

[2]
[https://github.com/google/WebFundamentals/commits/master/src...](https://github.com/google/WebFundamentals/commits/master/src/content/en/progressive-
web-apps/checklist.md)

~~~
nicoburns
I think the confusion comes from the fact that one of the key principles of
"Progressive Enhancement" was making the site accessible to _everyone_ by
providing support for browsers that either don't support JavaScript or have it
disabled. This version of the website often also supported much older browsers
(e.g. IE6-8, but also lynx, etc) that weren't supported by the enhanced
version of the website.

In contrast, the PWA checklist makes no mention of support for browsers
without JavaScript or much older browsers (and in practice very few PWAs
provide such a fallback, as they are almost all SPA JavaScript apps where
implementing this kind of fallback is difficult). As such, it is many ways the
antithesis of the original Progressive Enhancement concept.

------
thosakwe
There are only two real things limiting PWAs in my opinion:

1\. Lack of support on iOS. I presume it’ll stay this way for a while
(years!). Mobile Safari finally has service workers, but really, that’s about
it. No support for “Add to Home Screen” (technically it’s there, but doesn’t
work the way it does in other browsers), and a lot of other APIs.

2\. The Web is missing some APIs that would really let it compete with native
apps. I know there was WebNFC at some point, but it was dropped. No
standard/widely implemented API for reading contacts, sending texts, etc.
Features like that would really push PWA over the edge and make it awesome.

~~~
CharlesW
> _I presume it’ll stay this way for a while (years!)._

It turns out iOS 12.2 will be "one heck of a release for Progressive Web
Apps…"[1]

[1] [https://medium.com/dev-channel/progressive-web-app-
progress-...](https://medium.com/dev-channel/progressive-web-app-progress-in-
ios-12-2-beta-1-build-16e5181f-a18cd05ca361)

~~~
paulgb
It’s a shame they haven’t budged much on push notifications. I know they have
a reputation because they are used so much for spammy purposes, but I see that
as a UI problem rather than a problem with push notifications themselves. I
think if iOS got push notifications we’d start to see non-spammy use cases,
e.g. one-click waitlist notifications and no-install turn-based games. One fun
use I've found (I have an Android so push is supported) is getting messages
with the loss at each training epoch in Keras (see the side project in my
profile.)

~~~
hn_throwaway_99
I think a reasonable solution on mobile is to only allow push notification
requests to PWAs that you have added to your home screen (i.e. "installed"),
and removing the app from your home screen should remove the notifications.
This way it will function pretty much like native apps, and you won't have to
worry as much about random requests for spammy notifications - if I've gone
through the trouble to "install" the PWA, then it's more likely I have a
higher degree of connection to that app than just some random news site asking
if it wants to send me notifications.

------
varjag
I'm amazed there's a jurisdiction in a developed nation where driving a car
with dead dashboard is legal.

~~~
roryisok
That was my first reaction. If I was pulled over in Ireland with no dash the
car would be _impounded_.

And the speedometer is great but what about the other info? Fuel gauge?
Mileage? Battery Charge? Engine faults?? Geolocation won't help with any of
those.

That said I do love the PWA approach to things and I think more people should
embrace it. Just... not for this.

~~~
avhon1
I'm comfortable with driving without any of those things -- my motorcycle, for
example, only has a speedometer and a non-resettable odometer. (It's like that
from the factory. Many street-legal motorcycles are similarly equipped.) You
know how much fuel you have by knowing the capacity of you vehicle's tank, how
many hours or miles you have driven, and your pre-existing (or found on the
internet) knowledge of you vehicle's fuel consumption.

My car's battery gauge has _never_ worked, not in the 20+ years that my father
and I have owned it. (I don't know if it worked for the one person that owned
it before him, or if it never ever worked.) The only time it would have been
helpful is the one time the alternator died. OP has an electric hybrid, so
it's a bit more useful to them, but still not critical.

The "check engine light" is helpful to people who know little about their
vehicle, telling them "please take me to a mechanic!" Otherwise, they seem to
be more annoying than helpful -- the family minivan that said "I need an oil
change!" because changing the oil yourself didn't reset the counter, or the
endless O2 sensor replacements the SUV wanted. You could learn much more, and
with less annoyance, by sticking an inexpensive ODB2 reader into your car once
in a while.

~~~
NeedMoreTea
That made me smirk. My motorcycle has a fuel gauge, but it's about as useful
as a chocolate teapot. It manages a reasonable guess if on motorways. Normal
riding and leaning and it may as well not be there. :)

I just do what I've done with every bike, reset the trip when I fill.

------
wffurr
What happens to your PWA page weight when you add tracking and ads to it?

How do I find your ad-free hobby project in the sea of search results for
"speedometer" PWAs on the open web?

What makes sure you will keep paying the, admittedly modest, hosting costs for
the app?

I think it's great you can make "tiny PWAs" but I think the article is
glossing over the incentives and discovery problem that leads to 30MB ad-
infested utility apps on the play store.

~~~
chippy
The other, largely unspoken, downside to PWAs are that the user cannot block
the tracking and ads in them when launched natively. Even though they might
run on your android where you have firefox mobile with all the adblocking
extensions enabled, and run that PWA in the browser. I'm sure this might be
another reason why PWAs are being supported by the advertising industry
platform suppliers.

~~~
Eli_P
Speaking of Firefox, there was Firefox OS which appeared to be a stillborn
child. It's app distribution model likely was close to PWA's. There's also
Chrome OS which has lived longer than its foxy twin, and is going to be
incorporated into Android according to wiki.

I think PWA is about tooling, like Google's chrome dev tools or Workbox, and
frameworks. The good side of it is sharing the codebase/API between app and
website. The bad side is you may bet on the stillborn/transient tech and will
have to rewrite or monkey-patch everything.

And ads were never the only business model, it's developer's choice. There are
apps for Android w/ decent prices and w/o annoying banners. PWA is no
different.

The _convergent evolution_ leaves nothing untouched. I think if proliferate
rate of web frameworks continues to grow exponentially, we'll have to deploy
docker images right into the browser. I mean, it was a joke. Was it?

~~~
ergothus
I was completely distracted from your point when you mentioned the "foxy twin"
of the "stillborn child". I know foxy had a double entendre here,
but...uh...disturbing choice of words.

------
albertgoeswoof
> “surely there is a app for that!” A quick look leads to speedometer apps
> with ads and 30MB download weight, and simple screen light that also have
> ads that weight in at 5MB.

I’m finally groking what rms has been banging on about for so long. It is
completely unacceptable that we are running software that does this to the
user. Users need to be empowered and able to run code that they can control.

~~~
megous
Exactly. If more people's reaction, instead of searching an app store for a
privacy respecting screen light, was to sit down and write:

    
    
        <!DOCTYPE html>
        <script>let on  true;</script>
        <body onclick="on = !on; this.style.background = on ? 'white' : 'black'">
    

and were able to easily upload it somewhere on a phone and run it locally from
a shortcut on the screen. We'd have hacker culture encouraged right there.

~~~
myfonj
Upload? Come on, just load it as dataURI, bookmark it and you have _offline_
"application" at your disposal. And as a bonus, here, have this "distributed
app store" you can even print on paper [1].

[1]
[http://zxing.org/w/chart?cht=qr&chs=350x350&chld=L&choe=UTF-...](http://zxing.org/w/chart?cht=qr&chs=350x350&chld=L&choe=UTF-8&chl=data%3Atext%2Fhtml%3Bcharset%3Dutf-8%2C%3C!DOCTYPE%20html%3E%3Ctitle%3EScreen%20light%3C%2Ftitle%3E%3Chtml%20onclick%3Don%3D!on%3Bthis.style.background%3Don%253F%27white%27%3A%27black%27%3E%3Cbody%20onload%3Don%3Dtrue%3E)

i.e. QR-coded dataURI document

    
    
        data:text/html;charset=utf-8,<!DOCTYPE html><title>Screen light</title><html onclick=on=!on;this.style.background=on%3F'white':'black'><body onload=on=true>

~~~
jahewson
My iPhone 6s doesn’t like this QR code, it just says “No usable data found”.

~~~
masklinn
The built-in QR detector is very finnicky/odd, apparently it just assumes
every payload is an HTTP URL, nothing else works even remotely.

Other applications work much better for that, though they may or may not
recognise non-http URIs e.g. here scanbot just displays the textual content
and you're on the hook for copy/pasting it wherever you need.

~~~
myfonj
Yes, I had no luck even with QR reader integrated in Nightly Android [0].

Sadly, copypasting resulting URI as plaintext is most probably the only option
for modern browsers, because any other way of top level frame navigation to
dataURI document is blocked. (Besides existing bookmark, that is.) I keep
forgetting this, sorry for hurried "in theory it must work great" shout out.

[0] [https://support.mozilla.org/en-US/kb/scan-qr-codes-
firefox-a...](https://support.mozilla.org/en-US/kb/scan-qr-codes-firefox-
android)

------
saagarjha
> A quick look leads to speedometer apps with ads and 30MB download weight,
> and simple screen light that also have ads that weight in at 5MB.

I don’t see why this means PWAs are better than apps. There’s nothing stopping
you from writing an app instead of a PWA in this case.

~~~
ynniv
I've argued both sides of this for a long time. The short argument for web
apps are that you have real control over them, which means any platform, any
time. An iOS app from five years ago is useless without recompilation with the
current toolchain, and even then it only works on iOS. A web page from 1994
still renders unmodified today, on any platform, and will for the foreseeable
future.

~~~
vb6lives
> A web page from 1994 still renders unmodified today, on any platform, and
> will for the foreseeable future.

Rose tinted glasses.

There was a time not too long ago where IE6 was virtually required because of
activex, vbscript, ie specific markup, etc.

~~~
ynniv
Yes, there are always ways to lock yourself in. If you only use features
supported by multiple browsers and consider the
[https://en.wikipedia.org/wiki/Lindy_effect](https://en.wikipedia.org/wiki/Lindy_effect),
you stand a decent chance of long term survival. What you sacrifice is
efficiency and polish, which are important, so choose wisely.

------
twic
> You see my car, a 2005 Prius, has a terrible glitch in the dashboard where
> the dash simply doesn’t work. No speedometer, no gasoline gauge, nada.

> Both the above cases would lead one to say “surely there is a app for that!”

I note from his 'about' page that the author is a proud and admirably public-
spirited citizen of Oakdale, which proclaims itself "Cowboy Capital of the
World". Seems about right.

------
hartjer
Introduce acronyms before you use them.

I'll say it again for the people in the back.

Introduce acronyms before you use them.

~~~
tw1010
You wouldn't introduce the acronym "omg" since what it stands for is so well
known. I'd argue the same is true in this scenario.

~~~
pnw_hazor
What does PWA mean? After reading some comments I guess personal web apps but
I not sure.

~~~
Thasc
Progressive web app. They're kind of like JavaScript-driven websites that
think they're native apps. They tend to be characterised by their use of
modern web standards to do some useful things, like being available offline,
and caching everything heavily to cut down load time. It's like a website you
can install, basically.

------
Twirrim
Holy crap it's scary that he's building his own speedometer like that. GPS
based speedos aren't all that accurate. Ballpark, sure, but not accurate.
There are also many circumstances under which GPS won't work.

In many countries a car without a functional speedometer is not allowed on the
road, for safety reasons.

~~~
davidzweig
I'd expect it to be better than the car speedo. Car speedos typically overread
by up to 10%, and if you fit a non-standard tyre, they can be way off.

~~~
Twirrim
GPS is susceptible to atmospheric conditions, obstructed views (4 satellites
minimum required for positioning) and a number of other factors, most of which
are undetectable at the device level. Car speedos are done with over-read
deliberately as a safety measure. Better overestimating than under. As a
driver you can make conscious decisions about what speed you're driving based
on all evidence available, including an understanding of how over/under your
speedometer returns results. With a GPS based speedometer you can't
realistically do that, you can have no idea what the accuracy percentage is at
any particular moment in time. It might be over, it might be under. No one can
make good decisions based on junk data.

------
tokyodude
Not sure if there is anything progressive about this but it's small, has a
manifest so it will supposedly get cached, and is installable I think. Wrote
it for similar reasons, sick of ads.

[https://greggman.github.io/interval-
timer/](https://greggman.github.io/interval-timer/)

------
BenoitEssiambre
This made me think about building your own services vs integrating others and
I can't help to think rolling your own makes more and more sense.

I always come back to a paper some Netflix guys mentioned in a presentation I
saw at a conference to make us appreciate how extremely hard integrating
separate systems is : "Hundred Impossibility Proofs for Distributed Computing"
([https://groups.csail.mit.edu/tds/papers/Lynch/podc89.pdf](https://groups.csail.mit.edu/tds/papers/Lynch/podc89.pdf)).
The paper basically says there are at least a hundred walls that are
mathematically proven to be insurmountable that you are going to potentially
hit when trying to keep your data corruption free across systems.

This makes systems that keep data within the bounds of a non distributed,
transactionally sound database like Postgresql comparably much more agile and
powerful as you don't hit these hundred plus walls.

After some high profile failures of integration like Oracle/IBM's "Phoenix
Pay" here in Canada, after people tried to counteract the problems with
sophisticated and costly CQRS layers to manage the connections, they are now
noticing what was mathematically proven in that paper, that you can't make a
maintainable and reliable system when data is spread across too many different
companies' servers. I think, at least for tech companies that know how to
build stuff, that the trend is now to minimize holding data in a web of
connected SAAS services, regrouping key data to their own transactional
databases.

This trend has been helped by the fact that, it is now incredibly easy to
build frontend and backend services tied to your own database. This "Tiny
PWAs" article is a good example. This guy quickly built apps so that he didn't
have to deal with ad laden ones in the app stores. As a testament to their
simplicity, these apps ended up being only 1.7KB and 800B. This would have
been impossible just a few years ago.

------
tablethnuser
This was cool and inspiring to read. I too enjoy making little apps to meet my
needs and it was educational to see how someone else structures their tiny
projects. Not just the projects themselves but also the lil domain they're
hosted at.

------
fggdgvcdderr
What is a PWA?

~~~
oneeyedpigeon
Progressive web app - [https://developers.google.com/web/progressive-web-
apps/](https://developers.google.com/web/progressive-web-apps/)

------
gardaani
If you want to see more PWAs, then go to the PWA Directory maintained by
Google:
[https://github.com/GoogleChromeLabs/gulliver](https://github.com/GoogleChromeLabs/gulliver)

Interesting, there is one speedometer there, created 2-3 years ago. The source
code is even available in GitHub. It seems that it isn't easy to find PWAs?
[https://pwa-directory.appspot.com/pwas/5079866537934848](https://pwa-
directory.appspot.com/pwas/5079866537934848)

~~~
Brakenshire
The best thing that Google could do to support pwas would be to build a good
search for them.

------
hasperdi
If you do like the programming challenge then fine. Speaking for myself, I
spend too much time working with computers already. I just want a practical
solution and spend time doing things I enjoy.

Speedometer app for example, I bought Ulysses Speedometer a long time ago. The
price is almost nothing but over the years they maintained it well and added
useful features. To me that is the most time and money efficient solution.

------
sdfjkl
Your car dashboard is broken. Instead of fixing it, you write an app that
provides a lousy workaround. Is this meant to be a bad example?

~~~
hiccuphippo
Sounds like a hack if I ever heard of one.

------
frereubu
Tiny PWAs and why they don't render until you force refresh on mobile Safari.

Edit: to be slightly less snarky, that was my experience of the linked site -
just one long scrolling blank page. This could be a really simple HTML / CSS
page. Why do it as a PWA and add more points of failure?

~~~
jeroenhd
Is it a PWA? I didn't get the normal "add to your homescreen" popup and
manually adding it to my homescreen adds a bookmark instead of opening in a
separate instance. I think this is just a regular old website with strange
javascript libraries.

The footer says it's based on Polymer and Hugo, perhaps they don't play along
well with Safari?

Strange how Safari still has trouble with PWAs, web applications were one of
the main selling points of the original iPhone...

~~~
extra88
> I didn't get the normal "add to your homescreen" popup

I thought that only happened after a PWA site had been visited a few times,
not on first visit.

Hugo is a static site generator so that has no bearing on the page's behavior
in the browser. I don't know if it's a PWA but they used Polymer in such a way
that there's no content in the HTML, which is stupid. I don't think PWAs are
antithetical to PWE, Progressive Web Enhancement.

------
myfonj
System on my old laptop had somewhat broken battery indicator in systray, so I
ended up using simple HTML page polling / listening to navigator.battery
changes [0] and displayed it, even in a "graph" form (in fact, just didn't
redraw old values, so it was a side efffect). That worked pretty well, but
then whole API became obsolete because of fingerprinting abuse. Ah, days of
yore.

[0] [https://developer.mozilla.org/en-
US/docs/Web/API/Navigator/b...](https://developer.mozilla.org/en-
US/docs/Web/API/Navigator/battery)

------
kristianp
I think it would be easier to build an Android/IOS app if you already have the
dev tools installed. Chrome APIs needed for web apps that interact with
hardware are often unstable and not supported on all hardware or android patch
from vendors. I built a simple app to submit links to HN, took maybe an hour,
without much Android knowledge.

