Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@mndk_mendako

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

More than 1 year has passed since last update.

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

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

0
Help us understand the problem. What is going on with this article?
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.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?