

How Lanyrd uses HTML5 offline storage for its Mobile Web app - simonw
http://www.readwriteweb.com/mobile/2012/01/how-lanyrd-uses-html5-for-a-gr.php

======
simonw
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/>

~~~
jbail
"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.

~~~
jaffathecake
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.

------
a_alfredo
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...](http://www.readwriteweb.com/mobile/2012/01/how-lanyrd-uses-
html5-for-a-gr.php)

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

~~~
simonw
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).

------
digitallimit0
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.

~~~
jaffathecake
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.

~~~
jamesRaybould
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!

~~~
jaffathecake
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?

~~~
jamesRaybould
Thanks for that its really appreciated!

------
geuis
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.

~~~
jaffathecake
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!

