ゼロから始めるPWA入門

5e511bb6d01d856b4ec7a0e5b1f6a2f0?s=47 syumai
April 06, 2018

 ゼロから始めるPWA入門

5e511bb6d01d856b4ec7a0e5b1f6a2f0?s=128

syumai

April 06, 2018
Tweet

Transcript

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

  2. 自己紹介 しゅーまい ダックリングズ株式会社 フロントエンド / サーバーサイド 担当 VR / ウェディング関連のサービスをやってるベンチャー

    エンジニアは2名 4月で新卒3年目 最近はReact Native / Rails / Vue.jsをやってます Twitter: @__syumai(アンダーバー2 つ) GitHub: syumai
  3. 入門と言うより、勉強の記録です…汗 => github.com/syumai/sw-playground

  4. 目次 1. Progressive Web App (PWA) とは 2. PWAの構成要素 3.

    開発ツールについて 4. Service Workerで遊んでみた 5. 次に試したい事
  5. Progressive Web Appとは

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

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

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

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

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

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

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

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

  15. PWAの構成要素

  16. 主要なPWAの構成要素 • Service Worker (一番大事!) • Cache Storage • Web

    App Manifest
  17. 今回紹介しないもの • Web Push API / Web Notification API ◦

    昔はGCMとか必要で設定めっちゃ大変だった • IndexedDB ◦ SWから非同期的に扱えるNoSQL DB 他にもいろいろあります
  18. Service Worker

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

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

    • Webのリクエストに介入できる ↑リクエストを捕まえて、任意のレスポンスを返せる!
  21. Service Worker • かなり強力な機能のため、SSL環境 or localhostでしか動きません

  22. Cache Storage

  23. Cache Storage • 開発者が完全にコントロール出来るキャッシュストレージ • html, css, js, 画像など、Webサイト上の任意のファイルを保存出来る •

    ドメインごとに保存される • ネームスペースが切れる (v1など) • 明示的に削除しない限りクリアされない
  24. Cache Storageから取り出して Service Workerから返す ↓ オフラインで完全に動作する Webサイトが作れる!

  25. Web App Manifest

  26. Web App Manifest • Webサイトのアプリとしての振る舞いを定義する • アイコン • アプリ名 •

    テーマカラー (AndroidのChrome等で有効) • ホームURL • デバイスの向き • フルスクリーンかどうか など
  27. None
  28. インストールしたアプリと同じように、 ホームから開けるようになる!

  29. 開発ツールについて

  30. Chrome Dev Toolsが最強

  31. これ!

  32. Chrome Dev Tools • Service Workerのデバッグが簡単 • バックグラウンドで動いていても、ブレークポイント置いたり出来る • オフライン環境の再現もチェック一つで

    • リロードでService Workerをアップデートできるオプションも
  33. Chrome Dev Tools • Cache Storageの中身を簡単に見れる • 即座に削除も可能

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

  35. Lighthouse

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

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

  38. Service Workerで遊んでみた

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

  40. 普通の使い方

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

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

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

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

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

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

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

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

  49. 次にやった事

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

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

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

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

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

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