Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React+PWA

 React+PWA

Masashi Hirano

August 01, 2017
Tweet

More Decks by Masashi Hirano

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. PWAとは?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Twitter Lite is PWA

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. PWAに必要なもの
    は?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Web App Manifest

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. Service Worker

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. React+PWAを試す
    には?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. create‒react‒appでPWA
    デフォルトでPWAになっている
    jeffposnick/create‒react‒pwaを取り込ん

    NODE̲ENV=productionのみService
    Workerが動くので、どこかにホスティング
    して動作確認してください
    やってみた

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

  29. 他にも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 full-size slide

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

    View full-size slide

  31. 参考






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

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

    View full-size slide

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

    View full-size slide