PWAのトレンド背景を考える

PWAってなに？
トレンドの背景を考えてみる
TAM 角谷仁

自己紹介
角谷仁すみやひとし
@hitoshisum
・PWA Nightコミュニティ運営
・ディレクター11年
・開発チーム30名のマネージャ
・デジタル戦略の立案、開発案件のPMなど
・趣味は釣り
TAM 取締役

PWAをただしく認識してみよう

Wikipediaに「PWA」がない！

概念的すぎてよくわからない
ごちゃごちゃややこしい説明例

「ネイティブアプリみたいな」は分かりやすいけど
実際のところPWAが何かがよくわからない

機能面で理解しようとすると、
「オフライン対応とプッシュ通知」だけがPWAとおもってしまう

技術面だけで理解しようとすると
「Service Worker」や「Manifest」をいれてれば
PWAっておもっちゃう。

本質は「よりよいウェブ体験」を作っていくこと。
これにつきる。
みんなでいいウェブの世界を
作っていこうね～

これでどうだろう？
PWAは「（最新の環境に合わせた）先進的なWebアプリケーション」
のこと
Googleが提唱した概念で、
・ネットワークに依存せず（Reliable）
・表示が早くて、アクションもスムーズで（Fast）
・プッシュ通知やホ...

先進的ってどういうこと？

いままでもできたこと
最近できるようになってきたこと
これからできるようになること
ブラウザ環境は絶えず進化している
Service Worker/Web App Manifestが使えるように。
・ブラウザプッシュ通知
・ホームボタン追加の案...

Progressive=進歩的、先進的、段階的「よりよくしていこう」

思い出そう
「Progressive Enhancement」

https://codepen.io/matuzo/pen/Emddvx

あくまでPWAは手段
よりよいWeb体験を作っていくのが大事だよ

進歩的なウェブっていうのを体感してみよう

実際にPWAを触って、
少し先に進んだウェブ体験を実感してみよう
https://voice.ameba.jp/

・オフラインでもサイト表示
・記事の下書き保存
・音声録音
・オフラインレコーディング
・オフライン検知－通知
・録音開始/終了時バイブレーション
・デスクトップPWA
スライドはこちら
https://t.co/N8othfvV2O
やってる...

https://mobile.twitter.com/
Twitter Lite
https://www.instagram.com/
Instagram

デスクトップPWA （Spotify）
https://open.spotify.com/browse/featured?utm_source=pwa_install

トレンドはどんな感じでやってきそうか

いまPWAが来てる感じって
2012年頃にレスポンシブが来た時にすごく良く似てる。

最近リリースされた有名なPWA

https://appsco.pe/
このサイトにたくさんPWA事例のってる

iOSでプッシュ通知が
できるようになったら
できること増えてきたら
要因１．ブラウザがより進化すれば、前に進む力が働く。

要因２．クロスプラットフォームアプリとしてのPWA
iOS：Objective-C、Xcode
Android：Java, Eclipse
Windows：C#、Visual Studio

こんなツールもでてきた。
https://www.glideapps.com/

PWAのトレンド背景を考える

Hitoshi Sumiya