
Show HN: PullToRefresh.js - rsoto
https://www.boxfactura.com/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.

~~~
kaishiro
I actually agree with most of what you're saying, except for the part about it
being the same argument for reload, etc. Nobody is overloading the reload
button to accomplish some other featurette. But pull to reload _is_
overloading an existing paradigm - scrolling down - and implementing an
entirely unrelated piece of functionality - loading new content.

~~~
systoll
Where it's appropriate, pull-to-refresh _isn 't_ unrelated functionality.

In a reverse chronological listing, 'new' stuff is always at the top. Pull-to-
refresh refreshes the listing, grabbing whatever could be placed 'above' the
page, when you scroll past the top of what's currently loaded. it's just the
other end of 'infinite scrolling'.

Triggering `location.reload()` when you scroll past the top is a bad idea --
about as appropriate as triggering `location = nextPage`, when you get to the
bottom. But most pull-to-refreshes don't do that.

------
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 _

~~~
Retr0spectrum
It works in desktop Firefox if you have a touchscreen.

~~~
rsoto
It actually works virtually in every browser, if it has touch emulation.

------
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?

~~~
MichaelApproved
[http://ionicframework.com](http://ionicframework.com) is a hybrid framework
built on top of Cordova. It's used for creating apps using HTML/CSS/JavaScript
while still having access to native device features.

Specifically, Ionic uses AngularJS as part of it's framework. So, implementing
this would be a little more work than drop-in but I'm interested in trying,
when I have some free time.

Thanks for creating it.

------
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?

~~~
ldom22
big semiconductor company in guadalajara

------
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/](https://muz.li/blog/refresh-
inspiration/)

~~~
evo_9
That's even more awesome thx! Can't wait to add this to my side project, nice
work man!

~~~
rsoto
Maybe we will be showcasing the webapps that use PulltoRefresh.js, when you're
done, could you open an issue with your side project's URL?

~~~
evo_9
I will once it's public, it's a side project for me but not my business
partner. ;)

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

~~~
MichaelApproved
> lacking overscroll

What does that mean?

~~~
rsoto
It's hard to explain, as I'm not on OSX/iOS, but I'm 90% sure it's when you
scroll up too fast and you can see «behind» the website.

Because of the touch events, the browser decides to not use those features, as
it might affect it. Since there's no standard way to do it (like a meta tag),
the browser has to decide with the events it has.

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

~~~
k__
Chrome Dev 56.0.2919.3 Android 6.0.0

~~~
rsoto
I'll take a look, but I have the same Android version, and I'm on Chrome 54,
and everything works fine.

------
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...](http://www.ipwatchdog.com/2015/02/25/the-road-forward-for-software-
patents-post-alice/id=55142/)

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

