nuxt/pwaを使用する場合の注意点

あるプロジェクトでnxut/pwaを使うことがあり、ハマったとろこがあったので書かせてもらいます。

nxut/pwaでiconを設定したい場合は、staticディレクトリに、icon.pngというファイル名で保存しないといけません。

別の画像にしたいと思い、新しい画像に変更しても前に設定されたiconが表示されました。

解決方法

nuxt/pwaのIconは、{rootDir}/node_modules/.cache/pwa/icon にキャッシュされるという特徴で、新しく画像を置き換えても、前回のキャッシュが残っており画像が反映されていなかったのです。

$ rm -rf node_modules

$ yarn or npm install

を実行してキャッシュをクリアして依存関係を再構築しましょう。

そしたら、新しいiconになってるはずです！