-
PWA 개발하기 앞서 사전지식 익히기! - 1JavaScript/PWA(Progressive Webp Application) 2020. 3. 9. 16:33반응형
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
Articles 섹션에서는 영어공부 & 정보 습득을 위해 저에게 필요한 글들을 번역해서 공유합니다.혹시 문제가 된다면 저에게 연락해주세요! seohee.sophie.kwon@gmail.com이 글은 ‘Progressive Web Apps on iOS are here(Maximiliano Firtman)’의 글을 번역한 것입니다. 오역이 아주 많습니다. iOS 11.3에서 애플은 Progress Web Apps (PWAs)를 염두에 둔 새로운 기술들을 조용
sophiedophie.github.io
웹 프로젝트는 PWA이어야 한다 - Webactually
PWA를 잘 설명하는 좋은 무료 콘텐츠도 많지만, 잘못된 정보 역시 만연해 있다. 아마 다음 항목 중 하나 이상은 들어봤을 것이다. PWA를 구축하려면 자바스크립트JavaScript 프레임워크를 사용해야 한다. PWA를 구축하려면 싱글 페이지 앱single page app(SPA)으로 시작해야 한다. PWA는 오직 사용자가 설치할 수 있는 ‘앱’으로서만 의미가 있다. PWA는 오직 모바일에서만 유효하다. PWA는 안드로이드Android와 관련된 것이다.
webactually.com
참조하기 좋은 소스 모음
https://github.com/gokulkrishh/demo-progressive-web-app
gokulkrishh/demo-progressive-web-app
🎉 A demo for progressive web application with features like offline, push notifications, background sync etc, - gokulkrishh/demo-progressive-web-app
github.com
https://awesomeopensource.com/projects/service-worker
The Top 81 Service Worker Open Source Projects
awesomeopensource.com
반응형'JavaScript > PWA(Progressive Webp Application)' 카테고리의 다른 글
PWA 개발하기 앞서 사전지식 익히기! - 2 (0) 2020.03.27