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がきているのか トレンドの背景
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Hitoshi Sumiya
September 18, 2019
Technology
4
1.7k
なぜ今PWAがきているのか トレンドの背景
Hitoshi Sumiya
September 18, 2019
Tweet
Share
More Decks by Hitoshi Sumiya
See All by Hitoshi Sumiya
【メタバース研究開発支援】 VRChatワールド制作・イベント開催支援
hitoshi_sumiya
0
3k
Other Decks in Technology
See All in Technology
Phase04_ターミナル基礎
overflowinc
0
2.6k
Zephyr(RTOS)でOpenPLCを実装してみた
iotengineer22
0
140
SSoT(Single Source of Truth)で「壊して再生」する設計
kawauso
2
380
Cursor Subagentsはいいぞ
yug1224
2
110
昔話で振り返るAWSの歩み ~S3誕生から20年、クラウドはどう進化したのか~
nrinetcom
PRO
0
100
AgentCoreとLINEを使った飲食店おすすめアプリを作ってみた
yakumo
2
260
AIエージェント×GitHubで実現するQAナレッジの資産化と業務活用 / QA Knowledge as Assets with AI Agents & GitHub
tknw_hitsuji
0
260
20260323_データ分析基盤でGeminiを使う話
1210yuichi0
0
190
TUNA Camp 2026 京都Stage ヒューリスティックアルゴリズム入門
terryu16
0
570
開発チームとQAエンジニアの新しい協業モデル -年末調整開発チームで実践する【QAリード施策】-
qa
0
360
「活動」は激変する。「ベース」は変わらない ~ 4つの軸で捉える_AI時代ソフトウェア開発マネジメント
sentokun
0
110
OpenClawでPM業務を自動化
knishioka
1
280
Featured
See All Featured
KATA
mclloyd
PRO
35
15k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.6k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
650
Mind Mapping
helmedeiros
PRO
1
130
How to train your dragon (web standard)
notwaldorf
97
6.6k
Design in an AI World
tapps
0
180
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
91
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
10k
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
2
180
Imperfection Machines: The Place of Print at Facebook
scottboms
269
14k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
250
The Invisible Side of Design
smashingmag
302
51k
Transcript
なぜ今PWAがきているのか トレンドの背景 TAM 角谷 仁
自己紹介 角谷 仁 すみやひとし @hitoshisum ・PWA Nightコミュニティ運営 ・プロジェクトマネージャ/ディレクター11年 ・父親歴1.5年 ・開発チーム30名のマネージャ
・デジタル戦略の立案、開発案件のPMなど ・趣味は釣り TAM プロデューサー
このセッションのゴール ・PWAをただしく理解すること ・PWAを身近に感じてみること
ちなみに今日来てる人? ・職種 ・PWAへの関わり度
PWAってなに?
https://mobile.twitter.com/ Twitter Lite https://www.instagram.com/ Instagram 触ってみよう!
身近なPWA
https://appsco.pe/
PWA、なんとなくはわかるけど なんと説明したらいいかよくわからない…
概念的すぎてよくわからない ややこしい説明例
「ネイティブアプリみたいな」は分かりやすいけど 実際のところPWAが何かがよくわからない ややこしい説明例
機能面で理解しようとすると、 「オフライン対応とプッシュ通知」だけがPWAとおもってしまう ややこしい説明例
技術面だけで理解しようとすると 「Service Worker」や「Manifest」をいれてれば PWAっておもっちゃう。 ややこしい説明例
本質は「よりよいウェブ体験」を作っていくこと。 みんなでいいウェブの世界を 作っていこうね~
こう説明するのがいいと思う。 PWA=(最新の環境に合わせた)先進的なWebアプリケーション Googleが提唱した概念で、 ・ネットワークに依存せず(Reliable) ・表示が早くて、アクションもスムーズで(Fast) ・プッシュ通知やホームボタンに追加できる(Engaging) というこれまでにない新しいUXを提供するWebアプリケーションを目指しています。
先進的ってどういうこと?
いままでもできたこと 最近できるようになってきたこと これからできるようになること ブラウザは絶えず進化している Service Worker/Web App Manifestが使えるように。 ・ブラウザプッシュ通知 ・ホームボタン追加の案内
・ブラウザでキャッシュのコントロールができるように。 … ブラウザのAPIが充実 ・Badging API、Payment Request API… よりネイティブ機能へのアクセスが充実していく ・cssでのリッチな表現 ・JSでつるつる動くサイト(SPA等) ・非同期でのデータ通信 … [ブラウザにできること]
Progressive=進歩的、先進的、段階的「よりよくしていこう」
思い出そう 「Progressive Enhancement」
2012年頃の話
https://codepen.io/matuzo/pen/Emddvx
よりよいWeb体験を作っていこう!
トレンドをつかもう
いまPWAが来てる感じって 2012年頃にレスポンシブがトレンドになった時とすごく良く似てる。
None
・ブラウザが進化したことで普及した点 ・クロスプラットフォーム対応の方法である点 ・Googleさんが推進している点 何が似てる?
iOSでプッシュ通知が できるようになったら… できること増えてきたら ブラウザが進化したことで普及した。
ブラウザはどんどん進化している ブラウザでよりネイティブに近い体験ができるようになっていってる。
クロスプラットフォーム対応の方法である点 iOS: Objective C, Xcode Android: Java, Eclipse Windows: C#,
Visual Studio
ネイティブあるある ・アプリを開発できる優秀なエンジニアが給料の高い会社に転職 ・ネイティブアプリを作ったけど、ダウンロード数が1000以下 ・低評価→ダウンロードされない ・最初だけでなくすべてがダブルコスト。ちょっとしたことで予算がなくなる ・2つあるがために、改善するサイクルが遅くなってしまう ・OSのバージョンアップに伴う対応 / 新しい画面サイズ対応 ・改修の度にいちいち審査が必要
MicrosoftもPWA押し。
Googleさんが推進している点
None
Googleフォト Google Map Go Google 検索
None
このPWA Nightでも・・・
こんなツールもでてきた。 https://www.glideapps.com/
僕はPWAはウェブに関わる人の未来と思ってます。 PWAは一過性のものではなく 大きなトレンドととらえて みんなで一緒に勉強していきましょう!