Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PWAで共有機能を実装する / pwa-web-share-api
Search
Yuhei FUJITA
December 15, 2021
Programming
1
640
PWAで共有機能を実装する / pwa-web-share-api
Yuhei FUJITA
December 15, 2021
Tweet
Share
More Decks by Yuhei FUJITA
See All by Yuhei FUJITA
闇鍋VS Codeをプロファイル機能できれいにする / yami-nabe-vscode
yuhei_fujita
5
1.1k
GitHubとVitePressによる 開発ドキュメント運用 / escape-document-death
yuhei_fujita
3
360
進化したWeb技術でPWAをネイティブアプリに近づける / frontend-conf-2023
yuhei_fujita
6
4.4k
ChatGPTの機能を フル活用してChatGPTを 理想の彼女Botにする / nyanju-1st
yuhei_fujita
4
4.2k
GitHub ActionsとDeployGateで始めるAndroidアプリのCICD
yuhei_fujita
2
870
手動テストの運用を GASで自動化した話 / gas-manage-test-operation
yuhei_fujita
1
500
開発ドキュメントの管理・閲覧に VitePress を使ってみて感じた良かった点と注意点 / document-with-vitepress
yuhei_fujita
0
1.1k
Other Decks in Programming
See All in Programming
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
150
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
110
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
230
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
310
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
120
Domain-Driven Transformation
hschwentner
2
1.9k
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
560
Introduction to kotlinx.rpc
arawn
0
760
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
Open source software: how to live long and go far
gaelvaroquaux
0
660
生成AIで加速するテスト実装 - ロリポップ for Gamersの事例と 生成AIエディタの活用
kinosuke01
0
120
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
210
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Thoughts on Productivity
jonyablonski
69
4.5k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Adopting Sorbet at Scale
ufuk
74
9.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Speed Design
sergeychernyshev
27
810
Transcript
PWAで共有機能を実装する Yuhei FUJITA
自己紹介 名前:Yuhei FUJITA Twitter:@Yuhei_FUJITA 生息地:東京 趣味:フィルムカメラ・コーヒー屋巡り よく使う言語:TypeScript・Kotlin・Python よく使うフレームワーク:Vue.js・Django・Laravel お仕事:Android・Frontend・Backend
PWAでも共有機能を実装したい
共有といっても2つある 他のアプリに 共有する Web Share API 他のアプリから 共有される Web Share
Target API
Web Share API
Webからコンテンツを共有するためのAPI ←これをWebアプリから開けるようになる • ブラウザ自体の共有機能ではなく JavaScriptから共有メニューを開ける • 任意のコンテンツ(テキスト)を共有できる • PWAでなくても利用可能 •
主なモバイルブラウザやMac Safariで利用可能
navigator.share()に渡すデータ ブラウザがnavigator.share()を サポートしているかチェック navigator.share()は Promise<void>を返すので awaitをつける navigator.share()を呼び出して共有 https://developer.mozilla.org/ja/docs/Web/API/Navigator/share
Web Share API Level 2ではメディアコンテンツ対応 共有したい画像などを File[]として渡す ※使えるのはAndroid Chromeなど 一部のブラウザのみ
https://chromestatus.com/feature/4777349178458112
Web Share Target API
PWAを共有先に追加するAPI ←ここにインストールしたPWAが表示される • manifest.jsonに定義することで有効になる • GET/POSTで受け取れるものなら受け取れる • Safariは残念ながら非対応(いつものこと) • ネイティブアプリと違うのは複数設定はできない
渡されるPath HTTP Method (GET or POST) 渡される情報の定義 GETの場合はqueryとして渡される Web Share
Target APIの設定 manifest.jsonに設定内容を定義 例:GET /foo?title=aaa&text=bbb&url=ccc https://web.dev/web-share-target/
None
Advent Calendar 2021でも書いてます! ←ココ https://qiita.com/advent-calendar/2021/pwa
参考文献 • Navigator.share() - Web API | MDN ◦ https://developer.mozilla.org/ja/docs/Web/API/Navigator/share
• Web Share API Level 2 - Chrome Platform Status ◦ https://chromestatus.com/feature/4777349178458112 • Receiving shared data with the Web Share Target API ◦ https://web.dev/web-share-target/