Web Share Target API を使用して共有データを受信する

Web Share Target API を使用してモバイルとパソコンでの共有を簡素化

Pete LePage
Joe Medley
Joe Medley
GitHub

モバイル デバイスまたはデスクトップ デバイスでは、[共有] ボタンをクリックし、アプリを選択し、共有相手を選択するだけで、簡単に共有できるようにする必要があります。たとえば、面白い記事を友人にメールで送信したり、ツイートして世界中に共有したりできます。

これまでは、プラットフォーム固有のアプリのみがオペレーティング システムに登録し、他のインストール済みアプリから共有を受け取ることができました。しかし、Web Share Target API を使用すると、インストール済みのウェブアプリが基盤となるオペレーティング システムを共有ターゲットとして登録し、共有コンテンツを受信できます。

[共有方法] ドロワーが開いている Android スマートフォン。
インストール済みの PWA がオプションとして表示される、システムレベルの共有ターゲット選択ツール。

Web Share Target の実例

  1. Android の場合は Chrome 76 以降、パソコンの場合は Chrome 89 以降を使用して、Web Share Target のデモを開きます。
  2. プロンプトが表示されたら、[インストール] をクリックしてアプリをホーム画面に追加するか、Chrome メニューを使用してホーム画面に追加します。
  3. 共有をサポートしているアプリを開くか、デモアプリの [共有] ボタンを使用します。
  4. ターゲット選択ツールから [Web Share Test] を選択します。

共有後、ウェブ共有のターゲット ウェブアプリに共有情報がすべて表示されます。

アプリを共有ターゲットとして登録する

アプリを共有ターゲットとして登録するには、Chrome のインストール要件を満たしている必要があります。また、ユーザーがアプリと共有するには、そのアプリをホーム画面に追加する必要があります。これにより、サイトがユーザーの共有インテント選択ツールに無作為に自身を追加することを防止し、ユーザーがアプリで共有したいものであることを保証できます。

ウェブアプリ マニフェストを更新する

アプリを共有ターゲットとして登録するには、ウェブアプリ マニフェストに share_target エントリを追加します。これにより、オペレーティング システムはインテント選択ツールにオプションとしてアプリを含めるよう指示できます。マニフェストに追加する内容によって、アプリが受け入れるデータが決まります。share_target エントリの一般的なシナリオとして、次の 3 つがあります。

  • 基本情報の入力
  • アプリケーションの変更の承認
  • ファイルの受け取り

基本情報の入力

ターゲット アプリがデータ、リンク、テキストなどの基本情報を受け入れるだけの場合は、manifest.json ファイルに次の行を追加します。

"share_target": {
  "action": "/share-target/",
  "method": "GET",
  "params": {
    "title": "title",
    "text": "text",
    "url": "url"
  }
}

アプリケーションにすでに共有 URL スキームがある場合は、params 値を既存のクエリ パラメータに置き換えることができます。たとえば、共有 URL スキームで text ではなく body を使用している場合は、"text": "text" を "text": "body" に置き換えることができます。

指定しない場合、method の値はデフォルトで "GET" になります。この例には示されていませんが、enctype フィールドは、データのエンコードの種類を示します。"GET" メソッドの場合、enctype はデフォルトで "application/x-www-form-urlencoded" に設定され、それ以外に設定されている場合は無視されます。

アプリケーションの変更の承認

共有データによってなんらかの方法でターゲット アプリが変更される場合（ターゲット アプリにブックマークを保存する場合など）は、method 値を "POST" に設定し、enctype フィールドを含めます。次の例では、ターゲット アプリにブックマークを作成するため、method に "POST" を使用し、enctype に "multipart/form-data" を使用します。

{
  "name": "Bookmark",
  "share_target": {
    "action": "/bookmark",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "url": "link"
    }
  }
}

ファイルの受け取り

アプリの変更と同様に、ファイルを受け入れるには、method が "POST" であり、enctype が存在する必要があります。また、enctype を "multipart/form-data" にして、files エントリを追加する必要があります。

また、アプリが受け入れるファイルのタイプを定義する files 配列も追加する必要があります。配列要素は、name フィールドと accept フィールドの 2 つのメンバーを持つエントリです。accept フィールドには、MIME タイプ、ファイル拡張子、またはその両方を含む配列を指定します。オペレーティング システムは異なるため、MIME タイプとファイル拡張子の両方を含む配列を指定することをおすすめします。

