React+PWA

React Kyoto v0.2.0 https://react-kyoto.connpass.com/event/61986/
でLTしました
Github Pages https://shisama.github.io/slides/assets/20170801-react-kyoto/slide.html#/

Transcript

1. React+PWA React Kyoto v0.2.0 (2017/08/01) 平野昌士 / @shisama
2. 自己紹介 { "about": { "name": "Masashi Hirano", "works": "Weblio, Inc.", "twitter": "@shisama_", "github": "shisama" } }
3. スライドは公開します https://speakerdeck.com/masashi
4. Agenda PWAとは？ PWAに必要なものは？ React+PWAを試すには？
5. PWAとは？
6. ネイティブアプリの機能をモバ イルのWebでも実現するため のもの
7. PWAでできること 通信量の削減 ネイティブアプリのような使用感 ネイティブアプリのようなUI push通知・通知バーに表示 オフライン対応 Webなのでアプリの審査が無い Webなのでユーザーによるアップデート不 要
8. Twitter Lite is PWA
9. Twitter Lite is PWA React, Redux, Node.jsなどを利用
10. PWAのブラウザ対応状況 Chrome ‒> Desktop, Androidで利用可能 Chromium派生(Operaなど） ‒> Chrome と同じく利用可能 Firefox ‒> Web App Manifestの機能以外 は利用可能 Safari ‒> 未対応。Service Workerが動か ない Edge ‒> 対応予定 IE ‒> 当然未対応です
11. PWAに必要なもの は？
12. PWAに必要なもの App Shell Web App Manifest Service Worker
13. App Shell 通信量の削減 ネイティブアプリのような使用感 ネイティブアプリのようなUI push通知・通知バーに表示 オフライン対応 Webなのでアプリの審査が無い Webなのでユーザーがアップデートを行わ なくてもアプリは常に最新
14. App Shell アプリの骨格になる最低限のHTMLとCSS そのHTMLとCSSをキャッシュすることで 通信量を削減、読み込み速度の向上
15. App Shell
16. Web App Manifest 通信量の削減 ネイティブアプリのような使用感 ネイティブアプリのようなUI push通知・通知バーに表示 オフライン対応 Webなのでアプリの審査が無い Webなのでユーザーがアップデートを行わ なくてもアプリは常に最新
17. Web App Manifest
18. Web App Manifestに必要なもの manifest.jsonを作成 manifest.jsonをhtmlで読み込む
19. Service Worker 通信量の削減 ネイティブアプリのような使用感 ネイティブアプリのようなUI push通知・通知バーに表示 オフライン対応 Webなのでアプリの審査が無い Webなのでユーザーがアップデートを行わ なくてもアプリは常に最新
20. Service Worker
21. Service Workerに必要なもの キャッシュ処理などを行うJSファイル そのJSファイルをService Workerに登録す る処理
22. 3つの要素は段階的に導入できます Progressiveには「段階的に前進する」とい う意味があります
23. React+PWAを試す には？
24. React+PWAを簡単に試すこ とができます
25. Google I/O 2017でこんな発 表がありました
27. create‒react‒appでPWA デフォルトでPWAになっている jeffposnick/create‒react‒pwaを取り込ん だ NODE̲ENV=productionのみService Workerが動くので、どこかにホスティング して動作確認してください やってみた
28. 開発者ツールでService Workerが動いて ることを確認
29. やってみたこと（導入～デプロ イ） $ npm install -g create-react-app $ create-react-app react-pwa-app $ cd react-pwa-app $ npm install && npm run build $ git add . && git commit -m "initial commit" $ npm install -g gh-pages $ gh-pages -d build
30. create‒react‒app内部でやっ ていること npm run buildするとmanifest.jsonと Service Worker内で動くJSファイルを自動 生成 その自動生成されたJSファイルをService Workerに登録する関数をindex.js内で呼び 出している
31. 他にもReact+PWAを簡単に 試せます paulhoughton/react‒pwa (シンプル) paulhoughton/preact‒pwa (react‒pwaの preact版) localnerve/react‒pwa‒reference (リッチ) choumx/amp‒pwa (AMP入り) insin/react‒hn (Hacker News読めるやつ)
32. まとめ PWAはWebの可能性を広げるもの PWAは段階的に導入できます React+PWAを試すのは簡単
33. 参考 ・ ・ ・ ・ ・ ・ はじめてのプログレッシブ ウェブアプリ 脱ネイティブ！Googleが推進する「PWA」にたった数時間で対応する 方法 サンプルコードで学ぶPWA Getting Started with Progressive Web Apps Production Progressive Web Apps With JavaScript Frameworks (Google I/O '17) How we built Twitter Lite
34. 最後に宣伝 大阪でWebRTC Meetupが初開催されま す！
35. ご清聴ありがとうございました