Slide 1
Slide 1 text
2019.06.19 @ PWA Night vol.5
株式会社TAM 菅家大地
Nuxt.jsのPWA Moduleは
何をやっているのか
Slide 2
Slide 2 text
株式会社TAM フロントエンドエンジニア
菅家 大地 / Daichi Kanke
元デザイナーのフロントエンドエンジニア
福島→宮城→東京→宮城(New!)
PWA Night / MonacaUG / v-sendai
Vue.js / Nuxt.js / PWA / Monaca
daichi.kanke
@kan_dai
Slide 3
Slide 3 text
今日話すこと
● Nuxt.jsでPWA作ってみた話
● PWAモジュールを使ってみる
● PWAモジュールが何をやっているのか
● PWAモジュール設定のカスタマイズ
Slide 4
Slide 4 text
最近作ったもの紹介
Slide 5
Slide 5 text
● 社内に書籍たくさんあるけど何があって、どこ
の棚にあるかわからない…
● 技術書典のサンプルアプリとして制作
● Nuxt.js + Firebaseで作成
社内向け書籍管理アプリ
Slide 6
Slide 6 text
● 4月にあったフェスのアプリ(非公式)として作
成。マイタイムテーブルを作ってオフラインで閲
覧できたり、SNSで共有できる
● Nuxt.js + Firebaseで作成
フェスのマイタイムテーブル作成
https://tamutebu-arabaki2019.firebaseapp.com/
Slide 7
Slide 7 text
● ABC2019で登壇した時に作ったサンプルアプ
リ。10秒で何回タップできるか。それだけのアプ
リ。記録はTwitterで共有できる
● Nuxt.js + Firebaseで作成
10秒で何回タップできるか
https://tap10s.web.app/
Slide 8
Slide 8 text
全部Nuxt.jsで作ったPWA
Slide 9
Slide 9 text
Vue.jsでアプリケーション開発するうえで
便利な機能がたくさん入っているフレームワーク
Nuxt.js?
↓
Slide 10
Slide 10 text
https://pwa.nuxtjs.org/
Slide 11
Slide 11 text
あ…ありのまま 今
起こった事を話すぜ！
おれはNuxt.jsをダウンロードして
PWAモジュールを有効化したら
アプリがPWA対応していた
な…何を言っているのかわからねーと思う
が、おれも何をされたのかわからなかった
…
© 荒木飛呂彦
Slide 12
Slide 12 text
手軽にできてとても素晴らしい！
が、ブラックボックスになりがち?
Slide 13
Slide 13 text
PWAモジュールを使ってみる
Slide 14
Slide 14 text
$ npx create-nuxt-app
Slide 15
Slide 15 text
PWA PWAじゃない
Slide 16
Slide 16 text
PWA PWAじゃない
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
NuxtのPWAモジュールは
何をしているのかを見ていく
Slide 19
Slide 19 text
何をしているのか
Workbox - Registers a service worker for offline caching.
Manifest - Automatically generate manifest.json file.
Meta - Automatically adds SEO friendly meta data with manifest integration.
Icon - Automatically generates app icons with different sizes.
OneSignal - Free background push notifications using OneSignal.
Slide 20
Slide 20 text
簡単な記述で最適なServiceWorkerのコードを
生成してくれるGoogle製のライブラリ
https://developers.google.com/web/tools/workbox/
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
/dist/sw.js
Slide 23
Slide 23 text
/dist/sw.js
Service Workerのライブラリを読み込む
Slide 24
Slide 24 text
/dist/sw.js
Nuxtのバンドルファイルを
プリキャッシュする
Slide 25
Slide 25 text
/dist/sw.js
新しいService Workerがある場合、
待機せずに既存のものを置き換えてアクティブにする
Slide 26
Slide 26 text
/dist/sw.js
ランタイムキャッシュの設定
Slide 27
Slide 27 text
プリキャッシュとランタイムキャッシュ
● プリキャッシュはSWインストール時にキャッシュ
○ App Shellのための静的リソースなど
○ リビジョンで管理することができる
● ランタイムキャッシュはフェッチイベント時にキャッシュ
○ キャッシュの有効期限やネットワーク優先・キャッシュ優先などの
キャッシュ戦略をリソースに合わせて設定できる
Slide 28
Slide 28 text
/dist/sw.js
PWAモジュールのバージョンあげたらなんか違う
Slide 29
Slide 29 text
PWAモジュール v3から仕様が変わった
● Nuxtのバンドルファイルがプリキャッシュに入らない
● プリキャッシュは何も書いてないので自分で設定する
● 最新はベータ版の3.0.16だが、デフォルトでインストールされるのは
2.6.0(2019/6/19日現在)
● 全てのバンドルファイルをむやみにプリキャッシュしない意図？
参考：【Nuxt.js】pwa-module v3におけるpreCacheの仕様変更
Slide 30
Slide 30 text
設定をカスタマイズしたい
nuxt.config.jsに設定を書いていく
(Workboxモジュールだけでなく他のモジュールも同様)
Slide 31
Slide 31 text
プリキャッシュを追加する(v2の場合)
/dist/sw.js
/nuxt.config.js /extensions/sw.precashe.js
書いた内容が
そのまま追記される
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
プリキャッシュを追加する(v3の場合)
Slide 34
Slide 34 text
ランタイムキャッシュを追加する(v2、v3共通)
Slide 35
Slide 35 text
デフォルトのランタイムキャッシュを削除(v3)
Slide 36
Slide 36 text
デフォルトのキャッシュを削除(v2)
プリキャッシュと /_nuxt/.* パスのラン
タイムキャッシュが消せず…
わかる人いたら教えてください
Slide 37
Slide 37 text
その他の設定を削除(v2、v3共通)
Slide 38
Slide 38 text
https://pwa.nuxtjs.org/modules/workbox.html
Slide 39
Slide 39 text
Manifest / Meta / Icon
● PWAに必要なマニフェストファイルを自動生成
● metaもプロジェクト情報から自動で設定してくれる
● 大きめのアイコンを一つ用意するだけでサイズ違いのアイコンを作成
してくれる
● 地味にめんどくさいこれらの作業も自動でやってくれる。
必要であれば「nuxt.config.js」で上書き可能
Slide 40
Slide 40 text
Manifest
Slide 41
Slide 41 text
Meta
Slide 42
Slide 42 text
Icon
Slide 43
Slide 43 text
OneSignal
● 無料で利用可能なプッシュ通知サービス
● PWAモジュール入れたらデフォルトで
インストールされるわけではない
● OneSignalのサービスに登録し、別途
OneSignalのライブラリを追加することで使用
できるようになる
Slide 44
Slide 44 text
OneSignal
/nuxt.config.js
PWAモジュールより上で読
み込むらしい
サービス登録してIDを取得
Slide 45
Slide 45 text
サービス登録してIDを取得
Slide 46
Slide 46 text
サービス登録してIDを取得
Slide 47
Slide 47 text
許可すると通常のダイアログ表示
Slide 48
Slide 48 text
まとめ
● Nuxt.jsのPWAモジュールを使うと
簡単にPWA対応ができる
● 簡単すぎてブラックボックスになりがち
● やっていることを理解して使うことで、
より良いアプリを作っていきましょう！
Slide 49
Slide 49 text
ご静聴ありがとうございました