Web Share Target APIについて
WebサイトをPWA化することによってネイティブアプリと同じような使い方ができるようになっているが、その機能の一つの「共有先として公開できる機能」― Web Share Target APIについて紹介する。
What is Web Share Target API?
Web Share Target APIとは、Webサイトでよくある 共有ボタンを押したところに自分のサイトを表示できる機能。ここからサイトに文字列の共有を行い、ブックマークの追加、記事の新規作成などを行うことができるようになる。
このポップアップ部分に自分のウェブアプリケーションを表示できる。
また、Web Share Target Level 2からは文字列だけではなくファイルの共有も可能になった。これにより、画像の共有を行えるようになる。
対応ブラウザ
実装
サイトのmanifest.jsonにshare_targetフィールドを追加する。
今回はサイトURLのQRコードを表示するサイトをサンプルに紹介する。
{
...
+ "share_target":{
+ "action": "/make-qr-code/",
+ "method": "GET",
+ "params": {
+ "title": "title",
+ "text": "text",
+ "url": "url"
+ }
+ },
...
}
これを追加し、このアプリにURを共有した場合、以下のURLでリクエストが発生する。
https://example.com/make-qr-code/?url=<url>
あとはこれを煮るなり焼くなり好きに処理することができる。
各フィールドの解説
action: string
共有ターゲットの送り先を宣言する。
method: "GET" | "POST" = "GET"
フォームの送信方法を宣言する。
GETはクエリパラメータを用いて送信される。
POSTは共有によって何らかの副作用が出る場合に使用される。
特にenctypeフィールドの有無で挙動が変わる。
enctype=application/x-www-form-urlencoded
x-www-form-urlencodedという型でフォームを送信する。
enctype=multipart/form-data
上野と同様にmultipart/form-dataという型で送信する。(おそらくこちらのほうが一般的?)
enctype: "application/x-www-form-urlencoded":"multipart/form-data" = "application/..."
さっき紹介したもの。フォームを送信する際の型を決める。
params
どの種類のデータをどんな名前で送信するのかを宣言する。
プロパティとして、title,text,urlそして、Level 2で追加されたfilesを指定できる。
最初の三つは文字列を指定でき、それがフォームのキーとして送信される。
例えば、
+ "title": "a",
+ "text": "b",
+ "url": "c"
と指定した場合、送信されるURLは、/?a=...&b=...&c=...となる。
filesは文字列ではなく、nameとacceptプロパティを持つオブジェクトの配列を指定する。
例えば、画像と、文章(.xsl .csv)を受け取りたい場合、このように指定する。
+ "files": [
+ {
+ "name":"img",
+ "accept": [ "image/jpeg" ]
+ },
+ {
+ "name":"doc",
+ "accept": [ "text/csv", ".csv", ".xsl"]
+ }
+ ]
Service Worker
ちなみにこのリクエストは通常と同じように送信されるため、サービスワーカーで仲介できる。つまり、オフラインの場所にいても動作させることができる。また、クライアント側だけでの画像処理なども実装することができる。
終わりに
初投稿です。だいぶ硬くて変な文章になってしまった気もして、先人の書き手の人たちのすごさを感じましたが、書きたいことをかけたので満足です。
Discussion