記事一覧 プロジェクト集 検索 このサイトについて
RSS English

フレームワーク移行後も退役してくれない旧 Service Worker を kill-switch SW で撤去する

症状 あるサイトを Vue 2 / Nuxt 2 の SPA から、Service Worker を持たない別フレームワーク(移行先のフレームワーク)に載せ替えました。デプロイ自体は成功し、CDN のキャッシュも purge 済み。新しい URL を直接踏むと、新しい HTML が返ってきます。 ところが、運用を始めてしばらくすると次のような非対称な見え方の報告が上がってきました。 アクセス経路 表示される内容 旧サイトを過去に開いたことのある PC のブラウザ 旧 HTML(移行前のもの) 同じブラウザのシークレットウィンドウ 新 HTML 別の端末・別のブラウザ 新 HTML 別ドメインから同じバックエンドを叩く検証環境 新 HTML サーバ側のログを見ても、リピーターからのリクエストが極端に少ない。返事の中身がブラウザのどこかで「先回り」されています。これは典型的に Service Worker(以下 SW)の cache-first が効いている挙動でした。 原因 旧サイトは @nuxtjs/pwa を有効にしていたため、/sw.js に workbox 製の SW が register 済みでした。@nuxtjs/pwa のナビゲーションリクエストの既定戦略は NetworkFirst(オフライン時のみキャッシュにフォールバック)ですが、ビルド成果物(/_nuxt/* 配下のハッシュ付き JS / CSS / 画像など)は precache に積まれて CacheFirst で配信されます。SW がインストールされた瞬間に、これらが Cache Storage に焼き付きます。 ナビゲーションが NetworkFirst でも、ネットワークタイムアウトや一時的な失敗 が起きると即座に旧 HTML が返る経路があり、加えて precache されたバンドルは古いものが返り続けます。結果として: ...