在为 Telegram 开发 Web 应用程序时，我遇到了一个相当有趣的案例。最重要的是，我需要获得手机用户（特别是 iPhone 用户）的许可（或拒绝）......

在为 Telegram 开发 Web 应用程序时，我遇到了一个相当有趣的案例。

最重要的是，我需要在第一个应用程序上获得手机用户（特别是 iPhone 用户）的许可（或拒绝），并且我可以使用手机的加速度计来识别某些事件。

本地 - 它可以工作（如果有人感兴趣，可以使用 zrok 作为层，因为 Telegram 不会在没有证书的情况下打开本地版本）

但是，部署后，iPhone 上的工作没有任何停止。Android 上的情况要好得多)

以下是我为了明确获得 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>
  )
})