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
   

   View Slide

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

   View Slide

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

   View Slide

4. Agenda
   PWAとは？
   PWAに必要なものは？
   React+PWAを試すには？
   

   View Slide

5. PWAとは？
   

   View Slide

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

   View Slide

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

   View Slide

8. Twitter Lite is PWA
   

   View Slide

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

   View Slide

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

    View Slide

11. PWAに必要なもの
    は？
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. App Shell
    

    View Slide

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

    View Slide

17. Web App Manifest
    

    View Slide

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

    View Slide

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

    View Slide

20. Service Worker
    

    View Slide

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

    View Slide

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

    View Slide

23. React+PWAを試す
    には？
    

    View Slide

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

    View Slide

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

    View Slide

26. View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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読めるやつ)
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide