HN Explorer

11 comments

[ 3.7 ms ] story [ 51.6 ms ] thread
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... – 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
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!
afandian
This is broken on my browser. Just a white screen with a blue box. Using BB10 latest.
[deleted]
(comment deleted)
Feneric
Just a white screen for me too, Safari on a Mac.
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.

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), 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.