{
  "name": "Aggregator",
  "share_target": {
    "action": "/cgi-bin/aggregate",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "name",
      "text": "description",
      "url": "link",
      "files": [
        {
          "name": "records",
          "accept": ["text/csv", ".csv"]
        },
        {
          "name": "graphs",
          "accept": "image/svg+xml"
        }
      ]
    }
  }
}

受信コンテンツを処理する

受信した共有データの処理方法は、アプリによって異なります。次に例を示します。

  • メール クライアントは、メールの件名に title を使用し、本文に text と url を連結して、新しいメールの下書きを作成できます。
  • ソーシャル ネットワーク アプリでは、title を無視して、メッセージの本文として text、リンクとして url を追加することで、新しい投稿の下書きを作成できます。text がない場合は、本文でも url が使用される可能性があります。url がない場合、アプリは text をスキャンして URL を検索し、それをリンクとして追加することがあります。
  • 写真共有アプリでは、title をスライドショーのタイトル、text を説明、files をスライドショーの画像として使用して、新しいスライドショーを作成できます。
  • テキスト メッセージ アプリでは、text と url を連結して title をドロップすることで、新しいメッセージの下書きを作成できます。

GET 共有の処理

ユーザーがアプリケーションを選択し、method が "GET"（デフォルト）の場合、ブラウザは action URL で新しいウィンドウを開きます。ブラウザはその後、マニフェストで指定された URL エンコードされた値を使用してクエリ文字列を生成します。たとえば、共有アプリが title と text を提供する場合、クエリ文字列は ?title=hello&text=world です。この処理を行うには、フォアグラウンド ページで DOMContentLoaded イベント リスナーを使用して、クエリ文字列を解析します。

window.addEventListener('DOMContentLoaded', () => {
  const parsedUrl = new URL(window.location);
  // searchParams.get() will properly handle decoding the values.
  console.log('Title shared: ' + parsedUrl.searchParams.get('title'));
  console.log('Text shared: ' + parsedUrl.searchParams.get('text'));
  console.log('URL shared: ' + parsedUrl.searchParams.get('url'));
});

Service Worker を使用して action ページを事前キャッシュし、ユーザーがオフラインの場合でもすばやく読み込み、確実に動作するようにしましょう。Workbox は、Service Worker にプリキャッシュを実装する際に役立つツールです。

POST 共有の処理

ターゲット アプリが保存済みブックマークや共有ファイルを受け入れる場合と同様に、method が "POST" の場合、受信する POST リクエストの本文には、共有アプリから渡されたデータがマニフェストで指定される enctype 値を使用してエンコードされます。

フォアグラウンド ページでは、このデータを直接処理できません。ページはデータをリクエストとして認識するため、そのデータが Service Worker に渡されます。Service Worker では、fetch イベント リスナーでデータをインターセプトできます。ここから、postMessage() を使用してデータをフォアグラウンド ページに戻すか、サーバーに渡します。

self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);
  // If this is an incoming POST request for the
  // registered "action" URL, respond to it.
  if (event.request.method === 'POST' &&
      url.pathname === '/bookmark') {
    event.respondWith((async () => {
      const formData = await event.request.formData();
      const link = formData.get('link') || '';
      const responseUrl = await saveBookmark(link);
      return Response.redirect(responseUrl, 303);
    })());
  }
});

共有コンテンツの確認

共有コンテンツを含むデモアプリが表示されている Android スマートフォン。
共有ターゲット アプリのサンプル。

受信データを必ず確認してください。残念ながら、他のアプリが適切なパラメータで適切なコンテンツを共有する保証はありません。

たとえば、Android の場合、url フィールドは空になります。これは、Android の共有システムでサポートされていないためです。通常、URL は text フィールドまたは title フィールドに表示されます。

ブラウザ サポート

Web Share Target API は、以下で説明するようにサポートされています。

どのプラットフォームでも、ウェブアプリが共有データを受信するターゲット候補として表示されるためには、ウェブアプリをインストールする必要があります。

サンプル アプリケーション

API のサポートを表示する

Web Share Target API を使用する予定はありますか？皆様からの一般公開のサポートは、Chromium チームによる機能の優先順位付けに役立ち、他のブラウザ ベンダーのサポートがいかに重要であるかを示しています。

ハッシュタグ #WebShareTarget を使用して @ChromiumDev 宛てにツイートを送信し、使用場所と使用方法をお知らせください。