51 comments

[ 0.20 ms ] story [ 98.0 ms ] thread
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.

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

EDIT: point taken. Non-touch device

It works in desktop Firefox if you have a touchscreen.
It actually works virtually in every browser, if it has touch emulation.
Little tip for devs: on chrome you can use the mobile device simulation mode to test these kind of libs.
(comment deleted)
mexican company in HN front page! fellow mexican here
Hello, how you doin'? What's your company?
big semiconductor company in guadalajara
chrome uses pull to refresh already. So pulling refreshes the whole page AND triggers the library.
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.
Chrome Dev 56.0.2919.3 Android 6.0.0
I'll take a look, but I have the same Android version, and I'm on Chrome 54, and everything works fine.
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.
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?
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.

Very nice feeling to it, although it's lacking overscroll (or overflow scroll) on iOS
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.
> lacking overscroll

What does that mean?

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.

Really clean - has a great feel to it. Nice work!
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

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/

That's even more awesome thx! Can't wait to add this to my side project, nice work man!
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?
I will once it's public, it's a side project for me but not my business partner. ;)
(comment deleted)
Its the only reason I dont use firefox on android - no pull to refresh.
I also use Firefox on Android, but don't really mind whether it has pull to refresh native, or not, I just <3 Firefox.
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.

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.

You can choose not to use the library created by OP for your websites and not share it with your friends. Stop selling your hatred bullshit as some sort of a standard that the entire planet must adhere to.

Hackernews should probably strip out the word hate and its synonyms because as it is it is painful to see smart people going full dumbass on this forum.

... you do realize that you are replying to OP, right? rsoto submitted this and is all over the comments having good discussions with other HN commentators. He/she is simply discussing use-cases for the product created.
Dang! I see it now, the comment was intended only for the parent though. I guess it's better left like this only.

It's only sad when developers sell UX gyaan on standards on one hand and screw the same standard with things like react elsewhere; only because some large corp says it's cool.

> Stop selling your hatred bullshit

I realize you weren't abusing the person you thought you were, but that's no excuse for breaking HN's rules this badly. Since we've warned you repeatedly about this, we've banned your account.

If you don't want it to be banned, you're welcome to email hn@ycombinator.com. We unban accounts if people give us reason to believe they'll follow the rules in the future.

And on desktops? And how does this work on Chrome on mobile (which defaults to pull-to-F5)?
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.

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(){}
    });
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.

Thanks bro, when I grow up I want to be just like you. We should go out to grab some drinks soon!
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.

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

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

Now you have an inconsistent ux which is also frustrating and a frustrating confirm question that keeps appearing
There are times and places for different functionality. Pull to refresh is great for a read-only page.
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.
Wrong. If the page is long I want to scroll up not go to the top. I don't know where the top is so I'll scroll scroll scroll refresh !;$@&!?$&!