Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS PWA: How to (re-)enable pull to refresh?

There are several questions on Stack Overflow asking how to disable pull-to-refresh, whether when their web-apps are visited in the native iOS Safari browser, or as a standalone (Homescreen) application.

My question is how to enable it. Somehow with my app, the pull-to-refresh functionality works well with Safari, but not when the app is open as a standalone Homescreen application.

I'd like to add any relevant information needed, except that I don't know what to specify. Here's the abbreviated manifest.json:

{
  "name": "x",
  "short_name": "x",
  "description": "x",
  "dir": "auto",
  "id": "https://www.myapp.io/",
  "lang": "en-US",
  "display": "standalone"
}
like image 709
zerohedge Avatar asked Jan 18 '26 14:01

zerohedge


1 Answers

Seems like pull to refresh is explicitly disabled for standalone and fullscreen PWA apps on iOS.

I ended up reimplementing it with a standalone check, pulltorefresh.js, and some javascript glue.

const standalone =
  navigator.standalone ||
  window.matchMedia("(display-mode: standalone)").matches;
if (!standalone) {
  return; // not standalone; no pull to refresh needed
}

PullToRefresh.init({
  onRefresh() {
    location.reload();
  },
});
like image 181
Joonas Avatar answered Jan 21 '26 06:01

Joonas



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!