Slide 1

Slide 1 text

React+PWA React Kyoto v0.2.0 (2017/08/01) 平野昌士 / @shisama

Slide 2

Slide 2 text

自己紹介 { "about": { "name": "Masashi Hirano", "works": "Weblio, Inc.", "twitter": "@shisama_", "github": "shisama" } }

Slide 3

Slide 3 text

スライドは公開します https://speakerdeck.com/masashi

Slide 4

Slide 4 text

Agenda PWAとは? PWAに必要なものは? React+PWAを試すには?

Slide 5

Slide 5 text

PWAとは?

Slide 6

Slide 6 text

ネイティブアプリの機能をモバ イルのWebでも実現するため のもの

Slide 7

Slide 7 text

PWAでできること 通信量の削減 ネイティブアプリのような使用感 ネイティブアプリのようなUI push通知・通知バーに表示 オフライン対応 Webなのでアプリの審査が無い Webなのでユーザーによるアップデート不 要

Slide 8

Slide 8 text

Twitter Lite is PWA

Slide 9

Slide 9 text

Twitter Lite is PWA React, Redux, Node.jsなどを利用

Slide 10

Slide 10 text

PWAのブラウザ対応状況 Chrome ‒> Desktop, Androidで利用可能 Chromium派生(Operaなど) ‒> Chrome と同じく利用可能 Firefox ‒> Web App Manifestの機能以外 は利用可能 Safari ‒> 未対応。Service Workerが動か ない Edge ‒> 対応予定 IE ‒> 当然未対応です

Slide 11

Slide 11 text

PWAに必要なもの は?

Slide 12

Slide 12 text

PWAに必要なもの App Shell Web App Manifest Service Worker

Slide 13

Slide 13 text

App Shell 通信量の削減 ネイティブアプリのような使用感 ネイティブアプリのようなUI push通知・通知バーに表示 オフライン対応 Webなのでアプリの審査が無い Webなのでユーザーがアップデートを行わ なくてもアプリは常に最新

Slide 14

Slide 14 text

App Shell アプリの骨格になる最低限のHTMLとCSS そのHTMLとCSSをキャッシュすることで 通信量を削減、読み込み速度の向上

Slide 15

Slide 15 text

App Shell

Slide 16

Slide 16 text

Web App Manifest 通信量の削減 ネイティブアプリのような使用感 ネイティブアプリのようなUI push通知・通知バーに表示 オフライン対応 Webなのでアプリの審査が無い Webなのでユーザーがアップデートを行わ なくてもアプリは常に最新

Slide 17

Slide 17 text

Web App Manifest

Slide 18

Slide 18 text

Web App Manifestに必要なもの manifest.jsonを作成 manifest.jsonをhtmlで読み込む

Slide 19

Slide 19 text

Service Worker 通信量の削減 ネイティブアプリのような使用感 ネイティブアプリのようなUI push通知・通知バーに表示 オフライン対応 Webなのでアプリの審査が無い Webなのでユーザーがアップデートを行わ なくてもアプリは常に最新

Slide 20

Slide 20 text

Service Worker

Slide 21

Slide 21 text

Service Workerに必要なもの キャッシュ処理などを行うJSファイル そのJSファイルをService Workerに登録す る処理

Slide 22

Slide 22 text

3つの要素は段階的に導入できます Progressiveには「段階的に前進する」とい う意味があります

Slide 23

Slide 23 text

React+PWAを試す には?

Slide 24

Slide 24 text

React+PWAを簡単に試すこ とができます

Slide 25

Slide 25 text

Google I/O 2017でこんな発 表がありました

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

create‒react‒appでPWA デフォルトでPWAになっている jeffposnick/create‒react‒pwaを取り込ん だ NODE̲ENV=productionのみService Workerが動くので、どこかにホスティング して動作確認してください やってみた

Slide 28

Slide 28 text

開発者ツールでService Workerが動いて ることを確認

Slide 29

Slide 29 text

やってみたこと(導入~デプロ イ) $ 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

Slide 30

Slide 30 text

create‒react‒app内部でやっ ていること npm run buildするとmanifest.jsonと Service Worker内で動くJSファイルを自動 生成 その自動生成されたJSファイルをService Workerに登録する関数をindex.js内で呼び 出している

Slide 31

Slide 31 text

他にもReact+PWAを簡単に 試せます paulhoughton/react‒pwa (シンプル) paulhoughton/preact‒pwa (react‒pwaの preact版) localnerve/react‒pwa‒reference (リッチ) choumx/amp‒pwa (AMP入り) insin/react‒hn (Hacker News読めるやつ)

Slide 32

Slide 32 text

まとめ PWAはWebの可能性を広げるもの PWAは段階的に導入できます React+PWAを試すのは簡単

Slide 33

Slide 33 text

参考 ・ ・ ・ ・ ・ ・ はじめてのプログレッシブ ウェブアプリ 脱ネイティブ!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

Slide 34

Slide 34 text

最後に宣伝 大阪でWebRTC Meetupが初開催されま す!

Slide 35

Slide 35 text

ご清聴ありがとうございました