Web API見本市
OS連携ユーザージェスチャー必須スマホ推奨判定中...

Web Share API

OS標準の共有シートを起動し、タイトル・本文・URL・ファイルを他アプリへ渡せるAPI。

MDNのドキュメントを見る

1対応判定

ブラウザ対応バージョン
Chrome128+（部分対応は89+）
Firefox未対応（Androidは対応）
Safari12.1+

備考: デスクトップFirefoxのみ非対応

2権限フロー

  1. 権限不要

    API呼び出しだけで動く。プロンプトも操作起点の縛りもない

  2. ユーザージェスチャー必須このAPI

    ボタンクリック等のユーザー操作の中でしか呼べない。プロンプトは出ない

  3. 権限プロンプトあり

    呼び出すとブラウザが許可/ブロックのプロンプトを表示し、ユーザーが選ぶ

  4. iOS独自requestPermission

    iOSではrequestPermission()を操作起点で呼び、明示的に許可を得る

権限プロンプトは無いが、ボタンクリック等のユーザージェスチャー内でしか navigator.share() を呼べない。

3ライブデモ: OS共有シートの起動とファイル共有

4コードスニペット

TypeScript（要約版）
// 共有可能かの事前判定
const data: ShareData = {
  title: "Web API見本市",
  text: "ブラウザ標準APIを1ページずつ体験できるカタログ",
  url: "https://lab-webapi.gitgit-news.org/",
};
if (!navigator.canShare?.(data)) {
  console.warn("このデータは共有できません");
}

// OS共有シートの起動（ユーザージェスチャー必須）
try {
  await navigator.share(data);
} catch (err) {
  // ユーザーがキャンセルすると AbortError
  if ((err as DOMException).name !== "AbortError") throw err;
}

// ファイル共有: canShareでの判定が必須
const file = new File(["hello"], "hello.txt", { type: "text/plain" });
if (navigator.canShare?.({ files: [file] })) {
  await navigator.share({ files: [file], title: "テキストファイル" });
}