9

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.

Aluan Haddad
  • 29,886
  • 8
  • 72
  • 84
Dhanya Baid
  • 115
  • 1
  • 9

2 Answers2

5

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.");
}
Aluan Haddad
  • 29,886
  • 8
  • 72
  • 84
  • 3
    maybe we need `navigator.canCanShare` but I suppose support for that will be even more limited – George Nov 11 '20 at 10:54
  • @George indeed so. You could monkey patch/sudo polyfill the `canShare` function with something like `if (typeof this.windowNavigator.canShare !== "function") Object.defineProperty(this.windowNavigator, "canShare", {value: function() { return typeof this.share === "function"; })` to enable you to write better code but that doesn't validate the availability of the type of sharing – Aluan Haddad Jul 11 '21 at 18:37
3

Edit (9 June 2021): Web Share API Level 2 is available and usable by default in the iOS 15 Developer Beta, which means it most likely will be available in the final public release of iOS 15.

Like Aluan noted, the API has limited support and is not supported on iOS at all. Keep in mind that this means it is not supported on any iOS browser, even Chrome, since all browsers on iOS use the same (WebKit) engine.

From the App Store Review Guidelines:

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

nirinsanity
  • 141
  • 1
  • 5