javascript - 当用户在 Android 上取消 native 选择器时，navigator.share 不会解析或拒绝

Question

因此，我们正在 Ionic v3 PWA 中实现 navigator.share() ( https://developers.google.com/web/updates/2016/09/navigator-share )。

它有效，但我们遇到了一个我们不知道如何解决的小问题:当 navite 共享选择器弹出时(用户可以在收件箱、gmail、twitter 等之间进行选择)，然后用户按返回键android 上的按钮(关闭出现的 native 模式)，该函数不会触发 promise 中的任何响应。不是成功，不是错误。

这里的问题是我们在调用 navigator.share 函数之前显示了一个加载微调器，如果用户恰好在那一刻按下了返回按钮，我们就无法触发隐藏加载微调器的函数。

这是我们实现该功能的代码部分:

public share(title: string, message: string, url: string) {
    // if it's mobile & web (ie: chrome on android)
    if (this.isMobileWeb === true) {
        this.showLoading();
        if ((navigator as any).share) {
            (navigator as any).share({
                title,
                message,
                url,
            })
                .then(() => {
                    console.log('Success share');
                    this.hideLoading();
                })
                .catch((error) => {
                    console.log('Error share', error);
                    this.hideLoading();
                });
        }
        else {
            console.log('navigator.share() not supported.');
            this.hideLoading();
        }
    }
}

使用此实现，如果用户在 native 共享模式出现时按下后退按钮，则不会抛出成功或错误。这段代码有问题吗？

我还尝试在 .then() 函数中添加另一个回调函数，如:.then(successFn,​​ errorFn)。 errorFn 也从未被调用。

谢谢你的时间。-

Answer 1

这是 Android 中长期存在的错误。这是我的解决方案，但我不能把这项技术归功于我。在下面链接的错误跟踪器中提到了它。请原谅使用 ES6 语法。这个想法是您将调用此共享函数而不是直接调用“navigator.share”函数。

export default options => new Promise((resolve, reject) => {
  navigator.share(options).then(resolve).catch(error => {
    // Differentiate between user 'AbortError' and internal errors.
    // E.g. Internal error: could not connect to Web Share interface.
    if (error.message.startsWith('Internal error:'))
      error.name = 'InternalError';

    reject(error);
  });

  /*
   * https://bugs.chromium.org/p/chromium/issues/detail?id=636274
   * If the share promise is not resolved or rejected when focus is returned to
   * the window, then reject it after a 100ms delay.
   */
  let cancel = () => setTimeout(() => {
    window.removeEventListener('focus', cancel);

    let error = new Error('Share cancelled');
    error.name = 'ShareTimeout';
    reject(error);
  }, 100);

  window.addEventListener('focus', cancel);
});