웹페이지 서비스워커 제작 프로그램
- Nest
- Concept
- Category
- Programing
- Hit
- 106
- Star
- 0
웹페이지 서비스워커는 번들링 영역과 연관이 없고 영역도 분리되어있다. (서비스워커 내부에서는 window 객체도 안나왔다.)
그저 독립적으로 돌아가는 공간이라고 볼 수 있으며 특정한 브라우저 이벤트가 발생되었을때 일부 이벤트 리스너에서 실행되는 인상을 받았다.
vite 플러그인에서 파악해보니 vite.config.js 영역에서 설정을 하는게 보였다.
그리하여 보통 사용하는 sw.js 파일을 불러오는 부분은 서비스영역에서 호출하고 sw.js제작은 별도의 번들링으로 사용하는게 좋아 보인다.
내가 생각할때 서비스워커와 함께하는 빌드 프로세스는 다음과 같다.
- 클라이언트 서비스 빌드
- 빌드된 파일들이
/dist에 저장 /dist에 들어있는 파일들을 패스 목록을 뽑아온다.- 패스목록과 캐시버전의 값을
sw.js내용에다 붙인다. - 업데이트된
sw.js파일을/dist에다 집어넣는다.
이렇게 하여 빌드할적에 sw.js 업데이트를 해주는 스크립트가 별도로 만들어지는게 좋을것이다.
sw.js 외부에서 변경이 필요한 값은 캐시이름과 캐시 리소스 패스목록이 되는거같다.
이 두가지로 인하여 pwa 앱에서 업데이트를 결정짓는 역할을 한다.
서비스워커의 캐시가 어떻게 동작하는지 데모코드를 작성하면서 알아보니 서비스를 만들때 어떻게 만들어야할지 조금은 감이 오는거 같다.
업데이트나 푸쉬 메시지같은 서비스워커와 클라이언트 커뮤니케이션은 좀더 연구해봐야 할것이다.
서비스워커에 대하여 알아본 프로젝트의 소스코드