PWA(Progressive Web App)

PWA란?

Vue나 React Cli로 프로젝트를 만들면서 PWA대헤 아마 한두번씩 마주쳤을 것이다.

PWA란 무엇일까?

 

간단하게 말해서는 웹과 네이트 앱의 이점들을 가지도록 개발된 짬뽕 웹 앱이라고 보면된다.

그럼 Web App과 Native App의 장점들을 한번 가볍게 짚어보자.

 

- Web App : App을 설치할 필요 없이 웹페이지에 접속하면 된다.

                 링크로 공유가 용의하다.

- Native App : 운영체제와 잘 통합되므로 성능이나 UX면에서 더 자연스럽고 부드럽다.

                    오프라인에서도 동작한다.

                    한번 설치 후에는 홈 아이콘으로 쉽게 접근 가능하다.

 

위에 나열한 두 방싱의 장점들을 다 포섭하고자 PWA가 나왔다고 보면된다. 위의 장점들 말고도 더 있을 수 있다. (PUSH 알림 기능 등)

PWA는 새로운 하나의 기술이라기보다, 특정 패턴/기능, API을 포함하는 웹 앱 구축 방식의 새로운 한 방법이라고 한다.

즉, 특정 프레임워크, 라이브러리를 이용하는 새로운 기술이라기보다 다음과 같은 기능/요구사항 포함하는 웹앱을 PWA로 본다는 것이다 : 오프라인 동작, 설치 가능, 쉬운 동기화, PUSH 알림 등

(참고: https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/%EC%86%8C%EA%B0%9C)

PWA는 일부 최신 브라우저에만 제공하고 있어 아직 범용적으로 적용하기에는 한계가 있다.

 

 

PWA 특징

- 발견 가능, 따라서 컨텐츠를 검색 엔진을 통해 찾을 수 있습니다.
- 설치 가능, 따라서 기기의 홈 화면에서 사용할 수 있습니다.
- 연결 가능, 따라서 간단하게 URL을 전송해 공유할 수 있습니다.
- 네트워크 독립적, 따라서 오프라인이나 불안한 네트워크 연결에서 동작합니다.
- 점진적, 따라서 최신 브라우저의 모든 기능은 사용할 수 없지만 이전 브라우저의 기본 기능은 여전히 사용할 수 있습니다.
- 재 참여 가능(Re-engageable), 따라서 새 컨텐츠가 사용 가능할 때마다 알림을 보낼 수 있습니다.
- 반응형, 따라서 모든 기기의 화면이나 브라우저에서 사용할 수 있습니다 — 모바일 폰, 태블릿, 노트북, TV, 냉장고, 등.
- 안전, 따라서 여러분과 앱 사이의 연결이 여러분의 민감한 데이터에 접근하려는 모든 제3자로부터 안전합니다.

 

 

Service Worker란?

PWA를 위해 요구되는 핵심요소라고 볼 수 있다.

Service Worker는 브라우저가 백그라운드에서 실행하는 스크립트로, 웹페이지와 별개로 동작한다. (자바스크립트 Worker라고 보면되므로, 특징도 비슷하다.)

Service Worker는 리소스를 로드하여 캐시하는 역할을 담당하며, 웹앱의 오프라인에서의 실행과 최소 필요한 리소스만 로드한다는 데에 기여하고 있는 아이다.

 

다음과 같은 생명주기를 가지고 있다.

1) Download

2) Install

3) Activate

 

아래와 같은 특징을 가지고 있다.

- 독립된 스레드에서 실행되고, DOM에 직접 접근/제어가 불가능 하다.

- 페이지에서 실행되는 네트워크 요청에 대해 제어 가능하다

- 필요에 따라 다시 시작/종료된다.

- Promise를 사용한다.

 

아래와 같은 용도로 사용될 수 있다. 

- 푸시 알림
- 백그라운드 데이터 동기화
- 다른 출처의 리소스 요청에 대한 응답 
- geolocation이나 gyroscope 같이 비싼 계산 비용이 드는 것들을 중앙에서 업데이트해 받는다. 그래서 여러 페이지에서 같은 데이터를 사용 할 수 있다. 
- Client-side compiling and dependency management of CoffeeScript, less, CJS/AMD modules, etc. for dev purposes
- Hooks for background services
- Custom templating based on certain URL patterns
- Performance enhancements, for example pre-fetching resources that the user is likely to need in the near future, such as the next few pictures in a photo album.

 

 

참고 : https://developer.mozilla.org/ko/docs/Web/API/Service_Worker_API

참고 : https://seongdohee.github.io/2019/12/30/pwa1.html

참고 : https://developers.google.com/web/fundamentals/primers/service-workers?hl=ko