iPhone ‘Pull To Refresh’ in JavaScript

When it first arrived in iPhone apps, the simple “pull to refresh” action was instantly hailed as a genius bit of user interaction engineering.

It’s an ultra-intuitive way of refreshing the displayed page content by simply pulling the page down with your thumb, then releasing it — sort of like pulling a lever on a slot machine. The official Foursquare and Twitter (nee Tweetie) apps use it, so if you’re into social networking, you’re already familiar. But so far, its use has been limited to native apps.

Now developer Wayne Pan has created the same behavior in JavaScript for use in web apps. It’s just a proof of concept implementation at this time, and he’s found some of the limitations.

Point your mobile browser at waynepan.com/s/pull to test it. It’s a little jerky, but it does work. And his code doesn’t rely on any JavaScript libraries, so with a little tweaking, this behavior can be integrated into any web app and will work on Android and iOS devices. Nice work!

[Hat tip to Dion]

See Also: