Next-PWA custom service worker 추가 등록 (multi service worker)

요약

---

푸시 알림 등 여러 기능을 next-pwa로 활용을 하려면 멀티 서비스워커가 필요한데
빌드시에 sw.js를 최적화하여 단일 서비스워커가 아니라면 중복 혹은 오류를 뿜는다.
그리하여 아래의 코드로 변경 필요

1. register:false => 자동적으로 서비스워커가 등록되지 않아야함

2.최상위 클라이언트 컴포넌트에서 멀티 서비스워커 등록!

1. 문제 인식하기

---

next-pwa는 sw.js를 자체적으로 빌드시에 서비스워커로 등록하지만 초기화를 하여 sw.js에 코드 작성 불가

원하는 서비스워커의 기능을 추가하려면 커스텀 서비스워커가 필요.

동시에 두개의 서비스워커 등록이 불가함 인식

 

 

 

2. 원인 찾아가기

---

1.  next.config.ts에 customWorkerDir:"worker"로 추가
    - /public/worker/index.js에 푸시 기능을 담은 함수 추가

     => sw.js 중복으로 실행 안됨

2. next.config.ts에 register: true 추가 
    - sw.js는 자동적으로 등록이 되게하고 index.js는 최상위 클라이언트 컴포넌트에서 서비스워커로 등록하기

    => sw.js 중복으로 실행 안됨

 

3. 해결 방안

---

next-pwa에서 빌드를 할때에 sw.js를 초기화 하여 빌드를 하는데

sw.js가 중복 문제를 일으켜 문제가 됨에 따라 

자동적으로 등록되지 않도록 register를 false로 변경해주었다.

이후 최상위 클라이언트 컴포넌트에서 useEffect로 시작시에 서비스워커로 등록하여 해결!

 

 

 

4.결과 및 회고

---

 

 

간편하게 PWA 기능을 사용하기 위해 Next-pwa 라이브러리를 설치하였는데

라이브러리가 있으니 쉽게 얕봤다가 아주아주 큰코를 다치게 되었다 하하하

Next-pwa의 최종 코드 업데이트는 오늘 기준(25.03.18)  2022년 즉, 약 3년전의 일이다.

이렇다보니 깃헙의 이슈는 서로 안된다는 하소연의 글만 올라와있다..ㅎ

라이브러리를 선택할때에 이러한 이슈도 생각해봐야할것같다.


소요기간 : 5시간

다시보는 테스트 알림이 얼마나 반가운지...