MidWayDer v0.30.0 - 오프라인 대응 기능 추가

🤖 2355 in / 878 out / 3233 total tokens

Service Worker와 폴백 페이지, 네트워크 상태 UI를 구현해 오프라인 환경에서도 기본적인 사용자 경험을 유지할 수 있게 됐다.

Service Worker는 수동으로 구현했다. sw.js에서 정적 자산을 캐싱하고, 네트워크 요청 실패 시 offline.html로 폴백 처리한다. 라이브러리 없이 바닐라로 짜서 캐시 전략을 세밀하게 제어할 수 있다. Next.js 설정에서 sw.js의 Cache-Control 헤더를 must-revalidate로 설정해 브라우저가 오래된 SW를 캐시하지 않도록 했다.

네트워크 상태는 useOnlineStatus 훅으로 관리한다. navigator.onLine과 online/offline 이벤트를 조합해 실시간으로 연결 상태를 추적한다. 오프라인 감지 시 OfflineBanner 컴포넌트가 상단에 빨간 배너를 띄워 사용자에게 즉시 알린다.

export function useOnlineStatus(): boolean {
  const [isOnline, setIsOnline] = useState<boolean>(
    typeof navigator !== 'undefined' ? navigator.onLine : true
  );
 
  useEffect(() => {
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);
 
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);
 
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);
 
  return isOnline;
}

테스트 코드도 함께 작성했다. useOnlineStatus와 OfflineBanner 각각에 대해 vitest로 이벤트 시뮬레이션과 렌더링 결과를 검증했다. 오프라인 UX는 사용자가 언제 다시 연결될지 모르는 불안감을 줄여주는 게 핵심이다.