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
750
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
6
1.4k
GitHubとVitePressによる 開発ドキュメント運用 / escape-document-death
yuhei_fujita
3
440
進化したWeb技術でPWAをネイティブアプリに近づける / frontend-conf-2023
yuhei_fujita
6
4.6k
ChatGPTの機能を フル活用してChatGPTを 理想の彼女Botにする / nyanju-1st
yuhei_fujita
4
4.4k
GitHub ActionsとDeployGateで始めるAndroidアプリのCICD
yuhei_fujita
2
960
手動テストの運用を GASで自動化した話 / gas-manage-test-operation
yuhei_fujita
1
580
開発ドキュメントの管理・閲覧に VitePress を使ってみて感じた良かった点と注意点 / document-with-vitepress
yuhei_fujita
0
1.3k
Other Decks in Programming
See All in Programming
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
320
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
130
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
17
6.2k
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
480
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
550
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
5
1.2k
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
PHPカンファレンス関西2025 基調講演
sugimotokei
5
1k
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
880
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
230
NEWT Backend Evolution
xpromx
1
160
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Gamification - CAS2011
davidbonilla
81
5.4k
Typedesign – Prime Four
hannesfritz
42
2.7k
Producing Creativity
orderedlist
PRO
346
40k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The Cult of Friendly URLs
andyhume
79
6.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
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/