Web共有API

Webのネイティブ共有APIの使用方法

与える贈り物

次世代のWebアプリを使用することには、いくつかの明らかな利点があります。その1つは、ナビゲーターの共有APIを使用することです。進化し続ける豊富な機能のおかげで、選択したナビゲーターはWeb ShareAPIを呼び出して次のアイテムを共有できるようになりました。

  • プレーンテキスト
  • タイトルを提供することによるリンク
  • ファイルを直接

ユーザーのブラウザが新しいnavigator.shareをサポートしている場合は、この機能を今すぐ使用できます。

デモタイム！

共有機能の使用は簡単です。サイトで実際に使用されている例を次に示します。

<Button
  className={classes.container}
  aria-label={"Share this article"}
  onClick={() => {
    // '.share' can only by called when
    // triggered by click-events to make
    // sure it's the user's intention.
    navigator.share?.({ 
      title: info.title,
      text: info.description,
      url: `${getBaseRoute(routes.posts)}/${info.slug.current}`,
    }).catch(console.error);
    
    // Optionally virbrate slightly.
     navigator.vibrate?.([30, 20, 10]);
  }}>
  <ShareIcon />
  <Typography>{"Share"}</Typography>
</Button>

ご覧のとおり、このコールバックは非同期共有関数を呼び出し（可能な場合）、いくつかのデータを提供して、適切なURL +説明的なタイトルとサブタイトルを共有シートに表示できるようにします。示されているコードは、この記事の最後にあるわずかに異なるバリアントで使用されています。ブラウザが共有をサポートしている場合、関連するボタンが[アクション]行に表示されます。

使用する場所

執筆時点では、APIは主に人気のあるブラウザ（Chrome、Opera、Safari）のモバイル版で使用できますが、デスクトップ上のSafari + Edgeでのみ使用できます。この機能は特定のハードウェア要件に限定されないため、今後数か月でサポートが増えると思います。

そうですね、これはWeb Share APIの簡単な紹介でした。詳細については、リンクされたweb.devと補遺のMDN記事を確認してください。

  • Tom

Suggestions

Categories