Produced by Fourier

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

Ohashi Ohashi カレンダーアイコン 2023.05.02

はじめに

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

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

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

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

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

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

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

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

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

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

https://pwa.nuxtjs.org/

PWAの設定

1. 設定項目の追加

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

export default {
  // ...略
  pwa: {},
  // ...略
}
nuxt.config.js

2. アイコンの設定

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

インストールダイアログ(Mac / Chrome)

アプリケーション(Mac / Finder)

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

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

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

pwa: {
  icon: {}
}
nuxt.config.js

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

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

icon: {
  source: 'static/icon/icon.png'
}
nuxt.config.js

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

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

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

icon: {
  fileName: 'pwa-icon.png'
}
nuxt.config.js

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

デフォルトでは 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]
}
nuxt.config.js

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

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

icon: {
  targetDir: 'image'
}
nuxt.config.js

3. メタ設定

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

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

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

  pwa: {
    meta: {}
  }
}
nuxt.config.js

4. マニフェストの設定

💡
各項目についてはMDNのサイトを参考にさせていただいていますので詳細について知りたい方はそちらを確認ください。
https://developer.mozilla.org/ja/docs/Web/Manifest

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

pwa: {
  manifest: {}
},
nuxt.config.js

アプリ名の設定

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

インストールダイアログ(Mac / Chrome)

アプリケーション(Mac)

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

💡
Googleでは最大45文字まで使用可能となっているので準拠するように設定しましょう。
https://developer.chrome.com/docs/extensions/reference/manifest/name?hl=ja#name
manifest: {
  name: 'FOURIER TECH BLOG'
}

アプリのショート名設定

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

💡
Googleでは12文字以下に収まるよう設定することが推奨されているので準拠するよう設定しましょう。
https://developer.chrome.com/docs/extensions/reference/manifest/name?hl=ja#short_name
manifest: {
  short_name: 'TECH BLOG'
}
nuxt.config.js

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

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

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

アイコンの設定

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

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

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

https://developer.mozilla.org/ja/docs/Web/Manifest/icons#値
メンバー 説明
sizes 画像の寸法を空白区切りで指定する文字列です。
src 画像ファイルへのパスです。 src が相対 URL である場合、基準 URL はマニフェストの URL です。
type 画像のメディア種別のヒントです。このメンバーは、ユーザーエージェントが対応していないメディア種別の画像を素早く無視することができるようにするためのものです。
purpose 画像の目的を定義します。例えば、画像がホスト OS の特定の場面で、特別な目的を果たすことを意図している場合などです (すなわち、よりよく統合するため)。purpose は以下の値を 1 つ以上、空白で区切って指定することができます。monochrome: ユーザーエージェントは、このアイコンを、 塗りつぶしのあるモノクロのアイコンが必要なときに表示することができます。アイコンの色情報は破棄され、アルファデータのみが使用されます。アルファデータのみが使用されます。このアイコンは、ユーザーエージェントが塗りつぶしのマスクのように使うことができます。maskable: 画像がアイコンのマスクと安全領域に配慮して設計されており、画像の安全領域外の部分をユーザーエージェントが無視したりマスクしたりしても安全になるようになっています。any: ユーザーエージェントはどのような場合でも、自由にこのアイコンを表示することができます (これが既定値です)。

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

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

初期表示URLの設定

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

manifest: {
  start_url: '/?standalone=true'
}
nuxt.config.js

表示方法の設定

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

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

https://developer.mozilla.org/ja/docs/Web/Manifest/display#値
表示モード 説明 代替表示モード
fullscreen 利用可能な画面の領域をすべて使用し、ユーザーエージェントの クローム は表示されなくなります。 standalone
standalone アプリケーションの外見は、単独のアプリケーションのようになります。これは、アプリケーションに別のウィンドウを持たせたり、アプリケーションランチャーに独自のアイコンを追加したりすることができるようになります。このモードでは、ユーザーエージェントはナビゲーションを制御するための UI 要素を除外しますが、ステータスバーなどの他の UI 要素を含めることはできます。 minimal-ui
minimal-ui アプリケーションの外見は、単独のアプリケーションのようになりますが、ナビゲーションを制御するために最小限の UI 要素が表示されます。要素はブラウザーによって異なります。 browser
browser アプリケーションはブラウザーやプラットフォームに応じた一般的なブラウザータブや新しいウインドウで表示されます。これが既定値です。 (なし)

言語の設定

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

💡
HTMLの meta タグから自動で反映されないので en 以外に設定したい場合は対応が必要となります。
manifest: {
  lang: 'ja'
}
nuxt.config.js

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

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

manifest: {
  background_color: 'black'
}
nuxt.config.js

5. Workboxの設定

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

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

💡
Service Workerの実行には https での通信が必須となりますので localhost 以外で確認される方は注意しましょう。localhost のみ例外的に http でも実行が可能となっています。

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

pwa: {
  workbox: {}
},
nuxt.config.js

モジュールの有効化設定

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

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

workbox: {
    enabled: true
}
nuxt.config.js

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

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

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

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

workbox: {
    offlineAnalytics: true
}
nuxt.config.js

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

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

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

さいごに

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

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

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

Ohashi

Ohashi slash forward icon Engineer

主にLaravelなどのバックエンドを中心にサーバー周りも担当しています。目標は腕周り40cm 越え。

関連記事