Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
なぜ今PWAがきているのか トレンドの背景
Hitoshi Sumiya
September 18, 2019
Technology
4
1.2k
なぜ今PWAがきているのか トレンドの背景
Hitoshi Sumiya
September 18, 2019
Tweet
Share
Other Decks in Technology
See All in Technology
runn is a package/tool for running operations following a scenario. / golang.tokyo #32
k1low
1
240
事業の成長と共に歩む、ABEMA SRE探求の歴史 / SRE-Next 2022
nagaa052
0
460
信頼性の階層の一段目を積み上げる/Monitoring Dashboard
shonansurvivors
0
180
GitHub Actionsを使用してGoogle Play Consoleに自動アップロード
takenaga7
0
230
長年運用されてきたモノリシックアプリケーションをコンテナ化しようとするとどんな問題に遭遇するか? / SRE NEXT 2022
nulabinc
PRO
15
8k
E2E自動テスト導入・運用をめぐる先入観と実際に起きたこと / Preconceptions and What Happened with E2E Testing
ak1210
5
1.3k
Whats new in Android Media?
myolwin00
2
120
プロダクション環境の信頼性を損ねず観測する技術
egmc
4
790
CAMのサービス開発の歴史と共通基盤を使った 開発スタイルへの変遷について
ishikawa_pro
0
110
YAMLを書くだけで構築できる分散ストレージ
sat
PRO
0
220
ドキュメントの翻訳に必要なこと
mayukosawai
0
180
[SRE NEXT 2022]メルカリグループにおけるSREs
srenext
0
470
Featured
See All Featured
A Tale of Four Properties
chriscoyier
149
20k
In The Pink: A Labor of Love
frogandcode
130
21k
Agile that works and the tools we love
rasmusluckow
319
19k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
Building an army of robots
kneath
299
40k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
KATA
mclloyd
7
8.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.3k
Visualization
eitanlees
124
11k
Done Done
chrislema
174
14k
Intergalactic Javascript Robots from Outer Space
tanoku
261
25k
Scaling GitHub
holman
451
140k
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は一過性のものではなく 大きなトレンドととらえて みんなで一緒に勉強していきましょう!