javascript - `navigator.geolocation.getCurrentPosition()` 在 iOS PWA 上挂起

Question

我有这个片段:

const getCurrentPosition = () =>
  new Promise<GeolocationPosition>((resolve, reject) => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(resolve, reject, {
        timeout: 5000,
        maximumAge: 2000,
        enableHighAccuracy: true,
      });
    } else {
      reject(new Error('Browser does not support geolocation!'));
    }
  });

我这样调用它:

try {
  const { coords } = await getCurrentPosition();
  // do stuff with coords
}
catch (e){
  // handle the error
}

在 iOS PWA (navigator.standalone) 中执行此代码时，如果我有 Safari 的位置设置 (Settings > Privacy > Location Services > Safari Websites) 设置为:Ask Next Time，getCurrentPosition() promise 挂起并且不会超时，解决或拒绝。它不会像在 iOS Safari 浏览器中那样提示我输入位置

如果我将设置更改为 Never 或 While Using the App，那么它会提示我并且工作正常。

我希望能够处理用户在使用 PWA 时将其设置设置为 Ask Next Time 的情况。

Answer 1

一旦我和一些同事弄明白了，解决这个问题的方法就相当简单了:

export function getUserPosition(): Promise<GeolocationPosition> {
  const promiseArray = [];

  if (navigator.standalone) {
    promiseArray.push(
      new Promise((resolve, reject) => {
        const wait = setTimeout(() => {
          clearTimeout(wait);
          reject('Location has timed out');
        }, 4000);
      })
    );
  }

  const getCurrentPositionPromise = new Promise((resolve, reject) => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(resolve, reject, {
        timeout: 5000,
        maximumAge: 2000,
        enableHighAccuracy: true,
      });
    } else {
      reject(new Error('Browser does not support geolocation!'));
    }
  });

  promiseArray.push(getCurrentPositionPromise);

  return Promise.race(promiseArray) as Promise<GeolocationPosition>;
}

这是怎么回事？

1. 我们正在创建一个空的 promise 数组
2. 如果导航器被识别为standalone，我们将创建一个 promise ，在 4 秒后rejects(这个值是任意的，您希望用户的最长时间等待)并将其推送到 promiseArray。
3. 我们正在创建另一个 promise，它获取用户的位置并将其也插入 promiseArray。
4. 然后我们返回一个从执行 Promise.race() 返回的 promise 。这里的关键是，如果导航器不是standalone，则promiseArray 中只有一个promise，因此将按预期工作。如果导航器是独立的，那么 promiseArray 中将有两个 promise ，并且 Promise.race() 将拒绝超时，从而拒绝 getUserPosition( ) 函数。