개발자가 Claude의 도움으로 Next.js PWA에서 서비스 워커 중복 버그를 디버깅합니다

한 개발자가 꿈 유도 및 프로그래밍 앱인 Somnia를 거의 전적으로 Claude를 코딩 파트너로 삼아 구축한 경험을 공유했습니다. 이 앱은 네이티브 앱처럼 홈 화면에 설치되고, 수면/기상 시간에 푸시 알림을 보내며, 모든 데이터를 기기에 로컬로 저장하며, 앱 스토어 배포를 피하는 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와의 대화를 통해 구축되었습니다.