目次
趣味で作成しているPWAで、新バージョンをリリースしても、インストール済みのアプリケーションが更新されない問題が発生しました。
正確には、アプリ起動直後は旧バージョンが立ち上がり、F5リロードを行うと最新版になる。という不可解な挙動をしていました。
今回はこの問題の原因を調べていきます。
ログを確認する
console.logを確認するとbad-precaching-response
というエラーが発生している。
今回の問題に関係あるのだろうか?🤔
一応調べてみる
Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"https://xxxx/_redirects?__WB_REVISION__=xxxxx","status":404}]
Precacheとはなんぞや?
PWAをブラウザにインストールする時(つまりService Workerをインストールする時)に一連のファイルをキャッシュに保存する仕組みの事らしい。
ここが詳しい。
Vue-CLIで生成したPWAはWorkboxというライブラリを使ってService Workerを実装しており、アセットのキャッシュなどをよしなにやってくれている様です。
![workbox.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F142086%2F76046bbd-73cd-54a4-6600-fb72d6ce38f1.png?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=203aef0d8a636a9add19e4a5f273a920)
Precacheを確認する
chromeの開発者ツールのNetworkタブを確認すると、いくつかのファイルはネットワークからではなく、ServiceWorkerから解決している事が分かる。
![](http://t-kuni.sub.jp/wp-content/uploads/2020/06/image-11.png)
ApplicationタブのCache StorageでService Workerによってキャッシュされているファイルを確認できる。
![](http://t-kuni.sub.jp/wp-content/uploads/2020/06/image-12-1024x331.png)
Precache-manifestとservice-worker.jsについて
WorkboxをGenerateSW
モードでビルドすると、precache-manifest
とservice-worker.js
が生成される。
![](http://t-kuni.sub.jp/wp-content/uploads/2020/06/image-10.png)
precache-manifest
には各リソースのURLとリビジョンが記載されていて、キャッシュのリビジョンと比較して差異があると最新のリソースを取得しにいく。
![](http://t-kuni.sub.jp/wp-content/uploads/2020/06/image-13.png)
service-worker.js
でprecache-manifest
を読み込んでいるのが分かる。
![](http://t-kuni.sub.jp/wp-content/uploads/2020/06/image-14.png)
指定したファイルをprecache-manifestから除外する
改めてエラーログを見直すと、_redirects
というファイルのキャッシュを更新しようとしてエラーになっている事がわかる。
Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"https://xxxx/_redirects?__WB_REVISION__=xxxxx","status":404}]
_redirects
はNetlifyの設定ファイルで、webpack経由でdist
フォルダに配置しているのでprecache-manifest
に記載されるが、外部からは見えないので404になってしまっている。
vue.config.js
のworkboxOptions
で_redirects
を除外する。
module.exports = { pwa: { workboxPluginMode: 'GenerateSW', workboxOptions: { exclude: /_redirects/ } } }
結果
bad-precaching-response
エラーが発生しなくなって、その他のファイルのキャッシュも更新されました!🙆precache-manifest
のファイルが1つでも404になると全てのキャッシュが更新されなくなるのかもしれない。
Webエンジニアをやっています
UX/UIデザインからプログラミング、DB設計、SEO、インフラ構築など幅広く対応してます
PHP/PHPUnit/Laravel/Vue/Nuxt/Docker/Terraform
ご連絡はTwitterのDMまで。