How Lanyrd uses HTML5 offline storage for its Mobile Web app | Hacker News Reader

How Lanyrd uses HTML5 offline storage for its Mobile Web app

readwriteweb.com

60 pointssimonw15 comments

We launched our Mobile Web app today, making the key features from our iPhone app available to Android, Blackberry and other mobile devices.

We're making extensive use of HTML5 offline storage in order to keep offline copies of event schedules and attendee directories - so even if our users are abroad on a bad data plan or are at an event with poor/no wifi they can still access the data.

Check it out here: http://m.lanyrd.com/

The ReadWriteWeb article has some of the technical details. Our blog entry about the new app is here: http://lanyrd.com/blog/2012/mobile-web/

Even works in Mobile Firefox, that tells me you're probably not doing browser sniffing. Kudos for that.

Firefox mobile didn't give us any problems at all, it just did as it was told. Lovely browser.

ahem Although we have fallen into the browser sniffing trap once. Opera's ApplicationCache doesn't support 'FALLBACK' which we heavily rely on. I failed to write a reliable feature test in time for launch, so we're testing for window.opera in the current version. I'll flagellate myself accordingly.

"All our imagery is double-resolution, so everything looks sharp on high-density devices..."

But you also use normal resolution images, right?

Many (if not all) low resolution Android devices aren't able to scale images down by using background-size. Since it doesn't work, the UI gets blown out by huge images that haven't been scaled.

Just curious on that implementation detail since dual sized images for low to high res screens is something I deal with in my day to day mobile web work.

Nice work though. The mobile site looks really good.

We were hoping to get away with a single double density sprite, but alas, as you point out, not all devices support background-size. Not just old Android, but also old Blackberry (pre webkit), and Opera Mini.

We feature detect background-size in the head of the page and add a class name to the html element. We need to browser sniff opera mini as it gives a false positive on the test.

We only offline cache the larger sprite, assuming browsers that support appcache also support background-size.

Lovely implementation, I'd like to hear more about the cross over between mustache templates and django.

As read in here http://www.readwriteweb.com/mobile/2012/01/how-lanyrd-uses-h...

Also did you have to do all the testing device by hand or do you use a service for this?

We have a box of mobile phones in the office - Jake even had to take them down to the local London Underground station to check how they behaved with no signal (since airplane mode doesn't necessarily behave the same way as a genuine weak or gone signal).

For the Lanyrd team: when exactly are you caching the data? Is the expectation that I browse the events I'm going to attend in advance while logged into the app and you dump all viewed events into localStorage? As well, on first visit to the site I imagine you have some sort of if-storage-is-empty-and-logged-in dump to get the site scripting and design in there, and then just feed off of that afterward?

I'd love to hear more of the technical side as I'm just getting into HTML5 but I haven't sunk my teeth into some of the crazier aspects outside of playing with canvas and familiarizing myself with JavaScript and its associated libraries.

You're not far off...

To cache everything you're tracking/attending visit http://m.lanyrd.com/calendar/yours/ - the root url redirects here if you're logged in.

The data for each conference is versioned, you can see the version number as data attributes on each list item. If the data you have doesn't match that version number, a few XHR requests are triggered to fetch the latest data.

Also, if you look at a conference page you're tracking or attending while online, we do a data-version check for that conference and update if needed.

I'm writing up an article on all the troubles we had with ApplicationCache, for there were many. LocalStorage was extremely simple & useful though.

I'm in the middle of a short build (~5 days) mobile app that is using app cache and annoyingly I can't see to get it working on iOS, all the standard web browsers seem fine but iOS is being a PITA. I don't suppose you have any top tips?

That said more technical details would be awesome - I'd love to see how other people are doing things like this!

Jake has an article in the works that will go in to this stuff in much more detail - keep an eye on http://lanyrd.com/blog/ for the link when he finishes it.

We didn't have to do anything special to get offline stuff working in iOS, sounds like we're lucky we didn't hit the problem you're having.

Here's a simple demo that works in iOS http://appcache-demo.s3-website-us-east-1.amazonaws.com/xhr/ - that might make it easier to see what you're doing differently. Are you serving the manifest with the correct content-type header, for instance?

Thanks for that its really appreciated!

So I just tried it out but it doesn't seem to work as advertised.

The mobile interface is really snappy and one of the best I've seen. I tapped through to a few events, looked up some speakers, etc.

Then, in order to see the purported offline mode, I set my phone to airplane mode. All I get from the mobile lanyrd site after that a message that I was in offline mode.

I was expecting that at least the events I had been perusing would still have been cached and viewable. If you're expected to be signed in for the caching bit to work, I guess that's ok but there should at least be a notification somewhere. Ideally it should just work.

At the moment, the event you're tracking or attending are available offline. So yeah, you need to log in to trigger offline caching. When you view the 'Your events' page you'll see the events being cached if your device supports it (a reasonably recent webkit & firefox).

Whether you should be able to save events offline without logging in has been a bit of a debate in the office, so this feedback is extremely useful. Many thanks!

Reply on news.ycombinator.com