ウェブ共有 API

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

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

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

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

概念と用途

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

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

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

ウェブ共有 API は web-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() でこれをライブ例として見ることができます。

仕様書

Specification
Web Share API

ブラウザーの互換性

api.Navigator.share

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
share
data.files parameter
data.text parameter

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
User must explicitly enable this feature.
Has more compatibility info.

api.Navigator.canShare

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
canShare
data.files parameter
data.text parameter

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
User must explicitly enable this feature.
Has more compatibility info.

関連情報