Service Worker · Safari · WebKit · Chromium · 원격 Mac · 2026
2026 원격 Mac 프론트 출시 검수:
Service Worker 업데이트·Safari 캐시 차이·회색 배포·롤백 대조표·3단계
2026.04.15
프론트엔드·릴리스 엔지니어링
약 8분 읽기
대상: PWA·오프라인 껍데기·프리캐시 출시 팀. Chromium만으로 Safari·WebKit의 업데이트·캐시 가시성을 놓치기 쉽습니다. 실행 결정: skipWaiting·clients.claim, BUILD_ID, 캐시 접두사, 표·3단계·회색 대응. 연계: 배포·Safari, CSP, 스모크, Inspector FAQ.
01 차이표
생명주기·Cache Storage를 계약처럼 고정하면 리뷰가 빨라집니다. CSP 검수와 같은 노트에 첨부하세요.
| 주제 | Safari / WebKit | Chromium |
|---|---|---|
| 업데이트 탐지 | 백그라운드 정지로 waiting 지연 → 새로고침·시간 창 재측정. |
Application + 시크릿 신규 클라이언트 필수. |
| 캐시 가시성 | 저장 공간↔Inspector 교차, scope 오류는 옛 껍데기처럼 보임. | 트리 성숙, 서드파티 SW 주의. |
| skipWaiting | 기존 탭 잔존 → UI·재로딩으로 검수. | 다중 탭 패치 버전 불일치 확인. |
| clients.claim | 첫 HTML·fetch와 동일 origin·scope 실기 확인. | Preserve log로 탐색 경계 fetch. |
회색 배포·롤백 대조(요약)
| 신호·상황 | 권장 조치(CDN·HTML) | SW·캐시 층 |
|---|---|---|
| 오류↑·새 껍데기만 | 회색 헤더 끄기·이전 정적 디렉터리. | skipWaiting 중단·옛 접두사 비교용 보관. |
| 오프라인 백지 | 엔트리·sw.js 200·BUILD_ID 확인. |
긴급만 unregister+영향 기록. |
| 전면 확대 | 지문 파일명 동기. | skipWaiting 또는 UI 새로고침·만료 caches 일정 삭제. |
02 배포 전 검증
버전: sw.js에 BUILD_ID(짧은 SHA)·UI 동일 표기. 캐시 접두사 myapp-<major>-<buildId>-, 파손 시 major 증가.
skipWaiting: 탭이 잠시 옛 버전 허용 시 지연+버튼. 결제·긴 폼은 위험표 첨부. 급하면 켜되 Chromium·Safari 다중 탭 반복.
clients.claim: 첫 탐색부터 가로채기 필요할 때만 activate 끝. WebKit 레이스는 Inspector FAQ로 타임라인 고정.
3단계 체크리스트
- 동결:
scope·등록 URL·접두사·BUILD_ID·HTML/API 캐시 경계 1페이지(배포 검증). - 리허설: 스모크 후 시크릿·웹 데이터 삭제 각각
install→waiting→active녹화. - 회색: 롤백 표에 지표 연결, 임계 초과 시
skipWaiting중단·자산 롤백·caches.delete는 검증 후.
인용: 스모크 로그 헤더에 SHA·회색%와 오류율 동일 보드·티켓에 네트워크 한 줄+저장공간 캡처 쌍.
03 원격 실기 검증 프로세스
원격 Mac에서 Safari·Chromium 동시, 동일 스테이징·DNS·시간대.
- ①확장 끄기·QA 동일 네트워크.
- ②Safari: 데이터 삭제→콘솔·네트워크·저장공간 접두사.
- ③Chromium: 시크릿→Application→SW
waiting·Skip. - ④서명: 양쪽
BUILD_ID·skipWaiting·첫 탐색/강새로 요약 첨부. - ⑤헤드리스는 보조, WebKit은 실기 마감.
04 FAQ
배포 직후 모두가 새 SW를 받나요?
아님. 텔레메트리로 껍데기 버전 비율 확인.
Safari만 늦게 보이는 이유는?
백그라운드 정지·재방문 주기. 시간 창 재측정.
접두사를 바꿨는데 예전 캐시가 남나요?
activate 화이트리스트 삭제, 회색 기간 전량 삭제 지양.
CSP와 같이 봐야 하나요?
worker-src·connect-src 동일 헤더 재현.