javascriptangulartypescriptweb-share

Web Share API not working on iOS: Angular

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 you need to consume is navigator.share not navigator.canShare as support for the latter is much more limited.

    According to MDN as of May 13, 2020:

    enter image description here

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