PWA 빌드 서비스 워커 동작 확인 방법

뷰 프레임워크는 바로 브라우저에서 실행되지 않기 때문에 파일을 정적으로 만드는 빌드 과정이 필요함

빌드해야 브라우저가 실행 가능한 자바스크립트 파일이 만들어짐.

 

배포를 위해 빌드하고 서비스 워커 동작 확인까지 해보기

 

1. 빌드

 

2. 빌드 후 프로젝트 폴더에 dist 폴더 생긴걸 볼 수 있음 -> Vue Cli가 웹팩을 통해 프로젝트 모든 소스파일 넣어주는 곳

 

3. 빌드 완료한 앱 실행 ->  dist폴더 내 index.html 파일 실행함

만약 여기서 보안 오류 ( UnauthorizedAccess , PSSecurityException ) 발생한다면

아래 포스팅 참고하기

 

티스토리

 

 

 

4. 실행 완료

 

5. 서비스 워커 동작 확인 : 개발자모드 (F12) -> Application -> Service Worker -> Status 확인 

상태가 Running이면 잘 동작하는 중

 

---

6. 만약 다른 서비스 워커 실행하고 있었으면 이전 내용 지우기위해 Clear site data 해주기