20.01.06 TIL 서비스워커로 인한 포트점령(?) 현상 해결하기

서비스워커로 인한 포트 점령 현상(?) 해결 하기

문제 발생

webpack-dev-server로 개발 중인 웹을 작동시키자 이전에 pwa workshop에서 Servie Worker와 Web App Manifest를 적용하여 개발했었던 리액트메모 웹만 보이는 현상 발생.

문제 원인

webpack-dev-server를 종료하고 접속하여도 리액트메모 웹이 보이는 걸로 유추해 볼 때 offline 기능을 지원하는 Servie Worker와 관련이 있다고 생각.

문제 접근

인터넷 익스플로러에서는 bash에서 crtl + c로 서버를 종료 시

이 페이지에 연결할 수 없음 메세지가 정상적으로 뜸. => 처음에는 서비스워커를 지원하지 않기 때문이라고 생각했지만 문제 해결 후 생각해보니 workbox-precache-v2 캐시 자체가 없는 원인도 작용.

하지만 크롬에서는 crtl + c로 서버를 종료 시에도 서비스워커에 오프라인지원 기능으로 인해서 접속에러가 발생하지 않고 정상 작동함.

문제 해결 과정

1. public 폴더에서 index.html 파일과 index.bundel.js 파일을 삭제하고 서비스워커 관련 코드 삭제 후 다시 build 해보자! => 안됨 ㅠ

2. public 폴더에 있는 모든 것을 삭제한 후 build 해보자! => 안됨 ㅠ

3. cache storage에 있는 workbox-precache-v2 캐시 삭제하기 => 드디어 해결!!

피드백

Workbox 소개글

Welcome, Workbox is a set of libraries and Node modules that make it easy to cache assets and take full advantage of features used to build Progressive Web Apps.

• 서비스워커를 구현하기 위해 사용한 workbox 라이브러리가 캐시를 이용한다는 사실만 알았다면 더 쉽게 해결할 수 있던 문제.

• 캐시에 대한 이해도도 아직 많이 부족함.

추가

Application -> Sevice Workers -> Service workers from other origins탭에서 관련 Servie Worker들을 Unregister해야 한다.