Web Share API を使用して OS 共有 UI と統合する

ウェブアプリは、プラットフォーム固有のアプリと同じシステム提供の共有機能を使用できます。

Joe Medley

Web Share API を使用すると、ウェブアプリは、プラットフォーム固有のアプリと同じシステム提供の共有機能を使用できます。Web Share API を使用すると、ウェブアプリは、プラットフォーム固有のアプリと同じ方法で、デバイスにインストールされている他のアプリにリンク、テキスト、ファイルを共有できます。

注: 共有は、この機能の半分にすぎません。ウェブアプリは共有ターゲットにもなり、プラットフォーム固有のアプリやウェブアプリからデータ、リンク、テキスト、ファイルを受け取ることができます。アプリを共有ターゲットとして登録する方法については、共有データを受信するをご覧ください。

インストール済みの PWA をオプションとして含む、システムレベルの共有ターゲット選択ツール。

機能と制限

ウェブ共有には、次の機能と制限があります。

• HTTPS 経由でアクセスされるサイトでのみ使用できます。
• サードパーティの iframe で共有が行われる場合は、allow 属性を使用する必要があります。
• クリックなどのユーザー操作に応じて呼び出す必要があります。onload ハンドラを介して呼び出すことはできません。
• URL、テキスト、ファイルを共有できます。

Browser Support

• 128
• 93
• 
• 12.1

Source

リンクとテキストの共有

リンクとテキストを共有するには、share() メソッドを使用します。これは、必須のプロパティ オブジェクトを含む Promise ベースのメソッドです。ブラウザが TypeError をスローしないようにするには、オブジェクトに title、text、url、files のいずれかのプロパティが少なくとも 1 つ含まれている必要があります。たとえば、URL なしでテキストを共有したり、その逆を行ったりできます。3 つのメンバーすべてを許可すると、ユースケースの柔軟性が向上します。以下のコードを実行した後、ユーザーがターゲットとしてメールアプリを選択したとします。title パラメータはメールの件名、text はメール本文、ファイルは添付ファイルになります。

if (navigator.share) {
  navigator.share({
    title: 'web.dev',
    text: 'Check out web.dev.',
    url: 'https://web.dev/',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
}

サイトに同じコンテンツの URL が複数ある場合は、現在の URL ではなく、ページの正規 URL を共有します。document.location.href を共有する代わりに、ページの <head> で正規 URL の <meta> タグを確認し、それを共有します。これにより、ユーザー エクスペリエンスが向上します。リダイレクトを回避するだけでなく、共有 URL が特定のクライアントに適切なユーザー エクスペリエンスを提供できるようにします。たとえば、友人がモバイル向け URL を共有し、それをデスクトップ パソコンで表示すると、PC 版が表示されます。

let url = document.location.href;
const canonicalElement = document.querySelector('link[rel=canonical]');
if (canonicalElement !== null) {
    url = canonicalElement.href;
}
navigator.share({url});

ファイルの共有

ファイルを共有するには、まず navigator.canShare() をテストして呼び出します。次に、navigator.share() の呼び出しにファイルの配列を含めます。

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator.share({
    files: filesArray,
    title: 'Vacation Pictures',
    text: 'Photos from September 27 to October 14.',
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
} else {
  console.log(`Your system doesn't support sharing files.`);
}

このサンプルでは、navigator.share() ではなく navigator.canShare() をテストすることで機能検出を処理しています。canShare() に渡されるデータ オブジェクトは、files プロパティのみをサポートします。特定の種類の音声、画像、PDF、動画、テキスト ファイルを共有できます。完全なリストについては、Chromium で許可されているファイル拡張子をご覧ください。今後、さらに多くのファイル形式が追加される可能性があります。

サードパーティの iframe での共有

サードパーティの iframe 内から共有アクションをトリガーするには、allow 属性の値が web-share の iframe を埋め込みます。

<!-- On https://example.com/index.html -->
<iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>

「サンタを追いかけよう」の事例紹介

「サンタを追いかけよう」の共有ボタン。

オープンソース プロジェクトであるサンタを追いかけようは、Google のホリデー シーズンの伝統です。毎年 12 月には、ゲームや教育的な体験でホリデー シーズンを祝うことができます。

2016 年、サンタを追いかけようチームは Android で Web Share API を使用しました。この API はモバイルに最適でした。以前は、スペースが限られており、複数の共有ターゲットを配置する理由がなかったため、モバイルの共有ボタンを削除していました。

しかし、Web Share API を使用すると、1 つのボタンを表示するだけで済み、貴重なピクセルを節約できました。また、Web Share を使用したユーザーは、API を有効にしていないユーザーよりも約 20% 多く共有していることもわかりました。サンタを追いかけようにアクセスして、Web Share の動作を確認してください。

ブラウザ サポート

Web Share API のブラウザ サポートは微妙なため、特定のメソッドがサポートされていると想定するのではなく、機能検出（前述のコードサンプルを参照）を使用することをおすすめします。

この機能のサポートの概要は次のとおりです。詳しくは、いずれかのサポートリンクをご覧ください。

navigator.canShare()

Browser Support

• 128
• 93
• 
• 14

Source

navigator.share()

Browser Support

• 128
• 93
• 
• 12.1

Source

API のサポートを示す

Web Share API を使用する予定はありますか？一般ユーザーの支持は、Chromium チームが機能の優先順位を付けるのに役立ち、他のブラウザ ベンダーにそれらの機能をサポートすることがいかに重要であるかを示すことになります。

ハッシュタグ #WebShare を使用して @ChromiumDev にツイートを送信し、どこでどのように使用しているかをお知らせください。

関連情報

• Web Share のデモ
• Scrapbook PWA