ウェブ共有 API

ウェブ共有 API は、サイトがテキスト、リンク、ファイル、その他のコンテンツを、基盤となるオペレーティングシステムの共有メカニズムを利用して、ユーザーが選択した共有ターゲットに共有することを可能にします。 これらの共有対象には、通常、システムのクリップボード、電子メール、連絡先やメッセージングアプリケーション、 Bluetooth や Wi-Fi チャネルが含まれます。

この API には、2 つのメソッドのみがあります。 navigator.canShare() メソッドは、送信のために navigator.share() にデータを渡す前に、最初にデータが「共有可能」であるかどうかを検証するために使用することができます。

navigator.share() メソッドは、基礎となるオペレーティングシステムのネイティブの共有メカニズムを呼び出して、指定されたデータを渡します。 これは一時的な有効化を必要とします。したがって、ボタンクリックのような UI イベントから発生させる必要があります。 さらに、このメソッドでは、ネイティブ実装で共有するために対応している有効なデータを指定する必要があります。

ウェブ共有 API は web-share 権限ポリシーによって制限されています。 ポリシーに対応しているが許可されていない場合、どちらのメソッドもデータの共有ができないことを示します。

navigator.canShare()

論理値で、指定したデータが共有可能であるかどうかを返します。

navigator.share()

渡されたデータが共有対象に正常に送信されたら解決する Promise を返します。 このメソッドはボタンクリックやその他のユーザーによる有効化で呼び出す必要があります（一時的な有効化が必要です）。

下記のコードは、ボタンのクリックを発生させ、 navigator.share() を使用してリンクを共有する方法を示しています。

const shareData = {
  title: "MDN",
  text: "Learn web development on MDN!",
  url: "https://developer.mozilla.org",
};

const btn = document.querySelector("button");
const resultPara = document.querySelector(".result");

// シェアは「ユーザーによる有効化」により起動させる必要があります
btn.addEventListener("click", async () => {
  try {
    await navigator.share(shareData);
    resultPara.textContent = "MDN shared successfully";
  } catch (err) {
    resultPara.textContent = `Error: ${err}`;
  }
});

上記の例はウェブシェアのテスト （ソースコードを参照）から取ったものです。 navigator.share() でこれをライブ例として見ることができます。

• ウェブ共有ターゲット API