Enable Pull-to-refresh for certain pages

Flow
1

In our company we have an IDP system that handles user logins and has a session timeout. To re-enable the login we sometimes require to refresh the current page. We would like to have the user refresh the page by scrolling down (as is the norm with webpages on mobile).

Now it is the case in Vaadin, that on mobile devies, the “pull-to-refresh” feature (scrolling up when already on top of webpage) is disabled. We would like to enable this feature for certain pages.

I have found this discussion where a similar issue is discussed:
https://vaadin.com/forum/t/how-to-make-pwa-to-refresh-on-pull-down/164811
The provided Vaadin addon does not seem to be maintained actively and it is also not an optimal solution to have to wrap everything in a Scroller.

Another angle was to set the “overscroll-behavior-y” CSS property, but this also did not solve the issue.

Is there a possibility to enable the “pull-to-refresh” feature? How can this be done? Are there any preferred alternatives?

2

This is not a Vaadin problem

If you are on iOS There is no way to get the native gesture back in standalone mode.

Add a refresh button in your app layout.

1 Like
3

I can confirm, that it works on Android.

It might be a style issue in your application. I once also had the issue, that the pull to refresh did not work anymore and the reason was an overflow : hidden on the html element (adding it on the body has the same effect).