[Fixed] Web Share API not working on iOS: Angular

Issue

I am trying to share an image like a native app via web. I am using Angular for the same. I have used the web share API. This works normally on Android however, throws an error while in iOS(Both Safari and Chrome). I am using a share button to trigger this.

This is my code:

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");
    }

The error I receive is: Cannot use Web Share API

This should typically happen if the browser is not supported.
However, according to https://caniuse.com/#search=web%20share , Safari 13 on iOS is supported.
Please note that I tried logging the navigator object to the console and it does have the share() proto. I am running it over an HTTPS server.
Kindly guide me as to how to proceed.

Solution

The error message you receive is, as you know, propagated by your own code. You log the error when navigator does not have a canShare property or navigator.canShare({ files: [file] }) returns falsy.

But the API in question is navigator.share not navigator.canShare. Support for the latter is much more limited.

According to MDN as of May 13, 2020:

To work around this problem, consider the following approach

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.");
}