모든 탭에 퍼지는 실시간 이벤트, SSE 1개로 끝내는 전략
여러 탭의 실시간 이벤트를 Service Worker와 SSE로 하나의 연결에 통합했습니다. 메시지 유실 방지, 권한 검증, 재연결 전략까지 포함해 안정성을 높였습니다.
#SSE#service worker#TypeScript
2900

service worker 태그가 달린 국내 IT 기업 기술 블로그 글을 최신순으로 모았습니다.
6개 표시
여러 탭의 실시간 이벤트를 Service Worker와 SSE로 하나의 연결에 통합했습니다. 메시지 유실 방지, 권한 검증, 재연결 전략까지 포함해 안정성을 높였습니다.

Next.js 전환 과정에서 단위 테스트와 API Mocking의 중복·관리 문제를 해결하기 위해 MSW 도입을 검토했습니다. 브라우저와 SSR 환경의 URL 차이를 보정하는 클라이언트를 만들어 프록시 이슈에 대응했습니다.
A2HS의 조건과 매니페스트·서비스 워커를 이용한 최소 설정 방식을 설명했습니다. React 커스텀 설치 UI와 iOS Safari의 지원 제약도 함께 다뤘습니다.
웹 앱을 홈 화면에 추가해 네이티브 앱처럼 실행하는 A2HS 적용 방법을 설명했습니다. 매니페스트와 서비스 워커, beforeinstallprompt 활용법과 iOS 제한도 함께 정리했습니다.
서비스 워커의 생명주기와 fetch 가로채기, 페이지 통신 방식을 소개했습니다.\nMessageChannel로 요청을 전달해 Mock 응답·오류·원본 통과를 제어하는 방법을 설명했습니다.
API 미구현 시 하드코딩 Mocking으로 생기는 교체 비용과 개발 병목을 짚었습니다. MSW의 Service Worker 기반 요청 가로채기로 API 의존성을 낮추는 방법을 소개합니다.
