CODEWITHSUNDEEP
progressive-web-appschromiumtrusted-web-activitytwabubblewrap
slowloris
slowloris

Reputation: 31

How do I disable pull to refresh behavior in Trusted Web Activity (TWA)?

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?

Upvotes: 1

Views: 1205

Answers (3)

Marcus
Marcus

Reputation: 1

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

Upvotes: 0

Kartik Jain
Kartik Jain

Reputation: 74

That's All

body {
overscroll-behavior: contain;
}

Upvotes: 2

slowloris
slowloris

Reputation: 31

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

Upvotes: 1

Related Questions