当用户在 android 上取消本机选择器时,navigator.share 不会解决或拒绝

Ari*_*iel 6 javascript navigator progressive-web-apps ionic3 android-chrome

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

它可以工作,但是我们遇到了一个我们不知道如何解决的小问题:当 navite 共享选择器弹出时(用户可以选择收件箱、gmail、twitter 等),然后用户按下 android 上的后退按钮(忽略出现的本机模式),该函数不会触发承诺中的任何响应。不是成功,不是错误。

这里的问题是我们在调用 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();
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

使用此实现,如果用户在本机共享模式出现时按下后退按钮,则不会引发成功或错误。这段代码有什么问题吗?

我还尝试在函数内添加另一个回调.then()函数,如:.then(successFn, errorFn)。该errorFn从不要么调用。

谢谢你的时间。-

小智 5

这是 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);
});
Run Code Online (Sandbox Code Playgroud)