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

2c53966a0119dc87486c906e34391b28?s=47 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/

2c53966a0119dc87486c906e34391b28?s=128

Daichi

June 19, 2019
Tweet

Transcript

  1. 17.
  2. 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.
  3. 21.
  4. 32.
  5. 39.

    Manifest / Meta / Icon • PWAに必要なマニフェストファイルを自動生成 • metaもプロジェクト情報から自動で設定してくれる •

    大きめのアイコンを一つ用意するだけでサイズ違いのアイコンを作成 してくれる • 地味にめんどくさいこれらの作業も自動でやってくれる。 必要であれば「nuxt.config.js」で上書き可能
  6. 40.
  7. 41.
  8. 42.