Skip to content

[FIX] 도메인 이전 전 PWA 서비스워커 잔재로 인한 API 요청 CSP 차단 수정#268

Merged
kimminna merged 1 commit into
developfrom
fix/web/267-service-worker-cleanup
Jul 16, 2026
Merged

[FIX] 도메인 이전 전 PWA 서비스워커 잔재로 인한 API 요청 CSP 차단 수정#268
kimminna merged 1 commit into
developfrom
fix/web/267-service-worker-cleanup

Conversation

@kimminna

@kimminna kimminna commented Jul 16, 2026

Copy link
Copy Markdown
Member

ISSUE 🔗

close #267



What is this PR? 🔍

도메인 이전 전 PWA로 설치 가능했던 시절 등록된 오래된 서비스워커가 사용자 브라우저에 남아, 캐시된 구버전 페이지를 계속 서빙하면서 API 요청이 CSP로 차단되는 문제를 수정했습니다.

배경

  • 기존 구조: 이 코드베이스에는 서비스워커/PWA 관련 코드가 존재한 적이 없습니다 (git 히스토리 전체 검색으로 확인).
  • 발생 문제: 도메인 이전 전 timo.kr이 PWA로 설치 가능했던 시절 등록된 서비스워커가 일부 사용자 브라우저에 여전히 활성화된 상태로 남아, 캐시된 구버전 HTML/CSP를 그대로 서빙하고 있었습니다. 그 결과 /users, /home, /time-boxes, /timers/active 등 API 요청이 CSP 위반(net::ERR_FAILED)으로 실패했습니다. 강력 새로고침 시에는 네트워크에서 새 리소스를 직접 받아와 정상 동작했고, DevTools에서 서비스워커를 수동으로 unregister하면 영구적으로 해결되는 것으로 재현·확인했습니다.
  • 해결 방향: 각 사용자가 DevTools를 열어 수동으로 해제할 수는 없으므로, 페이지 로드 시 자동으로 현재 origin에 남은 서비스워커와 캐시를 정리하는 로직을 추가했습니다.

서비스워커 정리

  • 변경 요약: 페이지 로드 시 현재 origin에 등록된 서비스워커와 캐시를 자동으로 정리하는 ServiceWorkerCleanup 컴포넌트를 추가하고 루트 레이아웃에 연결했습니다.
  • 이유: 코드 배포만으로는 이미 사용자 브라우저에 등록된 서비스워커가 제거되지 않기 때문에, 클라이언트 쪽에서 명시적으로 해제하는 절차가 필요했습니다.
  • 구현 방식: useEffect에서 navigator.serviceWorker.getRegistrations()로 현재 origin에 등록된 모든 서비스워커를 조회해 unregister()하고, caches.keys()로 Cache Storage 항목을 전부 delete()합니다. localStorage/쿠키/IndexedDB는 건드리지 않으므로 로그인 상태 등 기존 사용자 데이터에는 영향이 없습니다. 서비스워커가 없는 사용자에게는 getRegistrations()가 빈 배열을 반환해 아무 동작도 하지 않습니다(no-op).
  • 경계 · 제약: 이 앱은 현재 의도적으로 서비스워커/PWA 기능을 쓰지 않으므로 부작용 없이 적용 가능합니다. 기존 사용자들의 브라우저가 충분히 정리됐다고 판단되면 이후 이 정리 로직 자체를 제거하는 것을 고려할 수 있는, 일시적 성격의 코드입니다.



To Reviewers

  • 실제 재현은 이전에 PWA로 등록됐던 서비스워커가 남아있는 브라우저에서만 가능해, 로컬에서는 서비스워커/캐시 삭제 로직 자체의 정상 동작(빌드·타입·린트 통과)만 확인했습니다. 실사용자 환경에서의 최종 확인은 배포 후 모니터링으로 진행하면 좋을 것 같습니다.
  • Cache Storage만 삭제하고 localStorage/쿠키/IndexedDB는 그대로 두는 범위가 맞는지 확인 부탁드립니다.



Screenshot 📷



Test Checklist ✔

  • pnpm check-types:web 통과
  • pnpm lint:web 통과
  • pnpm build:web 통과
  • 실제 구버전 서비스워커가 등록된 브라우저에서의 정리 동작 확인 — 배포 후 확인 예정

