発生条件
以下の条件で発生しました。
- @nuxtjs/pwa モジュールをインストールしている
- @nuxtjs/pwa のバージョンが 3.0.0-0
- nuxt.config.js の modules に '@nuxtjs/pwa' を指定している
- static ディレクトリに icon.png という名称の画像ファイル（サイズ 512*512以上）が配置されている
つまり、Nuxt PWA の Get Started に記載のとおりセットアップを行って npm run dev を実行したり、create-nuxt-app で pwa を選択した場合に発生します。
この不具合は、開発モードでしか発生しないようです。
参考：PWA cause live site to stuck on loading files/api calls
対処法
- node_modules/@nuxtjs/icon/.cache を削除する
- @nuxjs/pwa のバージョンを、3.0.0-beta.1 以上に更新する
まず、node_modules/@nuxtjs/icon/.cache フォルダを削除します。
続いて、次のコマンドを実行して @nuxtjs/pwa モジュールのバージョンを 3.0.0-beta.1 に更新します。
yarn add @nuxtjs/pwa@3.0.0-beta.1下記参考記事 2 によると、当不具合はキャッシュが関係するものらしく、@nuxtjs/pwa 3.0.0-beta.1 で改善されたとのことなので、3.0.0-beta.1 以上のバージョンであればOKです。
参考記事
- PWA cause live site to stuck on loading files/api calls
- Hot Reload make page not load anything till restart of server
