Ionic v3 PWA中Android取消原生分享选择器时navigator.share无响应

我之前在Ionic v3的PWA项目里折腾navigator.share()的时候，也碰到过这个糟心的问题——Android原生分享弹窗按返回键关掉后，Promise就像“失踪”了一样，既不触发成功回调也不抛出错误，完全没反应。

问题根源 #

这其实是早期Web Share API在Android部分版本上的兼容性坑：当用户通过系统返回键关闭分享选择器时，系统并没有正确向Web端传递“取消操作”的信号，导致navigator.share()返回的Promise一直处于pending状态，永远不会触发resolve或reject。

可行解决方案 #

1. 给分享操作添加超时处理 #

自己封装一个带超时机制的Promise，设定一个合理的超时时间（比如5秒），如果超过时间还没收到回调，就手动触发reject，避免Promise一直挂起。

async function shareWithTimeout(options: ShareData, timeoutMs: number = 5000): Promise<void> {
  return new Promise((resolve, reject) => {
    // 启动超时定时器
    const timeoutId = setTimeout(() => {
      reject(new Error('分享操作超时或已取消'));
    }, timeoutMs);

    // 调用原生Web Share API
    navigator.share(options)
      .then(() => {
        clearTimeout(timeoutId);
        resolve();
      })
      .catch((err) => {
        clearTimeout(timeoutId);
        reject(err);
      });
  });
}

// 在你的Ionic页面中使用
async handleShare() {
  const shareOptions = {
    title: '我的分享标题',
    text: '这是我要分享的内容',
    url: window.location.href
  };

  try {
    await shareWithTimeout(shareOptions);
    console.log('分享成功');
    // 这里可以添加分享成功后的逻辑，比如弹窗提示
  } catch (err) {
    console.log('分享取消或失败:', err.message);
    // 处理取消或失败的情况
  }
}

2. 监听页面可见性变化 #

当分享弹窗关闭时，页面会重新获得可见性，我们可以通过Visibility API监听这个变化，判断Promise是否还处于pending状态，进而手动处理取消的情况。

let pendingSharePromise: Promise<void> | null = null;

async handleShare() {
  const shareOptions = { title: '测试分享', text: '分享内容', url: window.location.href };
  
  pendingSharePromise = navigator.share(shareOptions);
  
  // 监听页面可见性变化
  const handleVisibilityChange = () => {
    if (document.visibilityState === 'visible' && pendingSharePromise) {
      // 页面回到可见状态，但分享Promise仍未完成，说明用户取消了分享
      pendingSharePromise.catch(() => {}); // 避免未处理的Promise rejection警告
      console.log('分享已取消');
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      pendingSharePromise = null;
    }
  };
  
  document.addEventListener('visibilitychange', handleVisibilityChange);
  
  try {
    await pendingSharePromise;
    console.log('分享成功');
  } catch (err) {
    console.log('分享失败:', err.message);
  } finally {
    document.removeEventListener('visibilitychange', handleVisibilityChange);
    pendingSharePromise = null;
  }
}

3. 改用Ionic原生Social Sharing插件 #

如果Web Share API的兼容性问题一直困扰你，可以试试Ionic官方的Social Sharing插件，它直接封装了原生系统的分享功能，对Android返回键这类系统操作的处理更可靠。

首先安装插件（注意适配Ionic v3的版本）：

ionic cordova plugin add cordova-plugin-x-socialsharing
npm install @ionic-native/social-sharing@4

然后在页面中使用：

import { SocialSharing } from '@ionic-native/social-sharing';

@Component({
  // ... 页面配置
})
export class YourPage {
  constructor(private socialSharing: SocialSharing) {}

  async shareViaNative() {
    const isShared = await this.socialSharing.share(
      '分享内容',
      '分享标题',
      null, // 可选：分享的图片路径
      window.location.href
    );

    if (isShared) {
      console.log('分享成功');
    } else {
      console.log('分享已取消');
    }
  }
}

总结 #

我当时项目里用的是第一个超时处理方案，简单直接，能快速解决Promise挂起的问题；如果你的项目对原生体验要求更高，第三个插件方案会更稳定。你可以根据自己的需求选一个试试。

内容的提问来源于stack exchange，提问作者Ariel