ウェブアプリは、プラットフォーム固有のアプリと同じシステムが提供する共有機能を使用できます。
Web Share API を使用すると、ウェブアプリはプラットフォーム固有のアプリと同じシステム提供の共有機能を使用できるようになります。Web Share API を使用すると、ウェブアプリはプラットフォーム固有のアプリと同じ方法で、デバイスにインストールされている他のアプリとリンク、テキスト、ファイルを共有できます。
機能と制限
ウェブ共有には次の機能と制限事項があります。
- HTTPS 経由でアクセスされるサイトでのみ使用できます。
- サードパーティの iframe で共有する場合は、
allow属性を使用する必要があります。 - クリックなどのユーザー アクションに応じて呼び出す必要があります。
onloadハンドラで呼び出すことはできません。 - URL、テキスト、ファイルを共有できます。
リンクとテキストの共有
リンクとテキストを共有するには、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 を共有し、あなたがパソコンで 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 内から共有アクションをトリガーするには、値が web-share の allow 属性を持つ iframe を埋め込みます。
<!-- On https://example.com/index.html -->
<iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>
この実際の動作は、Glitch のデモでご覧になれます。また、ソースコードもご覧いただけます。この属性を指定しないと、NotAllowedError とメッセージ Failed to execute 'share' on 'Navigator': Permission denied が返されます。
「サンタを追いかけよう」の事例紹介
オープンソース プロジェクトのサンタを追いかけようは、Google のホリデー シーズンの伝統です。毎年 12 月にはゲームや教育的な体験で この季節をお祝いできます
2016 年、サンタを追いかけようチームは Android で Web Share API を使用していました。 この API はモバイルに最適でした。 モバイルではスペースが重要であり、複数の共有ターゲットを持つことが正当化されなかったため、チームはこれまで数年間、モバイルの共有ボタンを削除しました。
しかし、Web Share API を使用することで、1 つのボタンを表示できるようになり、貴重なピクセルを節約できました。また、Web Share を使用して共有するユーザーは、API を有効にしていないユーザーと比較して約 20% 多いことも確認されました。サンタを追いかけようで、Web Share の実際の動作をご覧ください。
ブラウザ サポート
Web Share API に対するブラウザ サポートは微妙であるため、特定のメソッドがサポートされていることを前提とするのではなく、機能検出（前述のコードサンプルを参照）を使用することをおすすめします。
この機能のサポートの概要は次のとおりです。詳細については、サポートリンクをご利用ください。
navigator.canShare()navigator.share()
API のサポートを表示する
Web Share API を使用する予定はありますか。皆様からの一般公開のサポートは、Chromium チームによる機能の優先順位付けに役立ち、他のブラウザ ベンダーのサポートがいかに重要であるかを示しています。
ハッシュタグ #WebShare を使用して @ChromiumDev 宛てにツイートを送信し、使用場所と使用方法をお知らせください。