このページは Cloud Translation API によって翻訳されました。

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

Web Share Target API によりモバイルとパソコンでの共有が簡単に

Pete LePage

Joe Medley

モバイルデバイスまたはデスクトップデバイスでは、[共有] ボタンをクリックするのと同じくらい簡単に共有できます。共有する相手を選ぶこともできます。たとえば興味深い記事を友人にメールで送信したり、できます。

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

[共有方法] をオンにした Android スマートフォン引き出します。 — </ph> オプションとしてインストールされている PWA を備えたシステムレベルの共有ターゲット選択ツール。

ウェブ共有ターゲットの実例を見る

Android の場合は Chrome 76 以降、または Chrome 89 以降を使用している Web Share Target のデモを開きます。
メッセージが表示されたら、[Install] をクリックしてアプリをホーム画面に追加します。または、 Chrome メニューを使ってホーム画面に追加できます。
共有に対応しているアプリを開くか、[共有] ボタンを使用します。
ターゲット選択ツールで [Web Share Test] を選択します。

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

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

アプリを共有ターゲットとして登録するには、アプリが Chrome のインストール性の基準をご覧ください。また、ユーザーが Google Chat でアプリをホーム画面に追加する必要があります。これによりユーザーの共有インテント選択ツールに自分をランダムに追加し、共有は、ユーザーがアプリで行いたい操作です。

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

アプリを共有ターゲットとして登録するには、ウェブに share_target エントリを追加します。アプリマニフェストをご覧ください。このコマンドで、アプリをインテント選択ツールでオプションを選択できるようになります。マニフェストに追加する内容は、アプリが受け入れるものを指定しますshare_target の一般的なシナリオは次の 3 つです。エントリ:

基本情報を受け入れる
アプリケーションの変更を承認する
ファイルを受け付けています

で確認できます。

注: 他のユーザーと共有する場合は、マニフェストごとに 1 つの share_target のみを指定できます。共有画面でオプションとして提供できますターゲットのランディングページ（url エントリで指定されたページ）

基本情報を受け入れる

ターゲットアプリが基本的な情報（データ、リンク、 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" を、商品には "multipart/form-data" を使用します。 enctype:

{
  "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 スマートフォン。 — </ph> サンプルの共有ターゲットアプリ。

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

たとえば Android では、次の理由により url フィールドは空になります。 Android の共有システムではサポートされていません。多くの場合、URL は text フィールド、または必要に応じて title フィールドに入力します。

ブラウザサポート

Web Share Target API は以下のようにサポートされています。

どのプラットフォームでも、ウェブアプリがインストールしないと、共有データの受信先の候補。

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

API のサポートを表示する

Web Share Target API を使用する予定はありますか？皆様の公開サポートが Chromium チームの力になります他のブラウザベンダーがそれらの機能をサポートすることの重要性を説明します。

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

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

ウェブ共有ターゲットの実例を見る

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

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

基本情報を受け入れる

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

ファイルを受け付けています

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

GET 共有の処理

POST 共有を処理しています

共有コンテンツの確認

ブラウザ サポート

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

API のサポートを表示する

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

ブラウザサポート

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