React+PWA - Speaker Deck

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になっている jeﬀposnick/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