@kimminna
fix(web): 오래된 서비스워커를 자동으로 정리한다 (#267)
7e04fdf 
- 도메인 이전 전 PWA로 등록된 오래된 서비스워커가 사용자 브라우저에 남아 캐시된 구버전 페이지를 서빙하며 API 요청을 CSP로 차단하는 문제를 발견했습니다
- 페이지 로드 시 현재 origin에 등록된 서비스워커와 캐시를 자동으로 해제하는 ServiceWorkerCleanup을 추가했습니다
- 루트 레이아웃에 연결했습니다
@vercel

vercel Bot commented Jul 16, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
timo Ready Ready Preview, Comment Jul 16, 2026 4:38pm

Request Review

@github-actions github-actions Bot added the ⏰ Timo-web Timo 웹 서비스 label Jul 16, 2026
@github-actions github-actions Bot added 🐛 Bug 기능이 정상적으로 작동하지 않는 문제 수정 ♦️ 민아 민아상 labels Jul 16, 2026
@coderabbitai

coderabbitai Bot commented Jul 16, 2026 •
edited
Loading

Copy link
Copy Markdown

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 88eb6172-dbc2-41f5-a048-b1d511118d0f

📥 Commits

Reviewing files that changed from the base of the PR and between 6015b4c and 7e04fdf.

📒 Files selected for processing (2)
  • apps/timo-web/app/[locale]/layout.tsx
  • apps/timo-web/providers/service-worker/ServiceWorkerCleanup.tsx

Walkthrough

페이지 마운트 시 기존 서비스워커 등록과 브라우저 캐시를 정리하는 클라이언트 컴포넌트를 추가하고, 이를 로케일 레이아웃의 <body>에 연결했습니다.

Changes

서비스워커 정리

Layer / File(s) Summary
정리 컴포넌트 구현 및 레이아웃 연결
apps/timo-web/providers/service-worker/ServiceWorkerCleanup.tsx, apps/timo-web/app/[locale]/layout.tsx		 ServiceWorkerCleanup이 서비스워커 등록을 해제하고 Cache Storage의 모든 캐시를 삭제합니다. 컴포넌트는 로케일 레이아웃의 <body>에 추가됩니다.

Estimated code review effort: 2 (Simple) | ~10 minutes

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/web/267-service-worker-cleanup

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@kimminna
kimminna merged commit fd06b80 into develop Jul 16, 2026
12 of 13 checks passed
@kimminna
kimminna deleted the fix/web/267-service-worker-cleanup branch July 16, 2026 16:38
@kimminna kimminna mentioned this pull request Jul 16, 2026
Merged
@github-actions

github-actions Bot commented Jul 16, 2026

Copy link
Copy Markdown

Timo Performance Report

Bundle Size — timo-web
라우트 크기 First Load JS
/[locale]/home 214.25 kB 🔴 420.15 kB
/[locale]/today 198.41 kB 🔴 404.30 kB
/[locale]/focus 162.09 kB 🔴 367.98 kB
/[locale]/settings 168.92 kB 🔴 374.81 kB
/[locale]/statistics 155.83 kB 🔴 361.72 kB
/[locale]/[...rest] 0 B 🟡 205.89 kB
/[locale]/login 213.91 kB 🔴 419.80 kB
/[locale]/oauth/calendar/callback 120.93 kB 🟡 326.83 kB
/[locale]/oauth/callback 120.60 kB 🟡 326.49 kB
/[locale]/onboarding 234.66 kB 🔴 440.56 kB
/[locale] 119.91 kB 🟡 325.81 kB
/[locale]/policy 126.04 kB 🟡 331.93 kB
/robots.txt/route 0 B 🟡 205.89 kB
/sitemap.xml/route 0 B 🟡 205.89 kB

공유 번들: 205.89 kB
🟢 < 200kB  |  🟡 < 350kB  |  🔴 ≥ 350kB (First Load JS · gzip)

Lighthouse — timo-web
URL Perf A11y LCP CLS TBT
/en/home 🔴 64 🟢 95 🔴 15.8s 🟢 0.000 🟡 396ms
/en/today 🔴 64 🟢 95 🔴 15.6s 🟢 0.000 🟡 425ms
/en/focus 🔴 63 🟢 95 🔴 15.3s 🟢 0.000 🟡 482ms
/en/statistics 🟡 70 🟢 95 🔴 15.3s 🟢 0.000 🟡 230ms

Perf ≥ 70 / A11y ≥ 85 목표
LCP 🟢 < 2.5s 🟡 < 4s 🔴 ≥ 4s  |  CLS 🟢 < 0.1 🟡 < 0.25 🔴 ≥ 0.25  |  TBT 🟢 < 200ms 🟡 < 600ms 🔴 ≥ 600ms

Image Optimization — timo-web
파일 크기 포맷 상태
favicon.png 27.84 kB PNG ⚠️ 🟢
images/google-calendar.png 36.20 kB PNG ⚠️ 🟢
images/google-logo.png 26.79 kB PNG ⚠️ 🟢
og.png 437.44 kB PNG ⚠️ 🟡

총 4개 · 528.28 kB  |  🟢 < 200KB  |  🟡 < 500KB  |  🔴 ≥ 500KB
⚠️ 4개 파일 WebP/AVIF 변환 권장

측정 커밋: 900bc50

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@yumin-kim2 yumin-kim2 yumin-kim2 approved these changes
@jjangminii jjangminii Awaiting requested review from jjangminii

Assignees

@kimminna kimminna

Labels

⏰ Timo-web Timo 웹 서비스 ♦️ 민아 민아상 🐛 Bug 기능이 정상적으로 작동하지 않는 문제 수정

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[FIX] 도메인 이전 전 PWA 서비스워커 잔재로 인한 API 요청 CSP 차단 수정

2 participants

@kimminna @yumin-kim2