Swipe down to refresh (android chrome) not working?

Questions
1

In chrome on android, on a typical website I can swipe down (pull) to refresh the page but on F7 v8.3 it doesn’t seem to work.

I created a blank website using these params and no changes and it has the same issue.
(I ran npm run dev to host it and checked on my phone)

{
	"cwd": ""C:\\...",
	"type": [
		"web"
	],
	"name": "TestF7",
	"framework": "core",
	"template": "split-view",
	"bundler": "vite",
	"cssPreProcessor": "scss",
	"theming": {
		"customColor": false,
		"color": "#007aff",
		"darkMode": false,
		"iconFonts": true
	},
	"customBuild": false
}

Any ideas? On websites built from before v8 I’ve tested, they can pull to refresh.

2

You need to post you code, with this json is impossibile to help you

3

What would you like me to post? I created a completely blank app from those parameters using framework7 version 8.3.

4

You’ve implemented the PTR component right? Show us the code

5

I haven’t implemented framework7’s PTR component. I’m talking about android chrome’s built-in pull to refresh. I am literally using a blank app with 0 changes.

My guess is that some panel or something behind the scenes is calling preventDefault() preventing chrome from being able to refresh the page.

Here’s an example. I can PTR the framework7 website but not my basic one.

2 new items by Sam DePoule
6

The type of pull to refresh on a website, is implemented by the browser app (on Android or iOS). Although a Cordova app uses the same webview, if you want the same pull to refresh inside your app, for example to refresh a list view, you have to implement this using custom code.

It work’s quitte straight forward. You first have to add the correct wrappers/classes, and then add an event listener to catch the PTR event and refresh your content. This event handler can be inside a specific content component (recommended) or in a global app component.

7

Hello,

Set this in your CSS file

html {
  overscroll-behavior: auto;
}

This will enable the pull-to-refresh effect in Android chrome.

Reference: https://developer.chrome.com/blog/overscroll-behavior

8

Man thanks, literally the first thing I looked into but didn’t try setting it to auto. :man_facepalming:

9

Please note that while this solution might work to mimic native browser behaviour, plugins might not work after refresh because many plugin bindings only work on first page load. This method is meant to refresh a webpage, but might not work correctly on a hybrid app.

That is why a separate PTR method exists in Framework7 :slight_smile: