Help us understand the problem. What is going on with this article?

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をネイティブアプリに近い感覚で使えるようになるこのあたりの機能。
実装にもさほど手間がかからないし、試しに導入してみるのもいいんじゃないかと思う。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした