WebアプリをPWA化しプラットフォーム税から逃れよう- 設定編

はじめに

数ヶ月前に、 WebアプリをPWA化しプラットフォーム税から逃れよう- 導入編  の記事を書きましたが、なかなか続きを書けずにいました。

ブログの担当者から早よ書いてと毎週言われた  業務に余裕ができたので、続きとして「Webアプリを PWA化 しプラットフォーム税から逃れよう- 設定編」を執筆しようと思います。

前回の記事からだいぶ時間が経ってしまいましたが、まだ前回の内容を覚えていますでしょうか？

もし忘れてしまった場合や、この記事から読み始めた方はぜひ前回の記事も読んでいただけたらと思います。

さて、前回は Nuxt.js に PWA を導入する手順について解説しました。そこで今回は PWA の設定について詳しく解説していきます。

とはいえ設定項目が多く全てを網羅することはできないので必須の項目や重要な項目に絞って解説していきます。それでもそこそこのボリューム感になりますが。

ちなみに、 PWA の設定を書かなくてもデフォルトでpackage.json等から設定を読み取り、動作するようになっています。※前回の記事（導入編）で確認できます

ですが、デフォルト設定のまま使用することは無いかと思いますので、今回はデフォルトの設定やその設定がどのように使用されるかを含め解説していきます。

ここで解説しきれなかった設定については公式ドキュメントを確認してください。

PWAの設定

1. 設定項目の追加

まずは nuxt.config.js へ pwa の項目を追加します。以降の設定はこのpwa項目へ設定を追加していきます。

export default {
  // ...略
  pwa: {},
  // ...略
}

2. アイコンの設定

アイコンは PWA のインストールダイアログやインストール後のアプリケーションのアイコンとして使用されます。

インストールダイアログ（Mac / Chrome）

アプリケーション（Mac / Finder）

デフォルト設定のまま使用しても問題ありませんので、アイコン画像のファイル名と保存先のパスのルールを理解したら読み飛ばしていただいても問題ありません。

まずは設定を行う前にアイコン画像が static/icon.png にあることを確認します。ない場合は 512 * 512 の画像をstaticディレクトリへicon.pngというファイル名で保存します。

ファイルを保存したら nuxt.config.js の pwa の項目へ icon の項目を追加します。

pwa: {
  icon: {}
}

対象のアイコン画像までのパスを変更

デフォルトでは [srcDir]/[staticDir]/icon.png となっています。これを以下のように変更することで static/icon/icon.png がアイコン画像として使用されるようになります。

icon: {
  source: 'static/icon/icon.png'
}

アイコン画像のファイル名のみを変更

デフォルトでは icon.png が設定されていますが、以下のように変更することで static ディレクトリの pwa-icon.png がアイコン画像として使用されるようになります。

注意点としてsource を指定していた場合はsourceの設定が優先されます。

icon: {
  fileName: 'pwa-icon.png'
}

自動生成されるアイコン画像のサイズを変更

デフォルトでは 64, 120, 144, 152, 192, 384, 512 px の画像が icons ディレクトリ（設定によりますが nuxt build した場合は.nuxt/dist/client/icons）へ自動生成され保存されますが、これを以下のように変更することで 100, 200, 300, 400, 500 px の画像が生成されるようになります。

icon: {
  sizes: [100, 200, 300, 400, 500]
}

自動生成されるアイコン画像の保存先を変更

デフォルトでは icons ディレクトリへ保存されますが、以下のように変更することで image ディレクトリへ保存されるようになります。

icon: {
  targetDir: 'image'
}

3. メタ設定

HTMLのheadタグ内に記述する内容を設定可能です。そのため nuxt.config.js の head.meta の設定と重複するため特に設定する必要はなく、今回は割愛させていただきます。

設定を行う場合は以下のようにpwa の項目へ meta の項目を追加し設定が可能です。

export default {
  head: {
    meta: {}
  },

  pwa: {
    meta: {}
  }
}

4. マニフェストの設定

まず、nuxt.config.js の pwa の項目へ manifest の項目を追加します。

pwa: {
  manifest: {}
},

アプリ名の設定

アプリ名は PWA のインストールダイアログやインストール後のアプリケーションの名前として使用されます。

インストールダイアログ（Mac / Chrome）

アプリケーション（Mac）

デフォルトの設定では package.json の name プロパティが使用されます。必須の項目となっているので package.json に設定がない場合は必ず manifest.name プロパティを設定するようにしましょう。

