Web-apps: Can the iOS share sheet be triggered – and/or the shared URL customised – programatically?

Question

Specifically, I would like to share granular page content via triggering the iOS share sheet with in-page buttons.

In my webapp page, I have a table of downloadable PDFs. I would like to be able to add a column called "Share" into the table, so that a button could be tapped to share the URL to that document, without having to open the document itself and share from there.

In order to do this, I assume I would need to customise this triggered share sheet to share a different URL to the one that is showing in mobile safari's address bar.

Is this possible using javascript, or alternative URLs in a meta tag maybe? I don't expect URL scheme to be a solution, as it is concerned with sending data to another application.

Kimberleekimberley

Answer 1

Addendum 6/2020 It is possible since iOS 12.4, it works great.

It will be supported in Safari iOS V12.2. The beta of V12.2 already has it.

There's a good article by Maximiliano Firtman on a number of new features that will be possible in the new version.

Argentinaargentine

I want to add that this is working already in both Android an iOS. – Argentinaargentine

Please note that the Web Share API unfortunately doesn't work over file: protocol resources loaded in a WKWebView, if that's your use-case. It only works in a secure context and file: protocol is not considered as such. Similarly, I expect it won't work over a plain HTTP site, only HTTPS. – Unscratched

Indeed Tomáš: most of the web App functions require HTTPS, is not only this feature. – Argentinaargentine

Answer 2

Not currently on ios but a new w3c spec is on the way called web share api. Currently only available in chrome for android behind a origin trail.

https://developers.google.com/web/updates/2016/10/navigator-share

Landseer

Answer 3

Yes, via the Web Share API

per the w3 docs:

shareButton.addEventListener("click", async () => {
  try {
    await navigator.share({ title: "Example Page", url: "" });
    console.log("Data was shared successfully");
  } catch (err) {
    console.error("Share failed:", err.message);
  }
});

Great article by Joe Medley on web.dev: Integrate with the OS sharing UI with the Web Share API

Mebane