4 ms·

The Guardian Release Progressive Web App to Coincide with Rio Games

18 points by rich_harris 10y ago

mxstbr 10y ago
Would love a blog post explaining how you did it and some of the challenges you had to overcome!
- rich_harris 10y 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/fd6c3c73e6e707e312d7c5d7d0f3b2f9 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 https://gitlab.com/Rich-Harris/phonograph
madspindel 10y ago
Is it really a progressive web app if it doesn't work on a desktop browser?
- rich_harris 10y ago
  It's, err... a running app. Most people don't go running with their desktop!
afandian 10y ago
This is broken on my browser. Just a white screen with a blue box. Using BB10 latest.
- deleted 10y ago
  [deleted]
- Feneric 10y ago
  Just a white screen for me too, Safari on a Mac.
Noseshine 10y 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_harris 10y 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-app-marathon-course-riorun https://www.theguardian.com/sport/2016/aug/06/rio-running-ap.... Obviously getting a false positive – thanks, we'll look into it!
bhudman 10y 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_harris 10y ago
  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.

18 points by rich_harris 10y ago

mxstbr 10y ago

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

rich_harris 10y 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/fd6c3c73e6e707e312d7c5d7d0f3b2f9 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 https://gitlab.com/Rich-Harris/phonograph

madspindel 10y ago

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

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

afandian 10y ago

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

deleted 10y ago
[deleted]
Feneric 10y ago
Just a white screen for me too, Safari on a Mac.

Noseshine 10y 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_harris 10y 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-app-marathon-course-riorun https://www.theguardian.com/sport/2016/aug/06/rio-running-ap.... Obviously getting a false positive – thanks, we'll look into it!

bhudman 10y 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_harris 10y ago
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.