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は

   何をやっているのか

   

   View Slide

2. 株式会社TAM フロントエンドエンジニア

   菅家 大地 / Daichi Kanke
   元デザイナーのフロントエンドエンジニア

   福島→宮城→東京→宮城(New!)

   PWA Night / MonacaUG / v-sendai

   Vue.js / Nuxt.js / PWA / Monaca 

   daichi.kanke
   @kan_dai
   

   View Slide

3. 今日話すこと
   ● Nuxt.jsでPWA作ってみた話
   ● PWAモジュールを使ってみる
   ● PWAモジュールが何をやっているのか
   ● PWAモジュール設定のカスタマイズ
   

   View Slide

4. 最近作ったもの紹介

   

   View Slide

5. ● 社内に書籍たくさんあるけど何があって、どこ
   の棚にあるかわからない…

   ● 技術書典のサンプルアプリとして制作

   ● Nuxt.js + Firebaseで作成

   社内向け書籍管理アプリ
   

   View Slide

6. ● 4月にあったフェスのアプリ(非公式)として作
   成。マイタイムテーブルを作ってオフラインで閲
   覧できたり、SNSで共有できる

   ● Nuxt.js + Firebaseで作成

   

   フェスのマイタイムテーブル作成

   https://tamutebu-arabaki2019.firebaseapp.com/

   

   View Slide

7. ● ABC2019で登壇した時に作ったサンプルアプ
   リ。10秒で何回タップできるか。それだけのアプ
   リ。記録はTwitterで共有できる

   ● Nuxt.js + Firebaseで作成

   

   10秒で何回タップできるか

   https://tap10s.web.app/
   

   View Slide

8. 全部Nuxt.jsで作ったPWA

   

   View Slide

9. Vue.jsでアプリケーション開発するうえで
   便利な機能がたくさん入っているフレームワーク
   Nuxt.js?
   ↓
   

   View Slide

10. https://pwa.nuxtjs.org/
    

    View Slide

11. あ…ありのまま 今　

    起こった事を話すぜ！

    

    おれはNuxt.jsをダウンロードして

    PWAモジュールを有効化したら

    アプリがPWA対応していた

    

    な…何を言っているのかわからねーと思う
    が、おれも何をされたのかわからなかった
    …

    © 荒木飛呂彦
    

    View Slide

12. 

    手軽にできてとても素晴らしい！

    が、ブラックボックスになりがち?
    

    View Slide

13. PWAモジュールを使ってみる

    

    View Slide

14. $ npx create-nuxt-app
    

    View Slide

15. PWA PWAじゃない
    

    View Slide

16. PWA PWAじゃない
    

    View Slide

17. View Slide

18. NuxtのPWAモジュールは

    何をしているのかを見ていく

    

    View Slide

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.
    

    View Slide

20. 簡単な記述で最適なServiceWorkerのコードを
    生成してくれるGoogle製のライブラリ
    https://developers.google.com/web/tools/workbox/
    

    View Slide

21. View Slide

22. /dist/sw.js
    

    View Slide

23. /dist/sw.js
    Service Workerのライブラリを読み込む
    

    View Slide

24. /dist/sw.js
    Nuxtのバンドルファイルを
    プリキャッシュする
    

    View Slide

25. /dist/sw.js
    新しいService Workerがある場合、
    待機せずに既存のものを置き換えてアクティブにする
    

    View Slide

26. /dist/sw.js
    ランタイムキャッシュの設定
    

    View Slide

27. プリキャッシュとランタイムキャッシュ
    ● プリキャッシュはSWインストール時にキャッシュ
    ○ App Shellのための静的リソースなど
    ○ リビジョンで管理することができる
    ● ランタイムキャッシュはフェッチイベント時にキャッシュ
    ○ キャッシュの有効期限やネットワーク優先・キャッシュ優先などの
    キャッシュ戦略をリソースに合わせて設定できる
    

    View Slide

28. 

    /dist/sw.js
    　PWAモジュールのバージョンあげたらなんか違う
    

    View Slide

29. PWAモジュール v3から仕様が変わった
    ● Nuxtのバンドルファイルがプリキャッシュに入らない
    ● プリキャッシュは何も書いてないので自分で設定する
    ● 最新はベータ版の3.0.16だが、デフォルトでインストールされるのは
    2.6.0(2019/6/19日現在)
    ● 全てのバンドルファイルをむやみにプリキャッシュしない意図？
    参考：【Nuxt.js】pwa-module v3におけるpreCacheの仕様変更
    

    View Slide

30. 設定をカスタマイズしたい
    nuxt.config.jsに設定を書いていく
    (Workboxモジュールだけでなく他のモジュールも同様)
    
    

    View Slide

31. プリキャッシュを追加する(v2の場合)
    /dist/sw.js
    /nuxt.config.js /extensions/sw.precashe.js
    書いた内容が
    そのまま追記される
    

    View Slide

32. View Slide

33. プリキャッシュを追加する(v3の場合)
    

    View Slide

34. ランタイムキャッシュを追加する(v2、v3共通)
    

    View Slide

35. デフォルトのランタイムキャッシュを削除(v3)
    

    View Slide

36. デフォルトのキャッシュを削除(v2)
    プリキャッシュと /_nuxt/.* パスのラン
    タイムキャッシュが消せず…
    わかる人いたら教えてください
    

    View Slide

37. その他の設定を削除(v2、v3共通)
    

    View Slide

38. https://pwa.nuxtjs.org/modules/workbox.html
    

    View Slide

39. Manifest / Meta / Icon
    ● PWAに必要なマニフェストファイルを自動生成
    ● metaもプロジェクト情報から自動で設定してくれる
    ● 大きめのアイコンを一つ用意するだけでサイズ違いのアイコンを作成
    してくれる
    ● 地味にめんどくさいこれらの作業も自動でやってくれる。
    必要であれば「nuxt.config.js」で上書き可能
    

    View Slide

40. Manifest
    

    View Slide

41. Meta
    

    View Slide

42. Icon
    

    View Slide

43. OneSignal
    ● 無料で利用可能なプッシュ通知サービス
    ● PWAモジュール入れたらデフォルトで
    インストールされるわけではない
    ● OneSignalのサービスに登録し、別途
    OneSignalのライブラリを追加することで使用
    できるようになる
    

    View Slide

44. OneSignal
    /nuxt.config.js
    PWAモジュールより上で読
    み込むらしい
    サービス登録してIDを取得
    

    View Slide

45. サービス登録してIDを取得
    

    View Slide

46. サービス登録してIDを取得
    

    View Slide

47. 許可すると通常のダイアログ表示
    

    View Slide

48. まとめ
    ● Nuxt.jsのPWAモジュールを使うと
    簡単にPWA対応ができる
    ● 簡単すぎてブラックボックスになりがち
    ● やっていることを理解して使うことで、
    より良いアプリを作っていきましょう！
    

    View Slide

49. 

    ご静聴ありがとうございました

    

    

    View Slide