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

はじめに

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

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

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

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

WebアプリをPWA化しプラットフォーム税から逃れよう- 導入編 | FOURIER TECH BLOG 〜 IT技術ブログ 〜

Nuxt.jsでPWAを実装する記事の導入編になります。

https://www.fourier.jp/techblog/articles/implementation-of-pwa-to-nuxtjs-01/

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

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

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

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

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

Introduction - Nuxt PWA

Supercharge Nuxt with a heavily tested, updated and stable PWA solution

https://pwa.nuxtjs.org/

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. マニフェストの設定

ウェブアプリマニフェスト | MDN

ウェブアプリマニフェストは、プログレッシブウェブアプリ (PWA) と呼ばれる一連のウェブ技術の一部であり、アプリストアを通さずに端末のホーム画面にインストールすることができるものです。単純なホーム画面リンクやブックマークを持つ通常のウェブアプリとは異なり、 PWA は事前にダウンロードしてオフラインでも動作するだけでなく、通常の Web API を使用することもできます。

https://developer.mozilla.org/ja/docs/Web/Manifest

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

pwa: {
  manifest: {}
},

アプリ名の設定

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

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

アプリケーション（Mac）

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

Chrome Extensions Manifest: name - Chrome Developers

Reference documentation for the name property of manifest.json.

https://developer.chrome.com/docs/extensions/mv3/manifest/name/#name

manifest: {
  name: 'FOURIER TECH BLOG'
}

アプリのショート名設定

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

Chrome Extensions Manifest: name - Chrome Developers

Reference documentation for the name property of manifest.json.

https://developer.chrome.com/docs/extensions/mv3/manifest/name/#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 の 各項目の詳細については以下のようになっています。

icons - ウェブアプリマニフェスト | MDN

icons メンバーは、様々なコンテキストでアプリケーションアイコンとして機能する画像ファイルを表すオブジェクトの配列を指定します。例えば、他のアプリケーションのリストの中でウェブアプリケーションを表現したり、ウェブアプリケーションを OS のタスクマネージャーやシステム環境設定と統合したりするために使用することができます。

https://developer.mozilla.org/ja/docs/Web/Manifest/icons#%E5%80%A4

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

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 になります。

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

display - ウェブアプリマニフェスト | MDN

display メンバーは、開発者が推奨するウェブサイトの表示モードを判別する文字列です。この表示モードは、ブラウザーの UI をどれだけユーザーに見せるかを変更するものであり、 browser (ブラウザーのウィンドウが完全に見える) から fullscreen (アプリが全画面になる) までの範囲を取ります。

https://developer.mozilla.org/ja/docs/Web/Manifest/display#%E5%80%A4

言語の設定

アプリの言語を設定します。ただ、必須ではないため設定しなくても問題ないのですがデフォルトで 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に関する記事を執筆予定です。

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