How Lanyrd uses HTML5 offline storage for its Mobile Web app
readwriteweb.com
How Lanyrd uses HTML5 offline storage for its Mobile Web app
1–10 of 17 posts
Re: How Lanyrd uses HTML5 offline storage for its Mobile Web app
#2We 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/
Re: How Lanyrd uses HTML5 offline storage for its Mobile Web app
#3So 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.
Re: How Lanyrd uses HTML5 offline storage for its Mobile Web app
#4We 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.l…
Even works in Mobile Firefox, that tells me you're probably not doing browser sniffing. Kudos for that.
Re: How Lanyrd uses HTML5 offline storage for its Mobile Web app
#5So 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…
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!
Re: How Lanyrd uses HTML5 offline storage for its Mobile Web app
#6We 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.l…
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.
Re: How Lanyrd uses HTML5 offline storage for its Mobile Web app
#7For 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.
Re: How Lanyrd uses HTML5 offline storage for its Mobile Web app
#8We 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.l…
"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.
Re: How Lanyrd uses HTML5 offline storage for its Mobile Web app
#9Several manual promotions to the frontpage of HN for ReadWriteWeb this week.
Did they pay HN for this kind of exposure?
Re: How Lanyrd uses HTML5 offline storage for its Mobile Web app
#10We 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.l…
"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…
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.