Webapp close by gesture

[rexydye]

It would be nice if there was an option to disable closing a webapp with a gesture. I have an interactive map in my webapp and if I drag it down the web app may close.

[maybephilipp]

I've investigated @tapswap_bot (props to them) source code (webkit debug) and found the solution. I've also made the scrolling working (their solution was breaking it).

So steps to implement:

1. Document/body magic (without this touchmove step doesn't fix the problem for some reason):

(tailwind style) document: h-auto, overflow-hidden body: min-h-screen h-screen overflow-hidden

js code:

const overflow = 100
document.body.style.overflowY = 'hidden'
document.body.style.marginTop = `${overflow}px`
document.body.style.height = window.innerHeight + overflow + "px"
document.body.style.paddingBottom = `${overflow}px`
window.scrollTo(0, overflow)

2. Block touchmove (block scroll on doc and body, because of the first step. Make body's child scrollable and then...):

let ts: number | undefined
const onTouchStart = (e: TouchEvent) => {
  ts = e.touches[0].clientY
}
const onTouchMove = (e: TouchEvent) => {
  if (scrollableEl) {
    const scroll = scrollableEl.scrollTop
    const te = e.changedTouches[0].clientY
    if (scroll <= 0 && ts! < te) {
      e.preventDefault()
    }
  } else {
    e.preventDefault()
  }
}
document.documentElement.addEventListener('touchstart', onTouchStart, { passive: false })
document.documentElement.addEventListener('touchmove', onTouchMove, { passive: false })

After that it works perfectly, no rage scroll breaks it. The only concern is that maybe some device has reversed scroll direction, in that case we will need to reverse touchmove condition logic, but anyway - it's working.

[morettyCat]

I have an app which is made with WEBGL. So i have a canvas full screen on the telegram viewport. This solutions is not working on this kind of apps because they are no the same DOM kind. It's a shame they can't disable this option : ( There will never be good games if this can't be achieved,,,,