PWA 개발하기 앞서 사전지식 익히기! - 1

Service Worker Lifecycle

• 웹 페이지와 완전 별개의 라이프싸이클을 갖고 있다.
• [등록] 서비스워커 사용을 위해서는 먼저 페이지의 자바스크립트를 사용하여 등록해야 한다.
• [설치] 설치하는 과정에서 static한 자원들을 캐싱하고, 캐싱이 완료되면 서비스 워커가 설치가 된다. 한 개의 파일일라도 캐싱에 실패하면, 설치가 종료되고, 서비스워커는 다시 활성화되지 않는다.
• [활성] 설치가 되고 나면, 활성 스텝으로 넘어오고, 이 떄 이전(오래된) 캐쉬들을 다룰 수 있는 상태가 된다.
• [제어] 활성화 스텝 이후에는 서비스 워커가 본격적으로 모든 페이지를 제어하기 시작한다. 서비스워커에게 제어권이 돌아가면, 보통 아래 2가지 상태(Fetch, Terminated)로 나뉘게 된다.
• [페치/메시지] 네트워크 요청을 받거나 메시지를 페이지로부터 전달받았을 때 데이터를 fetch하거나 메시지 이벤트를 처리한다
• [종료] 메모리 효율을 위해 서비스워커를 종료한다

 

 

Service Worker

PWA의 핵심 기술이라고 할 수 있는데 다음과 같은 장점이 있다.

 

- Resource를 사전 prefetch하여 캐싱한다.

 

- 다양한 캐싱전략을 통하여 성능을 극대화 시킬 수 있다(이후 포스팅 예정)

 

- offline 페이지를 제공할 수 있다

 

 

* 다양한 경험이 담긴글

https://sophiedophie.github.io/2018/04/23/progressive-web-app-ios/

Progressive 웹 앱이 드디어 iOS에서도! | Sophie writes code

https://webactually.com/2017/09/%EC%9B%B9-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%8A%94-pwa%EC%9D%B4%EC%96%B4%EC%95%BC-%ED%95%9C%EB%8B%A41/

웹 프로젝트는 PWA이어야 한다 - Webactually

 

 

 

 

참조하기 좋은 소스 모음

 

https://github.com/gokulkrishh/demo-progressive-web-app

gokulkrishh/demo-progressive-web-app

https://awesomeopensource.com/projects/service-worker

The Top 81 Service Worker Open Source Projects