
The Guardian Release Progressive Web App to Coincide with Rio Games - rich_harris
https://riorun.theguardian.com/
======
Noseshine
"Please rotate your screen" (on an ultrabook)

I have no idea what I'm looking at (since that is all I get). Whatever the
intent, why does my screen orientation matter? There certainly is plenty of
space.

At the very least the headline is incomplete - having just that headline as
information I can make no sense of the result.

~~~
rich_harris
Ah, it's supposed to detect that you're on desktop and redirect you to
[https://www.theguardian.com/sport/2016/aug/06/rio-running-
ap...](https://www.theguardian.com/sport/2016/aug/06/rio-running-app-marathon-
course-riorun). Obviously getting a false positive – thanks, we'll look into
it!

------
bhudman
Very cool! I can see that this app is doing using react, and would like to
learn how to do an app like this. Is there something you'd recommend that
takes about rendering an app correctly on all these phones?

Does not necessarily have to use react or the podcast.. any git repos would be
helpful :)

~~~
rich_harris
It's not using React, it's using Ractive
([http://ractivejs.org](http://ractivejs.org)), which we use for all of our
projects. It was designed with that goal (among others) in mind – making
cross-browser DOM quirks something we don't need to worry about.

------
afandian
This is broken on my browser. Just a white screen with a blue box. Using BB10
latest.

~~~
Feneric
Just a white screen for me too, Safari on a Mac.

------
madspindel
Is it really a progressive web app if it doesn't work on a desktop browser?

~~~
rich_harris
It's, err... a running app. Most people don't go running with their desktop!

------
mxstbr
Would love a blog post explaining how you did it and some of the challenges
you had to overcome!

~~~
rich_harris
We'll definitely be writing about this in the next few days or so. The two
biggest hurdles were getting our heads around service workers – which prompted
me to write [https://gist.github.com/Rich-
Harris/fd6c3c73e6e707e312d7c5d7...](https://gist.github.com/Rich-
Harris/fd6c3c73e6e707e312d7c5d7d0f3b2f9) – and audio.

Audio on mobile is just a disaster, because you can't trigger media playback
without a user gesture unless you use an AudioBufferSourceNode, which we found
can easily crash a phone (because the entire clip has to be decoded and held
in memory, and we can have several clips that are several minutes long in
playback or standby at any given moment). We created a library called
Phonograph to work around these limitations by decoding small snippets of
audio on the fly (using the fetch API to stream, where possible):
[https://gitlab.com/Rich-Harris/phonograph](https://gitlab.com/Rich-
Harris/phonograph)

