MSW Vite+TypeScript에 적용하기(2) - ServiceWorker 문제해결하기

👀 문제발생

MSW를 Vite에 잘 적용했는데 이게 실행하면 Service workers가 mockServiceWorker.js로 등록이 되었다가 dev-sw.js로 바뀌는 문제가 생겼다.

dev-sw.js가 배포환경에서 필요한 파일인데 개발환경에서 적용이 되어버리는 것....

🌟 방법 1

Service Worker 캐시 초기화

등록 취소를 해주고 다시 실행하기
.
.
.
.
.
안됨....ㅎ
취소하면 mockServiceWorker.js가 일시적으로 등록이 되긴하는데 다시 dev-sw.js로 돌아온다...

🌟 방법 2

브라우저 캐시 초기화

사이트 데이터 지우기
.
.
.
.
.
안된다....ㅎ

🌟 방법 3

dev-sw.js 가 어디서 등록이 되도록 되어있는지 찾아보았다.

if('serviceWorker' in navigator) navigator.serviceWorker.register('/dev-sw.js?dev-sw', { scope: '/', type: 'classic' })

registerSW.js 파일안에서 이 코드를 발견했고

if ("serviceWorker" in navigator && process.env.NODE_ENV !== "development") navigator.serviceWorker.register("/dev-sw.js?dev-sw", { scope: "/", type: "classic" });

개발환경이 아닌 조건을 추가해서 실행을 시켜보았다.
.
.
.
.
.
안된다....ㅎ
registerSW.js가 빌드 과정에서 자동으로 생성되거나 덮어쓰여져서 추가한 조건이 사라지고 처음코드로 돌아가는 것을 발견

🌟 방법 4 ( 방법 3 해결 )

Vite PWA 플러그인을 사용중이었는데
registerSW.js를 자동으로 생성되지 않도록 PWA 설정에서 Service Worker 등록 방식을 조정하였다.

vite.config.ts 파일에서

import { defineConfig } from 'vite';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    VitePWA({
      // 개발 환경에서는 Service Worker 등록을 비활성화하도록 처리
      registerType: process.env.NODE_ENV === 'development' ? 'prompt' : 'autoUpdate',
      injectRegister: process.env.NODE_ENV === 'development' ? null : 'inline',
    }),
  ],
});

Vite PWA 설정을 수정
그러면 방법 3에서 원래의 코드를 그대로 두어도 개발환경에서는 ServiceWorker가 자동으로 등록되지 않고 main.ts에 입력한 수동으로 등록되어서 mockServiceWorker.js로 잘 등록된다!🤩🤩
이렇게 하니까 더이상 바뀌지 않는다!!
해결완료!!!!