The Guardian Release Progressive Web App to Coincide with Rio Games

https://riorun.theguardian.com/

by rich_harris • 10 years ago

18 10 10 years ago

riorun.theguardian.com

mxstbr• 10 years ago

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

rich_harris4• 10 years ago

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

madspindel• 10 years ago

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

rich_harris4• 10 years ago

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

afandian• 10 years ago

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

Feneric• 10 years ago

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

Noseshine• 10 years ago

"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_harris4• 10 years ago

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!

bhudman• 10 years ago

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_harris4• 10 years ago

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.

The Guardian Release Progressive Web App to Coincide with Rio Games

Related Stories