Web 共享 API 无法在 iOS 上运行：Angular

Question

我正在尝试通过网络像本机应用程序一样共享图像。我正在使用 Angular 。我已经使用了网络共享 API。这在 Android 上正常工作，但是在 iOS（Safari 和 Chrome）中会抛出错误。我正在使用共享按钮来触发它。

这是我的代码：

if (
      this.windowNavigator.canShare &&
      this.windowNavigator.canShare({ files: [file] })
    ) {
      this.windowNavigator
        .share({
          files: [file],
          title: "Vacation Pictures",
          text: "Photos from September 27 to October 14.",
        })
        .then(() => console.log("Share was successful."))
        .catch((error) => console.log("Sharing failed", error));
    } else {
      console.error("Cannot use Web Share API");
    }

我收到的错误是：Cannot use Web Share API

如果浏览器不受支持，通常会发生这种情况。但是，根据 https://caniuse.com/#search=web%20share ，支持 iOS 上的 Safari 13。请注意，我尝试将导航器对象记录到控制台，它确实有 share() 原型。我通过 HTTPS 服务器运行它。请指导我如何进行。

Answer 1

如您所知，您收到的错误消息是由您自己的代码传播的。当 navigator 没有 canShare 属性或 navigator.canShare({ files: [file] }) returns falsy 时记录错误。

但是您需要消耗的 API 是 navigator.share not navigator.canShare，因为对后者的支持更为有限。

根据截至 2020 年 5 月 13 日的 MDN：

要解决此问题，请考虑以下方法

if (typeof this.windowNavigator.share === "function") {
  try {
    await this.windowNavigator.share({
      files: [file],
      title: "Vacation Pictures",
      text: "Photos from September 27 to October 14.",
    });
    console.log("Share was successful.");
  }
  catch (error) {
    console.log("Sharing failed", error);
  }
}
else {
  console.error("Cannot use Web Share API: API unavailable.");
}

Answer 2

编辑（2021 年 6 月 9 日）： 网络共享 API 级别 2 在 iOS 15 开发人员测试版中默认可用，这意味着它很可能会在 iOS 15.

的最终 public 版本中提供

正如 Aluan 所说，API 的支持有限，iOS 根本不支持。请记住，这意味着任何 iOS 浏览器都不支持它，甚至 Chrome，因为 iOS 上的所有浏览器都使用相同的 (WebKit) 引擎。

来自App Store Review Guidelines：

2.5.6 Apps that browse the web must use the appropriate WebKit framework and WebKit Javascript.

Web 共享 API 无法在 iOS 上运行：Angular

Web Share API not working on iOS: Angular

javascript

typescript

angular

web-share