$30 off During Our Annual Pro Sale. View Details »

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

Daichi
June 19, 2019

 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/

Daichi

June 19, 2019
Tweet

More Decks by Daichi

Other Decks in Technology

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