[PWA] 프로그레시브 웹 앱 시작하기 (4) - 서비스워커 상태

[ 공지 ]

프로그레시브 웹 앱의 전반적인 내용에 대해 더 자세하게 배울 수 있는 도서가 출간되었습니다!

 

현재 블로그에 업로드된 PWA 강좌보다 더 다양하고 자세한 내용으로 구성되어있으며,

하나의 SNS 웹 앱을 개발해나가는 방식으로 실습을 진행합니다.

 

(도서 소개 및 실습 미리보기)

https://geundung.dev/106

[PWA] SNS 앱 예제로 배우는 프로그레시브 웹 앱 출간!

 

 

 

SNS 앱 예제로 배우는 프로그레시브 웹 앱

 

(구매 링크 / 2020.07.31 출간)

[YES24]

[교보문고]

[알라딘]

[인터파크도서]

 

 

프로그레시브 웹 앱의 기본적인 내용부터 시작하여, 서비스 워커, 오프라인 캐싱, 백그라운드 동기화 및 푸시 알림까지

상세한 설명을 통해 프로그레시브 웹 앱에 대해 더 다가갈 수 있을 것입니다.

 

---

 

안녕하세요~

 

 

이번 강좌에서는 서비스워커의 설치 중, 활성화, 업데이트 등

서비스워커의 상태 이벤트를 핸들링하는 방법에 대해 중점적으로 알아보도록 하겠습니다!

 

소스코드는 지난 강좌에 이어서 진행할 예정입니다.

 

혹시 소스코드가 필요하시다면 아래 링크에서 다운로드 가능합니다.

https://github.com/leegeunhyeok/pwa-example

(ch4 폴더)

 

 

[1. 서비스워커 상태 이벤트]

 

 

서비스워커가 변경될 때 (업데이트 될 때) 상태 이벤트가 발생합니다.

이 상태 이벤트에 대해 알아봅시다.

 

scripts/app.js의 서비스워커 등록부분을 아래와 같이 수정합니다.

 

serviceWorker.register을 통해 서비스워커 스크립트를 등록하면 등록 객체를 Resolve합니다.

만약 스크립트가 경로에 없거나 다른 문제가 발생하면 에러가 throw되므로 catch로 에러를 핸들링하시면 됩니다.

(위 예제에는 catch 추가 안함, 실제 환경에서는 꼭 핸들링해주세요)

 

등록객체에는

• installing
• waiting
• activate

 

3가지 프로퍼티가 있습니다.

각 상태에 해당하는 서비스워커 객체가 들어있기 때문에 필요한 상태의 서비스워커를 불러올 수 있습니다.

해당 상태에 해당하는 서비스워커가 없다면 undefined가 저장되어 있습니다.

 

이번 예제에서는 서비스워커가 업데이트될 때 상태를 감지하는 코드를 작성할 예정입니다.

업데이트 될 때 installing 상태이기 때문에 해당 프로퍼티에 접근하여 서비스워커를 불러옵니다.

 

 

위 코드에 추가된 이벤트 핸들러는 updatefound, statechange, controllerchange 총 3가지입니다.

 

서비스워커가 변경되어 업데이트를 해야될 경우 updatefound 이벤트가 발생합니다.

업데이트를 진행할 땐

 

등록 > 설치 > 활성화

순서로 진행이 되는것은 이전 강좌에서 확인했습니다.

 

서비스워커의 install, activate 이벤트는 서비스워커 내에서 이루어지므로 DOM 조작이 불가능합니다.

하지만 위 상태 이벤트를 핸들링한다면 상태에 따라 웹 페이지와 직접적으로 상호작용할 수 있습니다.

(scripts/app.js 는 서비스워커가 아닌 일반 스크립트이기 때문)

 

예를 들면 웹 페이지에서 현재 서비스워커가 활성화되기 위한 과정을 보여준다거나,

서비스워커가 활성화 될 때 까지 로딩화면을 보여준다거나 이런 기능을 구현할 수 있습니다.

 

updatefound 이벤트가 발생하면 새로운 서비스워커를 설치합니다.

설치중인 서비스워커는 등록객체의 installing에 저장되어있으며 이 서비스워커에 상태변경 이벤트를 등록할 수 있습니다.

 

const newWorker = regist.installing;

newWorker라는 변수에 설치중인 서비스워커를 담아두고 newWorker의 상태 변경을 감지합니다.

 

newWorker에 statechange 이벤트 리스너를 등록하면 설치중, 활성화 중, 활성화, 변경중 등

서비스워커의 상태가 변경될 때 마다 확인할 수 있습니다.

 

상태는 현재 총 5가지가 있습니다.

(PWA는 계속 발전하고 개발되고 있는 상태이기 때문에 이후에 새로운 상태가 추가될 수 있습니다.)

 

• installing
• installed
• activating
• activated
• redundant

 

조건문으로 상태를 비교하여 적절한 동작이 수행되도록 구현하실 수 있습니다.

 

 

위 코드를 모두 작성하셨다면 수정한 코드를 확인하기 위해 저장되어있는 캐시를 지워봅시다.

(서비스워커는 그대로 유지)

 

서비스워커의 버전을 v5로 변경한 후 웹 페이지를 새로고침합니다.

 

 

 

기존에 등록되어있던 v4 서비스워커가 v5로 업데이트 되는 과정을 확인하실 수 있습니다.

 

업데이트를 발견한 후 캐싱 작업 이후에 installed 상태로 진입했습니다.

waitUntil로 설치 과정을 확장시켰기 때문에 캐싱 작업이 모두 끝난 후 설치 됨 상태로 전환되었습니다.

 

캐싱 이후 activating 상태인데 기존 서비스워커가 있다면 활성화 중 상태에서 대기합니다.

하지만 우리 서비스워커에는 skipWaiting이 있기 때문에 대기하지 않고 바로 교체합니다.

 

Controller changed 로그가 보이시나요?

새로운 서비스워커가 제어권을 가져왔습니다.

기존의 서비스워커는 이제 없어지게 됩니다.

 

v4에서 v5로 변경 된 후 최정적으로 활성화 상태가 됩니다.

 

활성화 이후 일어나는 모든 fetch 이벤트는 서비스워커에 구현해둔 fetch 이벤트 리스너가 담당하게 됩니다.

 

 

 

 

 

 

 

오늘 강좌에서는 간단하게 서비스워커 상태에 대해 알아보았습니다.

 

이후 강좌에서는 Fetch 이벤트 외의 Sync, Push에 대해 알아보도록 할 예정입니다.

준비가 되는대로 이어서 작성하도록 하겠습니다!

 

 

감사합니다~