😽

Nuxtで作成したPWAアプリのアイコンを変更する

2023/06/07に公開

やりたいこと

Nuxtで作成したPWAアプリ(じゃなくてもいいのだが)のアイコンを変更する。

環境

Nuxt 2.15.8

状況

Nuxtはstaticディレクトリ内にicon.pngという名前で保存されている画像ファイルを各種アイコンとして使用することができる。
ところが、icon.pngを同じ名前で別のファイルに置き換えてもアイコンが差し替えられない。

原因

Nuxtはnode_modules/.cache/pwa/iconディレクトリに画像ファイルのキャッシュを作成する。
このキャッシュはicon.pngのファイル名が変更されない限り更新されないため、同名でファイルを差し替えても画像が差し変わらない。

解決方法

node_modules/.cache/pwa/iconディレクトリを削除して、generateすればOK。

rm -r /node\modules/.cache/pwa/icon
npm run generate

補足

ファビコンもちゃんと変更されました。
端末や環境に応じた様々な大きさのアイコンを用意してPWAのマニフェストに・・・みたいな情報もネットにありましたが、1種類置くだけでOKでした。

Discussion