概念的で難しいPWAの捉え方を、どうやったらわかりやすく理解できるか考えた資料です。 PWAのお仕事のご相談はこちらで受け付けています！ https://www.tam-tam.co.jp/pwa/

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

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

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

4. Wikipediaに「PWA」がない！

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

6. ごちゃごちゃややこしい説明例
「ネイティブアプリみたいな」は分かりやすいけど
実際のところPWAが何かがよくわからない

7. ごちゃごちゃややこしい説明例
機能面で理解しようとすると、
「オフライン対応とプッシュ通知」だけがPWAとおもってしまう

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

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

10. これでどうだろう？
PWAは「（最新の環境に合わせた）先進的なWebアプリケーション」
のこと
Googleが提唱した概念で、
・ネットワークに依存せず（Reliable）
・表示が早くて、アクションもスムーズで（Fast）
・プッシュ通知やホームボタンに追加できる（Engaging）
というこれまでにない新しいUXを提供するWebアプリケーションを目指しています。
最低限これを対応したらPWAというガイドラインもあります。
参考）
Progressive Web App Checklist（Baseline Progressive Web Apps Checklist）
https://developers.google.com/web/progressive-web-apps/checklist
Progressive Web App
https://developers.google.com/web/progressive-web-apps/

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

12. いままでもできたこと
最近できるようになってきたこと
これからできるようになること
ブラウザ環境は絶えず進化している
Service Worker/Web App Manifestが使えるように。
・ブラウザプッシュ通知
・ホームボタン追加の案内
・ブラウザでキャッシュのコントロールができるように。
…
ブラウザのAPIが充実
・Badging API、Payment Request API…
よりネイティブ機能へのアクセスが充実していく
・cssでのリッチな表現
・JSでつるつる動くサイト（SPA等）
・非同期でのデータ通信
…
[ブラウザにできること]

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

14. 思い出そう
「Progressive Enhancement」

15. 2012年頃の話

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

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

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

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

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

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

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

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

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

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

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

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

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

31. MicrosoftもPWA押し。

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