開発者がClaudeの助けを借りてNext.js PWAのサービスワーカー冗長バグをデバッグする

ある開発者が、コーディングパートナーとしてClaudeをほぼ独占的に使用してSomniaという夢のインキュベーション・プログラミングアプリを構築した経験を共有しました。このアプリはNext.js 14のプログレッシブウェブアプリで、ネイティブアプリのようにホーム画面にインストールでき、睡眠/起床時間にプッシュ通知を送信し、すべてのデータをデバイス上にローカルで保存し、アプリストアでの配布を回避しています。

問題のバグ

開発者は、ウェブプッシュ通知が機能しないという重大な問題を3週間かけてデバッグしました。サービスワーカーは、Samsung AndroidデバイスのPWAスタンドアロンモードでインストール直後にREDUNDANT状態になり続けました。navigator.serviceWorker.getRegistrations()は、このモードでは常に空の配列を返しました。

デバッグプロセス

デバッグプロセス中、開発者は以下のことを行いました：

• Claude、GPT、Gemini、Perplexityに支援を求めた
• 完全なデバッグレポートを生成した
• 15種類以上の異なる修正を試した
• 最終的にサービスワーカーがREDUNDANTになる様子を表示するデバッグページを構築した
• Claudeの助けを借りてchrome://serviceworker-internalsの出力を解釈した

根本原因

実際の問題は、sw.jsが古いビルドIDで誤ってgitにコミットされていたことでした。内部のプリキャッシュマニフェストは古いデプロイメントからアセットを取得しようとしており、それらはすべて404エラーを返していました。Workboxのインストールイベントは暗黙的に失敗し、サービスワーカーが毎回自己破壊する原因となっていました。

修正方法

解決策はシンプルでした：git rm --cachedコマンドでキャッシュから古いファイルを削除することで問題が修正されました。

開発者が諦めかけたとき、Claudeは体系的なデバッグを維持するのに役立ちました。また、このアプリにはAI生成コンテンツは一切含まれていません（すべての夢の記録は人間によって書かれています）が、ほぼ完全にClaudeとの対話を通じて構築されました。