Web Share Target APIを使うときのmanifest.jsonの書き方

色々調べたけどほしい情報がまとまってるところがなかったから調べた内容共有。

Web Share Target API?

他のアプリからの共有先に、自分のアプリを追加する機能。

このあたり見ればだいたいわかる。
PWAで使える（ようになる）機能3選 | フロントエンドBlog | ミツエーリンクス
Receiving shared data with the Web Share Target API

ネイティブアプリからは共有先にできないってのが残念だったけど、
確認したらネイティブアプリからも共有先にできてた。進化してた。
android端末以外ではまだ使える場面少ないにしても、PWA作るなら入れといて損はしないと思う。

実装方法

manifest.jsonにshare_targetを追加

manifest.jsonにshare_targetを追加するだけでWeb Share Target APIが使えるらしいからさくっと追加。

manifest.json

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

最初この書き方をしたらコンソールに警告が出た。

Manifest: Method should be set to either GET or POST. It currently defaults to GET.
Manifest: Enctype should be set to either application/x-www-form-urlencoded or multipart/form-data. It currently defaults to application/x-www-form-urlencoded

methodとenctypeは必須じゃないみたいだけど、書かないと警告が出るらしい。
動作は問題なさそうだけど、毎回警告出てるのもあれだから修正する。
ということで追加。

manifest.json

{
  "share_target": {
    "action": "/share-target/",
    "method": "GET",
    "enctype": "application / x-www-form-urlencoded",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url"
    }
  }
}

しかしまた警告。

Enctype should be set to either application/x-www-form-urlencoded or multipart/form-data. It currently defaults to application/x-www-form-urlencoded

言われた通り指定してるはずなのに、と悩んでたら、
"application/x-www-form-urlencoded"を、ついうっかり
"application / x-www-form-urlencoded"にしてみたい。

manifest.json

{
  "share_target": {
    "action": "/share-target/",
    "method": "GET",
    "enctype": "application/x-www-form-urlencoded",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url"
    }
  }
}

これで警告消えた。

共有時の動作

上記設定で他のアプリから共有を受け取る準備は終わってるから、あとは受け取るだけ。

javascript

const title = new URL(document.location).searchParams.get("title")

"action"で指定されてるページでこんな感じで受け取って、必要な処理書いとく。

Web Share APIと合わせて、PWAをネイティブアプリに近い感覚で使えるようになるこのあたりの機能。
実装にもさほど手間がかからないし、試しに導入してみるのもいいんじゃないかと思う。