1

I have my PWA app which has this code in main.css file.

  @media all and (display-mode: fullscreen) {
    overscroll-behavior: none;
  }

And when added to Homescreen and launched in fullscreen mode (set in manifest.json), pull-to-refresh is disabled as expected.

However, in TWA case:

When I create signed APK using https://github.com/GoogleChromeLabs/bubblewrap pull-to-refresh behavior is not disabled.

Is there any solution for this?

slowloris
  • 17
  • 3

3 Answers3

1

Ended up making a Javascript workaround:

First I updated twaManifest in build.gradle file.

The following line:

launchUrl: '/?utm_source=twa'

And I added this piece of js to add css class to body element when twa query param is detected:

export const disablePullToRefreshTWA = () => {
    const urlParams = new URLSearchParams(window.location.search);
    const myParam = urlParams.get('utm_source');
    if (myParam === 'twa') {
        document.body.classList.add('twa-app');
    }
};

and my main.css now has:

body.twa-app {
  overscroll-behavior: none;
}

Edit: I kept my pwa (display-mode) media query for PWA add to HomeScreen case

slowloris
  • 17
  • 3
  • Don't confuse the real behavior of [UTM parameters](https://en.wikipedia.org/wiki/UTM_parameters) by misusing them. It'll bite your analytics, if you use any or it might be stripped by a privacy-based extension. – Peter Badida Sep 28 '21 at 16:28
1

That's All

body {
overscroll-behavior: contain;
}
Kartik Jain
  • 49
  • 1
  • 7
0

Chrome on Android refreshes the page when you scroll past the top boundary. This can be prevented by setting "overscroll-behavior" to "none" on the "html" element.

html { margin: 0; overscroll-behavior: none; }

https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior#preventing_an_underlying_element_from_scrolling

Marcus
  • 1
  • 1