The Guardian Release Progressive Web App to Coincide with Rio Games(riorun.theguardian.com)
riorun.theguardian.com
The Guardian Release Progressive Web App to Coincide with Rio Games
https://riorun.theguardian.com/
11 comments
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.... Obviously getting a false positive – thanks, we'll look into it!
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 :)
Does not necessarily have to use react or the podcast.. any git repos would be helpful :)
It's not using React, it's using Ractive (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.
Is it really a progressive web app if it doesn't work on a desktop browser?
It's, err... a running app. Most people don't go running with their desktop!
Would love a blog post explaining how you did it and some of the challenges you had to overcome!
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... – 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
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
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.