Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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
ご清聴ありがとうございました