Show HN: PullToRefresh.js

[greggman]

Pull to refresh is an anti-feature IMO. It makes me lose work all the time.

I'm entering something. I need to reference something else off the screen. I drag down to see the thing off the screen. I pull too hard and ... the page is refreshed and I've lost my work

Please do not use pull to refresh on your site. And, if you're a browser ux designer please remove it. It's arguably as bad as using backspace for "previous". Possibly worse since most people have no need to refresh and those that do have other ways to do it.

[rsoto]

> I'm entering something. I need to reference something else off the screen. I drag down to see the thing off the screen. I pull too hard and ... the page is refreshed and I've lost my work

That's not an anti-feature, that's poor UX. If you're entering data into a form that might get lost, the UX team should add an event that checks if you're trying to go somewhere else (or reload), to confirm whether that's the action you want to do.

Your argument against pull to refresh could be the same for the reload, back and forward buttons in your web browser. Also, against the URL/search bar, because it might lose your progress.

And all is fixed with a confirm() on the unload event, and it has nothing to do with the pull to reload feature.

[ww520]

There are times and places for different functionality. Pull to refresh is great for a read-only page.

[josho]

By 'pull too hard' I assume that you mean scrolling back to the top. At least on iOS tapping at the top of the screen performs a scroll to top. Knowing that you'll likely never accidentally pull too hard again.

[blauditore]

While it works quite nicely, it's maybe not a good idea UX-wise to use it on general websites, as it overrides native browser behaviour (at least for some mobile browsers). For example, I hate when websites (on desktop) override keyboard shortcuts like Ctrl+F or F5, or prevent the default right-click context menu in order to keep me from downloading an image.

For HTML/JS apps though it's a whole different story and might help giving it much more native look and feel.

[rsoto]

I agree with you, I also hate when websites hijack standard keyboard shortcuts. Altough I don't see this being the case: as it requires touch events, and even if you're on a touch-capable laptop or desktop PC, it won't override much (maybe the native pull to refresh from Chrome, at most).

Also, what I said in a previous comment: maybe you want consistency across browsers/platforms or branding, customizing how it looks. And maybe you don't want to refresh the whole page, maybe just one section calling a JSON API, or perhaps you have a heavy job that requires a worker.

[rsoto]

This library was born due to other existing libraries requiring to modify the layout's markup. Since we mostly use the flexbox trick to create a sticky footer, this would have required quite a rewrite.

The focus on PullToRefresh.js is to manipulate the DOM and add the elements programatically, and allow its own proportions to push down the content.

[artursapek]

You should make it clear the demos don't do anything on a non-mobile device.

EDIT: point taken. Non-touch device

[rfolstad]

i was hoping this was a library that would help me to disable pull to refresh. Anyone know of a good library that can help to disable this in browsers?

Pull to refresh on mobile chrome or safari is really terrible ux for web apps. It's ok for content sites but if you have an app that you want to behave like a native app it's really terrible. A good example is maps.google.com. Even if you install it as a home screen app it still has the stupid pull to refresh gesture in chrome.

I wish there was some way to disable it in browsers. I have tried many things like position: fixed or overflow-y:hidden but these have other side effects like preventing the keyboard from repositioning the window in chrome or safari.

In general if a web browser overrides any touch gestures they should be able to be disabled by the page without having to handle every touchmove yourself.

[rsoto]

I don't think you need a library for that, it's just a few lines. I'm currently a little busy, but there's one touch event that disables those «features» (can't remember which).

I'd suggest you to download the library and delete some of the lines for the callbacks on the touch events, maybe you can isolate it and figure out what is achieving that result.

Or, you could try something like this:

    PullToRefresh.init({
      mainElement: '#main',
      distMax: 0,
      onRefresh: function(){}
    });

[MichaelApproved]

Does anyone work with Ionic framework? Would something like this be a good replacement for their 1.x pull to refresh implementation? The one that comes with Ionic is a bit buggy and I'm looking to swap it out with another option.

[rsoto]

I'm not familiar with Ionic, but thanks for the compliment! (Implying it's less buggy haha). I'd love it if the library can be in it. Maybe open a PR/issue?

[kinduff]

This is very nice. I've seen many solutions out there to accomplish this but got to say I love the style, implementation and the extensibility it has.

Very well done, looking forward for more products from you two.

[rsoto]

Thanks bro, when I grow up I want to be just like you. We should go out to grab some drinks soon!

[ldom22]

mexican company in HN front page! fellow mexican here

[rsoto]

Hello, how you doin'? What's your company?

[evo_9]

I've wondered for a while why this isn't built into all browsers it such a natural and initiative way to handle refreshing a webpage.

Edit: typo

[rsoto]

That's actually a feature, at least on mobile. Chrome has its native pull to refresh.

The use case we're aiming with this library is that not always you want to refresh the whole page; sometimes you want to update just one section of the app (think Gmail), do something deferred with a worker, or set a timeout.

Also, you want to be consistent across all browsers/platforms, and maybe add a little touch of personality or branding [1].

So, while I agree with you it should be standard, and maybe it should have an API, it has to be flexible enough for every and each thing you want to achieve... so you'll need a library, and we're full circle.

1: https://muz.li/blog/refresh-inspiration/

[underdown]

Its the only reason I dont use firefox on android - no pull to refresh.

[donjh]

Really clean - has a great feel to it. Nice work!

[grav]

Very nice feeling to it, although it's lacking overscroll (or overflow scroll) on iOS

[rsoto]

Thanks! Yeah, it's the same with the native pull to refresh feature on Chrome; it is overridden when the site has certain touch events, as there's no standard to prevent the default behaviors. I guess it's the same with Safari, which I imply you're referring to.

[MichaelApproved]

> lacking overscroll

What does that mean?

[k__]

chrome uses pull to refresh already. So pulling refreshes the whole page AND triggers the library.

[rsoto]

What OS/version are you on currently? When Chrome mobile detects there's a touch event, it prevents the native reload feature to be triggered.

[ChrisArchitect]

wasn't this patented by Twitter awhile back?

[jamiesonbecker]

The unanimous Supreme Court Alice v. CLS Bank decision in 2014 destroyed the validity of most software patents, for better or worse.

http://www.ipwatchdog.com/2015/02/25/the-road-forward-for-so...

[Kwpolska]

And on desktops? And how does this work on Chrome on mobile (which defaults to pull-to-F5)?