https://tech.ldas.jp/ja/tags/pwa/Recent content in Pwa on デジタルアーカイブシステムの技術ブログHugojaSun, 26 Apr 2026 10:00:00 +0900https://tech.ldas.jp/ja/posts/service-worker-kill-switch-after-pwa-migration/Sun, 26 Apr 2026 10:00:00 +0900https://tech.ldas.jp/ja/posts/service-worker-kill-switch-after-pwa-migration/<h2 id="症状">症状</h2> <p>あるサイトを Vue 2 / Nuxt 2 の SPA から、Service Worker を持たない別フレームワーク（移行先のフレームワーク）に載せ替えました。デプロイ自体は成功し、CDN のキャッシュも purge 済み。新しい URL を直接踏むと、新しい HTML が返ってきます。</p> <p>ところが、運用を始めてしばらくすると次のような非対称な見え方の報告が上がってきました。</p> <div class="table-wrapper"> <table> <thead> <tr> <th>アクセス経路</th> <th>表示される内容</th> </tr> </thead> <tbody> <tr> <td>旧サイトを過去に開いたことのある PC のブラウザ</td> <td><strong>旧 HTML（移行前のもの）</strong></td> </tr> <tr> <td>同じブラウザのシークレットウィンドウ</td> <td>新 HTML</td> </tr> <tr> <td>別の端末・別のブラウザ</td> <td>新 HTML</td> </tr> <tr> <td>別ドメインから同じバックエンドを叩く検証環境</td> <td>新 HTML</td> </tr> </tbody> </table> </div> <p>サーバ側のログを見ても、リピーターからのリクエストが極端に少ない。返事の中身がブラウザのどこかで「先回り」されています。これは典型的に <strong>Service Worker（以下 SW）の cache-first</strong> が効いている挙動でした。</p> <h2 id="原因">原因</h2> <p>旧サイトは <code>@nuxtjs/pwa</code> を有効にしていたため、<code>/sw.js</code> に <strong>workbox 製の SW が register 済み</strong>でした。<code>@nuxtjs/pwa</code> のナビゲーションリクエストの既定戦略は <strong>NetworkFirst</strong>（オフライン時のみキャッシュにフォールバック）ですが、ビルド成果物（<code>/_nuxt/*</code> 配下のハッシュ付き JS / CSS / 画像など）は <strong>precache に積まれて CacheFirst</strong> で配信されます。SW がインストールされた瞬間に、これらが <strong>Cache Storage に焼き付き</strong>ます。</p> <p>ナビゲーションが NetworkFirst でも、<strong>ネットワークタイムアウトや一時的な失敗</strong> が起きると即座に旧 HTML が返る経路があり、加えて precache されたバンドルは古いものが返り続けます。結果として:</p>