javascript - Web 共享 API 在 iOS : Angular 上不起作用

Question

我正在尝试通过网络共享像 native 应用程序一样的图像。我正在使用 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() 原型(prototype)。我在 HTTPS 服务器上运行它。
请指导我如何进行。

Answer 1

如您所知，您收到的错误消息是由您自己的代码传播的。您在 navigator 时记录错误没有 canShare属性(property)或 navigator.canShare({ files: [file] })返回虚假。
但是你需要使用的API是navigator.share 不是 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.");
}