Nuxt.jsのPWAモジュールは何をやっているのか

2019年6月19日に行われたPWA Night vol.5で使用したスライドです。

リンク
Nuxt.js : https://nuxtjs.org/
タムテブ : https://tamutebu-arabaki2019.firebaseapp.com/
タップ10 : https://tap10s.web.app/
Nuxt PWA : https://pwa.nuxtjs.org/
Workbox : https://developers.google.com/web/tools/workbox/
Workboxモジュールのドキュメント : https://pwa.nuxtjs.org/modules/workbox.html
【Nuxt.js】pwa-module v3におけるpreCacheの仕様変更 : https://qiita.com/gyarasu/items/15292db36166c7a7fa23
OneSignal : https://onesignal.com/

Transcript

1. 2019.06.19 @ PWA Night vol.5
 株式会社TAM 菅家大地
 Nuxt.jsのPWA Moduleは
 何をやっているのか

2. 株式会社TAM フロントエンドエンジニア
 菅家 大地 / Daichi Kanke 元デザイナーのフロントエンドエンジニア
 福島→宮城→東京→宮城(New!)
 PWA Night / MonacaUG / v-sendai
 Vue.js / Nuxt.js / PWA / Monaca 
 daichi.kanke @kan_dai
3. 今日話すこと • Nuxt.jsでPWA作ってみた話 • PWAモジュールを使ってみる • PWAモジュールが何をやっているのか • PWAモジュール設定のカスタマイズ
4. 最近作ったもの紹介

5. • 社内に書籍たくさんあるけど何があって、どこ の棚にあるかわからない…
 • 技術書典のサンプルアプリとして制作
 • Nuxt.js + Firebaseで作成
 社内向け書籍管理アプリ
6. • 4月にあったフェスのアプリ(非公式)として作 成。マイタイムテーブルを作ってオフラインで閲 覧できたり、SNSで共有できる
 • Nuxt.js + Firebaseで作成
 
 フェスのマイタイムテーブル作成
 https://tamutebu-arabaki2019.firebaseapp.com/

7. • ABC2019で登壇した時に作ったサンプルアプ リ。10秒で何回タップできるか。それだけのアプ リ。記録はTwitterで共有できる
 • Nuxt.js + Firebaseで作成
 
 10秒で何回タップできるか
 https://tap10s.web.app/
8. 全部Nuxt.jsで作ったPWA

9. Vue.jsでアプリケーション開発するうえで 便利な機能がたくさん入っているフレームワーク Nuxt.js? ↓
10. https://pwa.nuxtjs.org/
11. あ…ありのまま 今　
 起こった事を話すぜ！
 
 おれはNuxt.jsをダウンロードして
 PWAモジュールを有効化したら
 アプリがPWA対応していた
 
 な…何を言っているのかわからねーと思う が、おれも何をされたのかわからなかった …
 © 荒木飛呂彦
12. 
 手軽にできてとても素晴らしい！
 が、ブラックボックスになりがち?
13. PWAモジュールを使ってみる

14. $ npx create-nuxt-app <project-name>
15. PWA PWAじゃない
16. PWA PWAじゃない
18. NuxtのPWAモジュールは
 何をしているのかを見ていく

19. 何をしているのか 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.
20. 簡単な記述で最適なServiceWorkerのコードを 生成してくれるGoogle製のライブラリ https://developers.google.com/web/tools/workbox/
22. /dist/sw.js
23. /dist/sw.js Service Workerのライブラリを読み込む
24. /dist/sw.js Nuxtのバンドルファイルを プリキャッシュする
25. /dist/sw.js 新しいService Workerがある場合、 待機せずに既存のものを置き換えてアクティブにする
26. /dist/sw.js ランタイムキャッシュの設定
27. プリキャッシュとランタイムキャッシュ • プリキャッシュはSWインストール時にキャッシュ ◦ App Shellのための静的リソースなど ◦ リビジョンで管理することができる • ランタイムキャッシュはフェッチイベント時にキャッシュ ◦ キャッシュの有効期限やネットワーク優先・キャッシュ優先などの キャッシュ戦略をリソースに合わせて設定できる
28. 
 /dist/sw.js 　PWAモジュールのバージョンあげたらなんか違う
29. PWAモジュール v3から仕様が変わった • Nuxtのバンドルファイルがプリキャッシュに入らない • プリキャッシュは何も書いてないので自分で設定する • 最新はベータ版の3.0.16だが、デフォルトでインストールされるのは 2.6.0(2019/6/19日現在) • 全てのバンドルファイルをむやみにプリキャッシュしない意図？ 参考：【Nuxt.js】pwa-module v3におけるpreCacheの仕様変更
30. 設定をカスタマイズしたい nuxt.config.jsに設定を書いていく (Workboxモジュールだけでなく他のモジュールも同様)
31. プリキャッシュを追加する(v2の場合) /dist/sw.js /nuxt.config.js /extensions/sw.precashe.js 書いた内容が そのまま追記される
33. プリキャッシュを追加する(v3の場合)
34. ランタイムキャッシュを追加する(v2、v3共通)
35. デフォルトのランタイムキャッシュを削除(v3)
36. デフォルトのキャッシュを削除(v2) プリキャッシュと /_nuxt/.* パスのラン タイムキャッシュが消せず… わかる人いたら教えてください
37. その他の設定を削除(v2、v3共通)
38. https://pwa.nuxtjs.org/modules/workbox.html
39. Manifest / Meta / Icon • PWAに必要なマニフェストファイルを自動生成 • metaもプロジェクト情報から自動で設定してくれる • 大きめのアイコンを一つ用意するだけでサイズ違いのアイコンを作成 してくれる • 地味にめんどくさいこれらの作業も自動でやってくれる。 必要であれば「nuxt.config.js」で上書き可能
40. Manifest
41. Meta
42. Icon
43. OneSignal • 無料で利用可能なプッシュ通知サービス • PWAモジュール入れたらデフォルトで インストールされるわけではない • OneSignalのサービスに登録し、別途 OneSignalのライブラリを追加することで使用 できるようになる
44. OneSignal /nuxt.config.js PWAモジュールより上で読 み込むらしい サービス登録してIDを取得
45. サービス登録してIDを取得
46. サービス登録してIDを取得
47. 許可すると通常のダイアログ表示
48. まとめ • Nuxt.jsのPWAモジュールを使うと 簡単にPWA対応ができる • 簡単すぎてブラックボックスになりがち • やっていることを理解して使うことで、 より良いアプリを作っていきましょう！
49. 
 ご静聴ありがとうございました