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
670
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.2k
GitHubとVitePressによる 開発ドキュメント運用 / escape-document-death
yuhei_fujita
3
380
進化したWeb技術でPWAをネイティブアプリに近づける / frontend-conf-2023
yuhei_fujita
6
4.5k
ChatGPTの機能を フル活用してChatGPTを 理想の彼女Botにする / nyanju-1st
yuhei_fujita
4
4.2k
GitHub ActionsとDeployGateで始めるAndroidアプリのCICD
yuhei_fujita
2
900
手動テストの運用を GASで自動化した話 / gas-manage-test-operation
yuhei_fujita
1
520
開発ドキュメントの管理・閲覧に VitePress を使ってみて感じた良かった点と注意点 / document-with-vitepress
yuhei_fujita
0
1.2k
Other Decks in Programming
See All in Programming
Day0 初心者向けワークショップ実践!ソフトウェアテストの第一歩
satohiroyuki
0
410
今から始めるCursor / Windsurf / Cline
kengo_hayano
0
110
RubyKaigiで手に入れた HHKB Studioのための HIDRawドライバ
iberianpig
0
1k
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
280
複雑なフォームと複雑な状態管理にどう向き合うか / #newt_techtalk vol. 15
izumin5210
4
3k
snacks.nvim内のセットアップ不要なプラグインを紹介 / introduce_snacks_nvim
uhooi
0
340
PHPでお金を扱う時、終わりのない 謎の1円調査の旅にでなくて済む方法
nakka
3
1.2k
OpenTelemetryを活用したObservability入門 / Introduction to Observability with OpenTelemetry
seike460
PRO
0
320
PHPUnit 高速化テクニック / PHPUnit Speedup Techniques
pinkumohikan
1
1.2k
goにおける コネクションプールの仕組み を軽く掘って見た
aronokuyama
0
140
エンジニア未経験が最短で戦力になるためのTips
gokana
0
210
令和トラベルにおけるコンテンツ生成AIアプリケーション開発の実践
ippo012
1
260
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
A Modern Web Designer's Workflow
chriscoyier
693
190k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.4k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
7
620
4 Signs Your Business is Dying
shpigford
183
22k
Building Adaptive Systems
keathley
41
2.5k
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/