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

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

Joe Medley
Joe Medley

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

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

機能と制限

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

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

対応ブラウザ

  • Chrome: 89。
  • Edge: 93。
  • Firefox: フラグの背後。
  • Safari: 12.1。

ソース

リンクとテキストを共有するには、share() メソッドを使用します。これは、必須のプロパティ オブジェクトを使用するプロミスベースのメソッドです。ブラウザが TypeError をスローしないようにするには、オブジェクトに titletexturlfiles のいずれかのプロパティを 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 を共有され、それをパソコンで開いた場合、パソコン向けのバージョンが表示されます。

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>

Glitch のデモでこの動作を確認したり、ソースコードを確認したりできます。この属性を指定しないと、NotAllowedErrorFailed to execute 'share' on 'Navigator': Permission denied というメッセージが返されます。

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

共有ボタンが表示された「サンタを追いかけよう」アプリ。
サンタ トラッカーの共有ボタン。

オープンソース プロジェクトである サンタを追いかけようは、Google のクリスマスの恒例です。毎年 12 月には、ゲームや教育的な体験でクリスマスをお祝いできます。

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

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

ブラウザ サポート

Web Share API のブラウザ サポートは微妙な違いがあります。特定のメソッドがサポートされていると想定するのではなく、(前述のコードサンプルで説明したように)機能検出を使用することをおすすめします。

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

navigator.canShare()

対応ブラウザ

  • Chrome: 89。
  • Edge: 93。
  • Firefox: フラグの背後。
  • Safari: 14。

ソース

navigator.share()

対応ブラウザ

  • Chrome: 89。
  • Edge: 93。
  • Firefox: フラグの背後。
  • Safari: 12.1。

ソース

API のサポートを表示する

Web Share API を使用する予定ですか?公開サポートは、Chromium チームが機能を優先付けするうえで役立ち、他のブラウザ ベンダーに、その機能のサポートがどれほど重要であるかを示します。

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