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
630
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
340
進化したWeb技術でPWAをネイティブアプリに近づける / frontend-conf-2023
yuhei_fujita
6
4.4k
ChatGPTの機能を フル活用してChatGPTを 理想の彼女Botにする / nyanju-1st
yuhei_fujita
4
4.1k
GitHub ActionsとDeployGateで始めるAndroidアプリのCICD
yuhei_fujita
2
860
手動テストの運用を GASで自動化した話 / gas-manage-test-operation
yuhei_fujita
1
490
開発ドキュメントの管理・閲覧に VitePress を使ってみて感じた良かった点と注意点 / document-with-vitepress
yuhei_fujita
0
1.1k
Other Decks in Programming
See All in Programming
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
チームリードになって変わったこと
isaka1022
0
190
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
Writing documentation can be fun with plugin system
okuramasafumi
0
120
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
最近のVS Codeで気になるニュース 2025/01
74th
1
250
Featured
See All Featured
Building an army of robots
kneath
302
45k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Six Lessons from altMBA
skipperchong
27
3.6k
Writing Fast Ruby
sferik
628
61k
GitHub's CSS Performance
jonrohan
1030
460k
GraphQLとの向き合い方2022年版
quramy
44
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Speed Design
sergeychernyshev
25
780
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/