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
420
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
480
GitHubとVitePressによる 開発ドキュメント運用 / escape-document-death
yuhei_fujita
3
200
進化したWeb技術でPWAをネイティブアプリに近づける / frontend-conf-2023
yuhei_fujita
6
3.7k
ChatGPTの機能を フル活用してChatGPTを 理想の彼女Botにする / nyanju-1st
yuhei_fujita
4
3.7k
GitHub ActionsとDeployGateで始めるAndroidアプリのCICD
yuhei_fujita
2
590
手動テストの運用を GASで自動化した話 / gas-manage-test-operation
yuhei_fujita
1
360
開発ドキュメントの管理・閲覧に VitePress を使ってみて感じた良かった点と注意点 / document-with-vitepress
yuhei_fujita
0
680
Other Decks in Programming
See All in Programming
SIMD Parallel Programming with the Vector API
josepaumard
0
220
try! Swift Tokyo 初参加報告LT
hinakko2
0
230
VS Code をプロダクトにどう取り込むか
onomax
1
640
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
160
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
180
Domain-Driven Transformation
hschwentner
2
1.5k
敵対的ポイフル
futabato
0
130
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
200
Next.js App Router
quramy
11
1.6k
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
860
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
220
Fast JSX: Don't clone props object #28768
yossydev
1
160
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
19
6.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
65
14k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
The Cult of Friendly URLs
andyhume
74
5.7k
The Cost Of JavaScript in 2023
addyosmani
20
3.9k
Writing Fast Ruby
sferik
622
60k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
38
2.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Clear Off the Table
cherdarchuk
85
310k
Building Effective Engineering Teams - LeadDev
addyosmani
32
1.9k
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/