使用navigator share在iOS14及以下触发TypeError问题求助

问题说明 #

使用 Angular 12 开发的图片分享功能，通过 navigator.share 实现分享至 Instagram 等平台，在 Android 和 iOS16 上运行正常，但在 iOS14 及以下系统中触发 TypeError 且无具体错误信息，无法完成分享。

原代码 #

获取分享数据：

private async getShareData() {
    if (!this._blob) {
      this._blob = await (await fetch(this._shareImgSrc)).blob();
    }
    const file = new File([this._blob], 'image.png', { type: this._blob.type });

    return {
      files: [file],
    };
  }

点击分享逻辑：

public async onShare() {
    if (this._isLoading) {
      return;
    }

    this._isLoading = true;
    try {
      const data = await this.getShareData() as ShareData;
      await navigator.share(data)
    } catch (error) {
      alert(`error: ${error.message}`);
    }
    this._isLoading = false;
  }

问题根源 #

iOS14 及以下版本的 navigator.share API 不支持分享文件（files 参数），仅支持 title、text、url 这几个字段。直接传入包含 files 的对象会触发未明确提示的 TypeError。

解决方案 #

1. 加入兼容性检测 #

使用 navigator.canShare 方法判断当前环境是否支持分享文件，该方法在支持文件分享的平台会返回 true，否则返回 false。

2. 实现降级逻辑 #

对于不支持文件分享的环境，生成图片的可访问链接，引导用户复制链接或保存图片后手动分享；或者直接提示用户系统版本限制。

修改后的代码 #

private async getShareData() {
    if (!this._blob) {
      this._blob = await (await fetch(this._shareImgSrc)).blob();
    }
    // 生成图片的可访问临时链接
    this._imageUrl = URL.createObjectURL(this._blob);
    const file = new File([this._blob], 'image.png', { type: this._blob.type });

    return {
      files: [file],
      url: this._imageUrl, // 降级用的分享链接
      text: '分享这张图片'
    };
  }

public async onShare() {
    if (this._isLoading) {
      return;
    }

    this._isLoading = true;
    try {
      const shareData = await this.getShareData() as ShareData;
      
      // 检测当前环境是否支持文件分享
      if (navigator.canShare && navigator.canShare({ files: shareData.files })) {
        await navigator.share({ files: shareData.files });
      } else {
        // 降级处理：提供复制链接或下载图片的选项
        const choice = confirm('当前系统版本不支持直接分享图片，是否复制图片链接？');
        if (choice) {
          await navigator.clipboard.writeText(shareData.url);
          alert('链接已复制，请手动分享到社交平台');
        } else {
          // 触发图片下载，让用户保存后手动分享
          const downloadLink = document.createElement('a');
          downloadLink.href = shareData.url;
          downloadLink.download = 'image.png';
          downloadLink.click();
        }
      }
    } catch (error) {
      alert(`分享失败: ${error.message || '未知错误'}`);
    } finally {
      // 释放临时链接，避免内存泄漏
      if (this._imageUrl) {
        URL.revokeObjectURL(this._imageUrl);
      }
      this._isLoading = false;
    }
  }

关键改动说明 #

• 新增 navigator.canShare 检测，确保仅在支持环境下使用 files 参数
• 生成图片的 ObjectURL 作为降级方案的分享链接
• 在 finally 块中释放临时链接，防止内存泄漏
• 针对不支持的环境提供复制链接或下载图片的备选路径

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