I came across a rather interesting case when developing a web application for Telegram.

The bottom line is that I need to get permission (or refusal) from phone users (specifically Iphone owners) on the first application, and also that I could use the phone’s accelerometer to identify certain events.

Locally – it works (if anyone is interested, zrok is used as a layer, due to the fact that Telegram does not open the local version without certificates)

However, after deployment, nothing stops working on the iPhone. Things are much better with Android)

Here are the parts of the code that I wrote with the purpose of explicitly obtaining permission from the owner of the iPhone….

  async approve(): Promise<boolean> {
    if (typeof this._approved === 'undefined') {
      if (!('DeviceMotionEvent' in window)) return (this._approved = false)
      try {
        type PermissionRequestFn = () => Promise<PermissionState>
        type DME = typeof DeviceMotionEvent & { requestPermission: PermissionRequestFn }
        if (typeof (DeviceMotionEvent as DME).requestPermission === 'function') {
          const permissionState = await (DeviceMotionEvent as DME).requestPermission()
          this._approved = permissionState === 'granted'
        } else this._approved = true
      } catch {
        this._approved = false
      }
    }
    return this._approved
  }
export const Home = observer(() => {

  const { x, y, z } = useShake()
  const shaker = new Shake({ threshold: 5, timeout: 50 })

  const handleApproval = (evt: React.MouseEvent<HTMLButtonElement>) => {
    evt.preventDefault()

    shaker.approve()
  }



  const { handleSuccessHaptic } = useHaptic()

  useEffect(() => {
      shaker.addEventListener('shake', () => {
      game.onClick()
      handleSuccessHaptic()
    })

    shaker.start()

    return () => {
      shaker.stop()
    }
  }, [handleSuccessHaptic, shaker])

  const handleClicks = () => {
    console.log('It work')
  }

 
  return (
    <div className={'flex flex-col gap-10'}>
     
          <Button className={'w-full'} onClick={handleApproval}>
        GET APPROVE
      </Button>

      <ul>
        <li>X: {x}</li>
        <li>Y: {y}</li>
        <li>Z: {z}</li>
      </ul>
    </div>
  )
})