PWAのタブ色を変更する方法(Android)とVue.js使用時の注意点

AndroidのPWAでは、開いているアプリを確認する画面のタブ色を変えることができます。

アプリを視覚的に特徴づける働きがあり、PWAで失われがちな「アプリ感」を高めることにもつながるので、適切に設定しておいたほうが良いでしょう。

このタブ色、タブカラーの設定には、ChromeとPWAの2つの面から考える必要があります。

Chromeの仕様

これは、PWAに限った話ではありません。Chromeで通常のブラウジングをしている場合でもタブの色を変えることが可能です。そのためには、metaタグでtheme-colorを指定します。

PWAの仕様

manifest.jsonで、”theme_color”を指定します。

補足: Vue.jsを使用している場合

Vue.jsを使用すると、デフォルトのtheme-colorが緑色になっていますが、この色を指定しているコードがプロジェクト内には見つかりませんでした。さらに、manifest.jsonのtheme_colorを変更しても、PWA・Chromeの両方でタブ色は変更されませんでした。

しかしながら、public/index.htmlにChrome用の設定(metaタグ)を挿入したところ、Chromeにおいてはその設定が有効になり、PWAにおいてはmanifest.jsonに書いた設定が有効になりました。

したがって、Vue.jsでPWAを開発している場合、タブカラーを変更するにはindex.htmlとmanifest.jsonの両方で指定が必要であると考えられます。