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

ゼロから始めるPWA入門

syumai
April 06, 2018

 ゼロから始めるPWA入門

syumai

April 06, 2018
Tweet

More Decks by syumai

Other Decks in Programming

Transcript

  1. ゼロから始めるPWA入門
    @__syumai
    2018.4.6 Webエンジニア勉強会 #06

    View full-size slide

  2. 自己紹介
    しゅーまい
    ダックリングズ株式会社
    フロントエンド / サーバーサイド 担当
    VR / ウェディング関連のサービスをやってるベンチャー
    エンジニアは2名
    4月で新卒3年目
    最近はReact Native / Rails / Vue.jsをやってます
    Twitter: @__syumai(アンダーバー2
    つ)
    GitHub: syumai

    View full-size slide

  3. 入門と言うより、勉強の記録です…汗
    => github.com/syumai/sw-playground

    View full-size slide

  4. 目次
    1. Progressive Web App (PWA) とは
    2. PWAの構成要素
    3. 開発ツールについて
    4. Service Workerで遊んでみた
    5. 次に試したい事

    View full-size slide

  5. Progressive Web Appとは

    View full-size slide

  6. 『はじめてのプログレッシブウェブアプリ | Web | Google Developers』
    https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja

    View full-size slide

  7. ウェブとアプリの両方の利点

    View full-size slide

  8. ウェブの利点
    ● 手軽
    ● 更新が楽
    ● データが軽い

    View full-size slide

  9. アプリの利点
    ● オフライン利用可
    ● Push通知
    ● 動作が軽い

    View full-size slide

  10. アプリの利点
    ● オフライン利用可
    ● Push通知
    ● 動作が軽い
    ↑PWAなら実現できる!

    View full-size slide

  11. 利用事例
    ● Twitter Lite
    ○ データセーバー機能あり、省データに特化
    ● Instagram
    ○ 画像フィルタも使える

    View full-size slide

  12. 初回ダウンロード => 4.1MB
    アプリ => 約35MB
    Twitter Lite

    View full-size slide

  13. 初回ダウンロード => 47.8KB
    アプリ => 約34MB
    Instagram

    View full-size slide

  14. PWAの構成要素

    View full-size slide

  15. 主要なPWAの構成要素
    ● Service Worker (一番大事!)
    ● Cache Storage
    ● Web App Manifest

    View full-size slide

  16. 今回紹介しないもの
    ● Web Push API / Web Notification API
    ○ 昔はGCMとか必要で設定めっちゃ大変だった
    ● IndexedDB
    ○ SWから非同期的に扱えるNoSQL DB
    他にもいろいろあります

    View full-size slide

  17. Service Worker

    View full-size slide

  18. Service Worker
    ● Webページのバックグラウンドで走るスクリプト
    ● 別のスクリプトからインストールする
    ● 閲覧中のページのDOM操作などは行わない
    ● ブラウザを閉じても、通知の待ち受けなどに使える
    ● Webのリクエストに介入できる

    View full-size slide

  19. Service Worker
    ● Webページのバックグラウンドで走るスクリプト
    ● 別のスクリプトからインストールする
    ● 閲覧中のページのDOM操作などは行わない
    ● ブラウザを閉じても、通知の待ち受けなどに使える
    ● Webのリクエストに介入できる
    ↑リクエストを捕まえて、任意のレスポンスを返せる!

    View full-size slide

  20. Service Worker
    ● かなり強力な機能のため、SSL環境 or localhostでしか動きません

    View full-size slide

  21. Cache Storage

    View full-size slide

  22. Cache Storage
    ● 開発者が完全にコントロール出来るキャッシュストレージ
    ● html, css, js, 画像など、Webサイト上の任意のファイルを保存出来る
    ● ドメインごとに保存される
    ● ネームスペースが切れる (v1など)
    ● 明示的に削除しない限りクリアされない

    View full-size slide

  23. Cache Storageから取り出して
    Service Workerから返す

    オフラインで完全に動作する
    Webサイトが作れる!

    View full-size slide

  24. Web App Manifest

    View full-size slide

  25. Web App Manifest
    ● Webサイトのアプリとしての振る舞いを定義する
    ● アイコン
    ● アプリ名
    ● テーマカラー (AndroidのChrome等で有効)
    ● ホームURL
    ● デバイスの向き
    ● フルスクリーンかどうか など

    View full-size slide

  26. インストールしたアプリと同じように、
    ホームから開けるようになる!

    View full-size slide

  27. 開発ツールについて

    View full-size slide

  28. Chrome Dev Toolsが最強

    View full-size slide

  29. Chrome Dev Tools
    ● Service Workerのデバッグが簡単
    ● バックグラウンドで動いていても、ブレークポイント置いたり出来る
    ● オフライン環境の再現もチェック一つで
    ● リロードでService Workerをアップデートできるオプションも

    View full-size slide

  30. Chrome Dev Tools
    ● Cache Storageの中身を簡単に見れる
    ● 即座に削除も可能

    View full-size slide

  31. 開発ツールの詳細は、
    Totally Tooling Tips (S3)
    をYouTubeで!
    https://www.youtube.com/playlist?list=PLNYkxOF6rcIB3ci
    6nwNyLYNU6RDOU3YyL

    View full-size slide

  32. Google公式のPWA監査ツール

    View full-size slide

  33. Lighthouse
    ● PWAのパフォーマンスをチェックしてレポートを作ってくれる
    ● Chrome拡張で簡単に入る

    View full-size slide

  34. Service Workerで遊んでみた

    View full-size slide

  35. Service Worker
    ● リクエストに介入できる
    ● => fetchのイベントを捕まえて、別のレスポンスを返せる

    View full-size slide

  36. 普通の使い方

    View full-size slide

  37. インストール時にキャッシュ
    https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja

    View full-size slide

  38. リクエストを捕まえて、キャッシュからレスポンスを返す
    https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja

    View full-size slide

  39. 今回やってみた事
    => 存在しないページを返す

    View full-size slide

  40. Dummy Router
    ● ページをめくってpagesディレクトリ配下のHTMLをガンガン読む

    View full-size slide

  41. pages/x.htmlと言うファイルは無い

    View full-size slide

  42. テンプレートのHTMLをコード内に用意
    https://github.com/syumai/sw-playground/blob/master/dummy-router/sw.js

    View full-size slide

  43. テンプレートからHTMLを生成して返す
    https://github.com/syumai/sw-playground/blob/master/dummy-router/sw.js

    View full-size slide

  44. デモ
    https://syumai.github.io/sw-playground/dummy-router/

    View full-size slide

  45. 次にやった事

    View full-size slide

  46. キャッシュしたテンプレート
    +JSONからレスポンス生成!

    View full-size slide

  47. デモ
    https://syumai.github.io/sw-playground/basic-progressive-blog/

    View full-size slide

  48. レスポンスの軽量化!
    ● HTMLはあるけど、取りに行かず、ServiceWorkerで生成!
    ● HTML => 28KB
    ● SW + JSON => 8KB

    View full-size slide

  49. 大変だったこと
    ● 任意のファイルをキャッシュから取り出す作業
    ● 任意のレスポンスで e.respondWith => Responseオブジェクトを返すasync
    functionを書いて頑張った

    View full-size slide

  50. 次にやりたい事
    ● Nuxt.jsのPWAモジュール
    ● APIサーバーとの連携

    View full-size slide

  51. ダックリングズでは
    React Nativeを一緒にやりたい人を
    募集中です!

    View full-size slide