Slide 1
Slide 1 text
ゼロから始めるPWA入門
@__syumai
2018.4.6 Webエンジニア勉強会 #06
Slide 2
Slide 2 text
自己紹介
しゅーまい
ダックリングズ株式会社
フロントエンド / サーバーサイド 担当
VR / ウェディング関連のサービスをやってるベンチャー
エンジニアは2名
4月で新卒3年目
最近はReact Native / Rails / Vue.jsをやってます
Twitter: @__syumai(アンダーバー2
つ)
GitHub: syumai
Slide 3
Slide 3 text
入門と言うより、勉強の記録です…汗
=> github.com/syumai/sw-playground
Slide 4
Slide 4 text
目次
1. Progressive Web App (PWA) とは
2. PWAの構成要素
3. 開発ツールについて
4. Service Workerで遊んでみた
5. 次に試したい事
Slide 5
Slide 5 text
Progressive Web Appとは
Slide 6
Slide 6 text
『はじめてのプログレッシブウェブアプリ | Web | Google Developers』
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja
Slide 7
Slide 7 text
ウェブとアプリの両方の利点
Slide 8
Slide 8 text
ウェブの利点
● 手軽
● 更新が楽
● データが軽い
Slide 9
Slide 9 text
アプリの利点
● オフライン利用可
● Push通知
● 動作が軽い
Slide 10
Slide 10 text
アプリの利点
● オフライン利用可
● Push通知
● 動作が軽い
↑PWAなら実現できる！
Slide 11
Slide 11 text
利用事例
● Twitter Lite
○ データセーバー機能あり、省データに特化
● Instagram
○ 画像フィルタも使える
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
初回ダウンロード => 4.1MB
アプリ => 約35MB
Twitter Lite
Slide 14
Slide 14 text
初回ダウンロード => 47.8KB
アプリ => 約34MB
Instagram
Slide 15
Slide 15 text
PWAの構成要素
Slide 16
Slide 16 text
主要なPWAの構成要素
● Service Worker (一番大事！)
● Cache Storage
● Web App Manifest
Slide 17
Slide 17 text
今回紹介しないもの
● Web Push API / Web Notification API
○ 昔はGCMとか必要で設定めっちゃ大変だった
● IndexedDB
○ SWから非同期的に扱えるNoSQL DB
他にもいろいろあります
Slide 18
Slide 18 text
Service Worker
Slide 19
Slide 19 text
Service Worker
● Webページのバックグラウンドで走るスクリプト
● 別のスクリプトからインストールする
● 閲覧中のページのDOM操作などは行わない
● ブラウザを閉じても、通知の待ち受けなどに使える
● Webのリクエストに介入できる
Slide 20
Slide 20 text
Service Worker
● Webページのバックグラウンドで走るスクリプト
● 別のスクリプトからインストールする
● 閲覧中のページのDOM操作などは行わない
● ブラウザを閉じても、通知の待ち受けなどに使える
● Webのリクエストに介入できる
↑リクエストを捕まえて、任意のレスポンスを返せる！
Slide 21
Slide 21 text
Service Worker
● かなり強力な機能のため、SSL環境 or localhostでしか動きません
Slide 22
Slide 22 text
Cache Storage
Slide 23
Slide 23 text
Cache Storage
● 開発者が完全にコントロール出来るキャッシュストレージ
● html, css, js, 画像など、Webサイト上の任意のファイルを保存出来る
● ドメインごとに保存される
● ネームスペースが切れる (v1など)
● 明示的に削除しない限りクリアされない
Slide 24
Slide 24 text
Cache Storageから取り出して
Service Workerから返す
↓
オフラインで完全に動作する
Webサイトが作れる！
Slide 25
Slide 25 text
Web App Manifest
Slide 26
Slide 26 text
Web App Manifest
● Webサイトのアプリとしての振る舞いを定義する
● アイコン
● アプリ名
● テーマカラー (AndroidのChrome等で有効)
● ホームURL
● デバイスの向き
● フルスクリーンかどうか など
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
インストールしたアプリと同じように、
ホームから開けるようになる！
Slide 29
Slide 29 text
開発ツールについて
Slide 30
Slide 30 text
Chrome Dev Toolsが最強
Slide 31
Slide 31 text
これ！
Slide 32
Slide 32 text
Chrome Dev Tools
● Service Workerのデバッグが簡単
● バックグラウンドで動いていても、ブレークポイント置いたり出来る
● オフライン環境の再現もチェック一つで
● リロードでService Workerをアップデートできるオプションも
Slide 33
Slide 33 text
Chrome Dev Tools
● Cache Storageの中身を簡単に見れる
● 即座に削除も可能
Slide 34
Slide 34 text
開発ツールの詳細は、
Totally Tooling Tips (S3)
をYouTubeで！
https://www.youtube.com/playlist?list=PLNYkxOF6rcIB3ci
6nwNyLYNU6RDOU3YyL
Slide 35
Slide 35 text
Lighthouse
Slide 36
Slide 36 text
Google公式のPWA監査ツール
Slide 37
Slide 37 text
Lighthouse
● PWAのパフォーマンスをチェックしてレポートを作ってくれる
● Chrome拡張で簡単に入る
Slide 38
Slide 38 text
Service Workerで遊んでみた
Slide 39
Slide 39 text
Service Worker
● リクエストに介入できる
● => fetchのイベントを捕まえて、別のレスポンスを返せる
Slide 40
Slide 40 text
普通の使い方
Slide 41
Slide 41 text
インストール時にキャッシュ
https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja
Slide 42
Slide 42 text
リクエストを捕まえて、キャッシュからレスポンスを返す
https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja
Slide 43
Slide 43 text
今回やってみた事
=> 存在しないページを返す
Slide 44
Slide 44 text
Dummy Router
● ページをめくってpagesディレクトリ配下のHTMLをガンガン読む
Slide 45
Slide 45 text
pages/x.htmlと言うファイルは無い
Slide 46
Slide 46 text
テンプレートのHTMLをコード内に用意
https://github.com/syumai/sw-playground/blob/master/dummy-router/sw.js
Slide 47
Slide 47 text
テンプレートからHTMLを生成して返す
https://github.com/syumai/sw-playground/blob/master/dummy-router/sw.js
Slide 48
Slide 48 text
デモ
https://syumai.github.io/sw-playground/dummy-router/
Slide 49
Slide 49 text
次にやった事
Slide 50
Slide 50 text
キャッシュしたテンプレート
+JSONからレスポンス生成！
Slide 51
Slide 51 text
デモ
https://syumai.github.io/sw-playground/basic-progressive-blog/
Slide 52
Slide 52 text
レスポンスの軽量化！
● HTMLはあるけど、取りに行かず、ServiceWorkerで生成！
● HTML => 28KB
● SW + JSON => 8KB
Slide 53
Slide 53 text
大変だったこと
● 任意のファイルをキャッシュから取り出す作業
● 任意のレスポンスで e.respondWith => Responseオブジェクトを返すasync
functionを書いて頑張った
Slide 54
Slide 54 text
次にやりたい事
● Nuxt.jsのPWAモジュール
● APIサーバーとの連携
Slide 55
Slide 55 text
ダックリングズでは
React Nativeを一緒にやりたい人を
募集中です！