manifest: {
  name: 'FOURIER TECH BLOG'
}

アプリのショート名設定

manifest.name  を表示するのに十分なスペースがない場合に表示されます。こちらもアプリ名と同様デフォルトでは package.json の name プロパティが使用されます。また、必須のプロパティとなっているので package.json に設定がない場合は必ず manifest.short_name プロパティを設定するようにしましょう。

manifest: {
  short_name: 'TECH BLOG'
}

ディスクリプションの設定

何をするアプリケーションなのかを説明する項目になります。デフォルトでは package.json の description プロパティが使用されます。任意項目となっていますが設定が推奨されているので package.json に設定がない場合は設定するようにしましょう。

manifest: {
  description: '株式会社フーリエが運営する技術ブログです。PHP、Laravel、WordPress、JavaScript、Vue.js、Nuxt.js、AWS等のWeb系技術を中心にIT関連の記事を掲載しています。'
}

アイコンの設定

アプリケーションのアイコン画像を設定する項目になります。さまざまなコンテキストで使用できるよう配列で複数サイズのアイコン画像を設定することが可能です。

必須項目となっていますが、「3-1. アイコンの設定」 の項目と重複するためそちらを利用する場合は設定の必要はありません。

icons の 各項目の詳細については以下のようになっています。

設定方法は以下のようになります。

manifest: {
  icons: [
    { "src": "icon/icon_64x64.png", "sizes": "64x64", "type": "image/png" },
    { "src": "icon/icon_120x120.png", "sizes": "120x120", "type": "image/png" }
  ]
}

初期表示URLの設定

アプリの開始URLを設定する項目になります。デフォルトでは routerBase + ?standalone=true になります。 ただしあくまで参考値のため無視される場合もあります。また、相対URLを指定した場合はマニフェストのURLが基準となります。

manifest: {
  start_url: '/?standalone=true'
}

表示方法の設定

アプリの表示モード（ブラウザのUIをどれだけ表示するか）を設定する項目になります。ブラウザが指定されたモードに対応していなかった場合は代替チェーンに従います。デフォルトでは standalone になります。

表示モードは以下の値を利用可能です。

言語の設定

アプリの言語を設定します。ただ、必須ではないため設定しなくても問題ないのですがデフォルトで en に設定されるため以下のように日本語に設定します。

manifest: {
  lang: 'ja'
}

デフォルトの背景色を設定

スタイルシートが読み込まれる前に表示する背景色を設定する項目です。必須ではないですがデフォルトで #ffffff が設定されているため、その他の背景色を使用している場合はその色に合わせ設定しておくと良いと思います。

manifest: {
  background_color: 'black'
}

5. Workboxの設定

Workboxを使ったキャッシュやオフライン時の動作等を設定します。

WorkboxとはService Workerの実装を簡単にできるようにするためのライブラリです。（  https://developer.chrome.com/docs/workbox/  ）

設定を行う場合は以下のようにpwa の項目へ workbox の項目を追加し設定が可能です。

pwa: {
  workbox: {}
},

モジュールの有効化設定

デフォルトでは本番モードのみ有効となります。そのためローカル環境で確認する場合は  nuxt build  でビルドし nuxt start  でサーバーを起動する必要があります。

もし設定する場合は、注意事項もあるため一度 公式のドキュメント を一読することをお勧めします。

workbox: {
    enabled: true
}

Googleアナリティクスのオフラインサポート設定

有効にするとオフラインでもGoogleアナリティクスで追跡できるようになります。

デフォルトでは無効になっているのでGoogleアナリティクスを導入しているのであれば有効にしておくことをお勧めします。

仕組みとしてはオフラインの場合にはブラウザのストレージへ追跡データを保存し、オンラインになった際にまとめて送信されるようになっています。

workbox: {
    offlineAnalytics: true
}

サービスワーカーの追加設定

サービスワーカーを追加する項目になります。例として、staticディレクトリにcustom-sw.jsファイルを作成した場合は以下のように追加します。

workbox: {
    importScripts: ['custom-sw.js']
}

さいごに

様々な設定項目がありますが、今回は必須項目や重要な項目のみ紹介しました。それでもそこそこの量があり大変ではなかったでしょうか？（私は記事を書くのが大変でした）

タイトルにあるように、今回は設定編ですので今後も PWA に関する記事を執筆予定です。

次回の記事はプッシュ通知について書こうと考えておりますので、よろしければそちらも読んでいただけますと幸いです。