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
Hitoshi Sumiya
September 18, 2019
Technology
4
1.6k
なぜ今PWAがきているのか トレンドの背景
Hitoshi Sumiya
September 18, 2019
Tweet
Share
More Decks by Hitoshi Sumiya
See All by Hitoshi Sumiya
【メタバース研究開発支援】 VRChatワールド制作・イベント開催支援
hitoshi_sumiya
0
2.9k
Other Decks in Technology
See All in Technology
ある編集者のこれまでとこれから —— 開発者コミュニティと歩んだ四半世紀
inao
5
3.5k
プロジェクトの空気を読んで開発してくれるPerlのAIツールがほしい
kfly8
2
110
2ヶ月で新規事業のシステムを0から立ち上げるスタートアップの舞台裏
shmokmt
0
250
米軍Platform One / Black Pearlに学ぶ極限環境DevSecOps
jyoshise
2
510
なぜブラウザで帳票を生成したいのか どのようにブラウザで帳票を生成するのか
yagisanreports
0
150
メッセージ駆動が可能にする結合の最適化
j5ik2o
6
710
都市スケールAR制作で気をつけること
segur
0
180
TypeScript 6.0で非推奨化されるオプションたち
uhyo
9
2.5k
JJUG CCC 2025 Fall バッチ性能!!劇的ビフォーアフター
hayashiyuu1
1
380
マルチドライブアーキテクチャ: 複数の駆動力でプロダクトを前進させる
knih
0
6.4k
入社したばかりでもできる、 アクセシビリティ改善の第一歩
unachang113
2
330
その意思決定、まだ続けるんですか? ~痛みを超えて未来を作る、AI時代の撤退とピボットの技術~
applism118
17
11k
Featured
See All Featured
Side Projects
sachag
455
43k
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
A better future with KSS
kneath
239
18k
Why Our Code Smells
bkeepers
PRO
340
57k
YesSQL, Process and Tooling at Scale
rocio
174
15k
How STYLIGHT went responsive
nonsquared
100
5.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.8k
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は一過性のものではなく 大きなトレンドととらえて みんなで一緒に勉強していきましょう!