Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How Lanyrd uses HTML5 offline storage for its Mobile Web app

readwriteweb.com

Post reply on HN
Print view View original

11–17 of 17 posts

Re: How Lanyrd uses HTML5 offline storage for its Mobile Web app

#11

Post by jaffathecake »

digitallimit0 wrote: post #7

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 h…

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.

Re: How Lanyrd uses HTML5 offline storage for its Mobile Web app

#12

Post by 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...

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

Re: How Lanyrd uses HTML5 offline storage for its Mobile Web app

#13

Post by jamesRaybould »

jaffathecake wrote: post #11
digitallimit0 wrote: post #7

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 h…

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 conferenc…

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!

Re: How Lanyrd uses HTML5 offline storage for its Mobile Web app

#14

Post by simonw »

jamesRaybould wrote: post #13
jaffathecake wrote: post #11

Earlier quoted context omitted.

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 conferenc…

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.

Re: How Lanyrd uses HTML5 offline storage for its Mobile Web app

#15

Post by simonw »

a_alfredo wrote: post #12

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

Re: How Lanyrd uses HTML5 offline storage for its Mobile Web app

#16

Post by jaffathecake »

jamesRaybould wrote: post #13
jaffathecake wrote: post #11

Earlier quoted context omitted.

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 conferenc…

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!

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?

Re: How Lanyrd uses HTML5 offline storage for its Mobile Web app

#17

Post by jamesRaybould »

jaffathecake wrote: post #16
jamesRaybould wrote: post #13

Earlier quoted context omitted.

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!

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!
Post reply on HN