Pull-to-Refresh in PhoneGap and Topcoat Applications

Pull-to-refresh has become a standard UI pattern to refresh lists in mobile applications, and there is no reason not to use it in PhoneGap / Cordova applications.

A first option is to use iScroll, which has pull-to-refresh built-in. That’s a great option for older OS versions or platforms that do not support touch-based scrolling natively.

But on platforms that support it (with -webkit-overflow-scrolling: touch), you don’t want to give up the benefits of native scrolling just to implement pull-to-refresh.

Damien Antipa, a colleague at Adobe, wrote a nice library showing how to implement pull-to-refresh with native scrolling.

I recently used it in a PhoneGap application built with the Topcoat CSS toolkit. Damien’s library worked great as-is, but I changed a few styles and assets to match the Topcoat look.

You can see the result here:

The source code for this example is available here.

Damien’s orginal library is here.

  • Jerry

    So does the pull refresh work on android phones?

  • hello ,i am phonegap user,i was search in google modular backbone js and jqm 1.3.2. i want to create phonegap app using jqm 1.3.2 and backbone js, can i request example for jqm and backbone js that use many page such as page.html, page2.html and use modular backbone js..
    thanks :D

  • Mike

    Holy Bujeebus you almost lost me with that horrendous Ghostbusters music. Thankfully it was only 38 seconds.

  • Nice plugin and great example app.
    But I wonder how to implement this UI pattern with backbone.js architecture?

    I tried to put it after render of app.views.HomeView, but it works correct only first time.

    It will be amazing to extend article “Building Modular Web Applications with Backbone.js and RequireJS — Sample App” ( or even without RequireJS) with this UI pattern .

  • toast

    Hi, yeah, not working on Android for me (not tested any other platforms) also the link to Damiens library is not working.
    I downloaded the github and tried to put it pretty much as-is onto my phone so not sure what the issue is (phonegap -v = 3.1.0-0.15.0)

    thanks,
    t

  • Nice plugin and great example app.

  • Wouter

    Doesn’t work anymore? I tried the Damien’s lib first. Then after i couldn’t get it to work, i tried this example. I see the list view, header and all, but no pull-to-refresh icons or text appears.

  • Hi everyone, i have the same issue. The library doesn’t work anymore.

  • This article will assist the internet people for creating new web site or even a weblog from start to end.

  • sni

    I have the same problem, the lib doesn’t work anymore. Tested on Galaxy Nexus 7 and Samsung Galaxy S

  • YouSung

    Is this library ONLY for iOS device? even though it’s using PhoneGap?

  • daf182

    It does not work on Android 4.0.4.

  • goodv very nices

  • Thanks you admin coenraets YarbayALf mjks ;b

  • Jeremy

    I can’t get this to work on Adnroid 4.0+
    Is it compatible?

  • quality, reliable, cost-effectiveness and the associated jobs are done imalattan.profesyonel team.http://jonsunsport.com/spor-coraplari.html

  • duka sizlerle.

  • workeep great! Thanks

  • Jack

    I love this, thanks for sharing it. Also, would like to know your opinion on my library – https://github.com/Cleveroad/FireworkyPullToRefresh It’s called FireworkyPullToRefresh – creative “pull to refresh” effect.

css.php