ウェブ共有 API

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

ウェブ共有 API は、テキスト、リンク、ファイル、その他のコンテンツを、ユーザーが選択した任意の 共有ターゲット に共有する仕組みを提供します。

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

メモ: この API はウェブワーカーでは利用できません（WorkerNavigator からは公開されていません）。

メモ: この API をウェブ共有ターゲット API と混同しないでください。こちらはウェブサイトに自分自身が共有ターゲットであることを示させるものです。

概念と用途

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

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

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

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

インターフェイス

navigator.canShare()

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

navigator.share()

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

例

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

js
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() でこれをライブ例として見ることができます。