PWA(Progressive Web App)란 말 그대로 “혁신적인” 웹 + 앱을 말한다. 웹 개발과 동일한 스킬셋으로 개발하고, 몇가지 설정 파일들을 추가하면 앱처럼 활용할 수 있게 된다. 하이브리드 앱과 비슷하게 들리지만 다르다. 하이브리드 앱은 배포 단계에서 개발자가 네이티브 앱과 같이 설치할 수 있는 형태로 빌드를 하고, 스토어를 통해 배포하는 방식을 거치게 된다. 하지만 PWA는 브라우저에 의존하여 앱처럼 사용할 수 있다. 최근 핫한 기술로 주목받고 있긴하지만 널리 쓰이기엔 아직 ? 스러운 부분이 있다. 일단 내가 곧죽아(곧 죽어도 아이폰..)이기 때문에 사용을 못해서 느끼는 부분이 제일 크기도 하고, 아직까지는 지원하는 브라우저가 많이 없기때문에 하이브리드 앱을 대체할 수 있기엔 무리가 크다고 생각한다.
PWA는 아래와 같은 특징을 가지고 있다고 한다.
Progressive: 점진적인 개선을 통해 작성되므로, 모든 사용자에게 적합하다. (오래된 브라우저에서는 지원 안하므로 아직까진 잘 모르겠는 부분)Reactive: 데스크탑, 모바일 등 다양한 플랫폼에서 사용할 수 있다.연결 독립적: service-worker를 사용하여 오프라인환경, 느린 네트워크에서도 작동하도록 한다.앱과 유사: 앱 셸 모드에서 작성되기 때문에 앱 스타일의 상호작용, 탐색 기능을 제공한다.안전: HTTPS를 통해 제공되므로, 스누핑 차단, 콘텐츠 위변조를 방지한다.검색 가능: W3C manifast 및 service-worker 등록 범위로 인해, 어플리케이션으로 식별되므로, 검색 엔진에서 검색이 가능하다.재참여 가능: 푸시 알람과 같은 기능을 통해 재참여(재방문 유도)가 가능하다.설치 가능: 쉽게 설치하여 홈 화면에 유지할 수 있도록 한다.링크 연결 가능: URL을 통해 손쉽게 공유 가능하다.
여기서 중요한 개념인 앱 셸 모델과 service-worker에 대해서 좀 더 알아보도록 하자.
App Shell Model
앱 셸이란 PWA를 빌드하는 방법중 하나이다. 앱 셸을 통해 웹으로 개발한 PWA 앱은 네이티브 앱과 유사하게 상호작용을 할 수 있게 된다. 앱 셸은 앱 구동 시 필요한 최소한의 리소스만 로드하고, 캐싱한다. 앱에 방문할 때마다 리소스를 로드하지 않는다. 필요한 컨텐츠만 로드하도록 개발자가 설정할 수 있다. (서비스 워커에서)
앱 셸은 마치 SPA 동작 방식과 유사하다. SPA에서는 초기 화면에서 필요한 리소스만 로드하고, 나머지는 필요할 때마다 동적으로 로드하여 사용한다. 이때문에 앱 셸은 네트워크 없이 첫 화면을 빠르게 가져오는데 유용하다.
장점
다음은 service-worker를 포함한 앱 셸의 장점이다.
- 성능: 재방문 시 사용자는 빠르다고 느낀다. 첫 방문에서 필요한 리소스를 로드하여 캐싱했기 때문이다.
- 네이티브와 같은 상호작용: 네이티브와 유사한 네비게이션, 상호작용이 가능한 경험을 구현할 수 있다.
- 데이터의 경제적인 사용: 1번과 연결되는 내용으로, 최소 데이터 사용을 목적으로 설계하고 무엇을 캐시할 지 개발자가 선택할 수 있다.
Service Worker
서비스 워커는 브라우저가 백그라운드에서 실행하는 스크립트로, 웹패이지와는 별개로 작동한다. 이를 통해서 사용자의 상호 작용이 필요하지 않는 기능에 대해 개발자가 제어권을 가질 수 있으며, 예를 들어 푸시 알림과 백그라운 기능이 있다.
서비스워커는 다음과 같은 유의 사항이 있다.
- 서비스워커는 독립된 스레드에서 실행되므로, DOM에 직접 접근할 수 없다.
- 서비스워커는 네트워크 프록시이며, 페이지에서 실행되는 네트워크 요청에 대해 제어가 가능하다.
- 서비스워커는 사용되지 않으면 종료되고, 필요할때 다시 시작되므로
onfetch,onmessage이벤트의 상태에 의존할 수 없다. - 서비스워커는
Promise를 사용하므로 이에 숙지하고 있어야한다.
생명 주기
서비스워커의 생명 주기는 웹페이지와 별개로 진행된다. 서비스워커를 사이트에 설치하려면, 자바스크립트를 이용해서 등록해야한다. 이 포스트에서는 개념부분만 정리하고 다음 포스트에서 실제로 등록해 보는것을 코드로 정리해보도록 하겠다.
- 웹페이지에 진입하면, 웹페이지의 서비스워커 등록 자바스크립트가 실행되어 서비스워커를 설치한다. 설치 단계 동안 정적인 리소스를 캐싱하고, 모든 파일이 캐시되면 서비스워커가 설치된다.
2-1. 설치 단계에서 리소스 다운로드에 실패하면 설치에 실패하고, 서비스워커는 활성화되지 않는다. (설치 X)
2-2 설치가 완료되면 활성화 단계가 진행된다. 이 단계에서 오래된 캐시를 관리할 수 있다. - 활성화 단계 후 서비스워커는 범위 안의 모든 페이지를 제어하지만, 처음 등록한 페이지는 재로드해야 제어가 가능하다. 서비스워커에 제어 권한이 부여된 경우 사용되지 않으면 메모리 절약을 위해 종료되거나, 페이지에서 네트워크 요청이나 메세지가 생성될 때, fetch/message 이벤트를 처리한다.
Browser Support
서론에서도 언급했지만, PWA는 일부 최신 브라우저에만 제공하고 있다.
참고 레퍼런스
https://www.html5rocks.com/en/tutorials/workers/basics/ https://developers.google.com/web/fundamentals/primers/service-workers?hl=ko https://developers.google.com/web/fundamentals/architecture/images/appshell.png?hl=ko https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/%EC%86%8C%EA%B0%9C