PWAアプリをOSのシェアダイアログの一覧に登録させてデータをシェアする方法

前提条件

OSのシェアダイアログに自分のPWAアプリを登録させる機能は、

• Webサイトにmanifest.jsonを設置してある
• ユーザーの端末にAndroid Chrome 76以上がインストールされている

という二つの条件がマッチした場合にのみ実現できます。

似たような機能である「Web Share API」はmacOSのSafariやiOSのSafariにも対応していますが、OSシェアダイアログから呼び出すこの手法は、今のところ「Android Chrome 76以上がインストールされたAndroid端末でのみ」稼働します。

実装方法

OSのシェアダイアログ機能に自分のPWAアプリを登録する

OSのシェア機能に自分のPWAアプリを登録するには、PWAアプリの登録情報設定ファイルである「manifest.json」に「share_target」情報を追記します。

"share_target": {
  "action": "/webshare/",
  "method": "GET",
  "params": {
    "title": "title",
    "text": "text",
    "url": "url"
  }
}  

action、paramsが設定されていれば基本的には動きます。

ベースはWeb Share APIなので、paramsは

• title
• text
• url

を受け取ることができます。

paramsの設定値はちょっとややこしいですが、左辺のkeyは固定で右側のvalueの値が実際のURLのパラメータのkeyとして使われます。

つまり、

"share_target": {
  "action": "/webshare/",
  "method": "GET",
  "params": {
    "title": "taitoru",
    "text": "tekisuto",
    "url": "urldesu"
  }
}  

とすると、パラメータは、

?taitoru=シェア元のtitleの値&tekisuto=シェア元のtextの値&urldesu=シェア元のurlの値

となります。パラメータ的にはkeyとvalueが逆転するので混乱しないようにしましょう。

methodはデフォルトがGETなので、GETで良い場合は記述不要です。

データを暗号化したい場合は、

"enctype": "multipart/form-data"
"enctype": "application/x-www-form-urlencoded"

の二つが利用できます。

POSTの場合は「multipart/form-data」、GETの場合は「application/x-www-form-urlencoded」を設定します。

なお、OSシェアダイアログからはファイルを受け取ることもできます。paramsに「files」ブロックを追加すればOKです。

"params": {
  "title": "name",
  "text": "description",
  "url": "link",
  "files": [
    {
      "name": "records",
      "accept": ["text/csv", ".csv"]
    },
    {
      "name": "graphs",
      "accept": "image/svg+xml"
    }
  ]
}

ただし、ファイルを受け取る時は、

• methodはPOSTのみ
• enctypeが必須

という条件があります。

PWAアプリ側での挙動を追加する

上記の例で言えば、OSのシェアダイアログからPWAアプリを選択すると、

https://example.com/webshare/?title=XXX&text=YYY&url=ZZZ

というURLで呼び出されます。

つまり、ただのURLリンクをPWAとして呼び出しているだけなので、PWA側で対象ルートに処理を設定すればOKです。

上記の例でいうと「webshare」というルート上で、URLのGETパラメータで受け取った値をPWAアプリ内で何かに登録したり表示させるなど、好みの処理を入れればOKですね。

コンソールにエラーダイアログが出る場合

share_targetを設定していると、ブラウザのコンソールに下記のようなエラーが出ることがあります。

Manifest: Method should be set to either GET or POST. It currently defaults to GET. manifest.json:1

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 manifest.json:1

これは、share_targetの項目に「method」と「enctype」がないためです。

シェア動作に問題はありませんが、気になる場合は、「method」と「enctype」を追記しましょう。

"share_target": {
  "action": "/webshare/",
  "method": "GET",
  "enctype": "application/x-www-form-urlencoded",
  "params": {
    "title": "taitoru",
    "text": "tekisuto",
    "url": "urldesu"
  }
}  

PWAアプリをOSのシェアダイアログの一覧に登録させて、他のアプリからダイアログ経由でデータを受け取る方法をみてきました。

特別難しいことはないのですぐに実装できるのが大きなメリットである反面、対応端末が少ないのが悲しいところです。早く、他のOSやブラウザ（主にApple系）で対応してくれると良いですね。