Web Share API 在 iOS 上不起作用：Angular

Posted 2023-03-31

【中文标题】Web Share API 在 iOS 上不起作用：Angular

【英文标题】：Web Share API not working on iOS: Angular

【发布时间】：2020-05-13 12:17:49

【问题描述】：

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

【参考方案1】：

如您所知，您收到的错误消息是由您自己的代码传播的。当navigator 没有canShare 属性或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.");

【讨论】：

也许我们需要navigator.canCanShare，但我想对它的支持会更加有限

@George 确实如此。您可以使用 if (typeof this.windowNavigator.canShare !== "function") Object.defineProperty(this.windowNavigator, "canShare", value: function() return typeof this.share === "function"; ) 之类的东西修补/sudo 填充 canShare 函数，以使您能够编写更好的代码，但这并不能验证共享类型的可用性

【参考方案2】：

编辑（2021 年 6 月 9 日）：Web Share API Level 2 在 iOS 15 Developer Beta 中默认可用和可用，这意味着它很可能会在 iOS 的最终公开版本中可用15.

---

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

来自App Store Review Guidelines：

2.5.6 浏览网页的应用程序必须使用适当的 WebKit 框架和 WebKit javascript。

【讨论】：

那么你的理想实现是什么样的？