최근 프로그레시브 웹 앱에 대한 논의가 많이 접수되었습니다. 여전히 비교적 새로운 모델이지만, 이러한 원칙은 vanilla JS, React, Polymer, Angular 또는 기타 프레임워크로 빌드된 앱을 개선하는 데에도 똑같이 도움이 될 수 있습니다. 이 게시물에서는 프로그레시브 웹 앱을 바로 시작하기 위한 몇 가지 옵션과 참고용 앱에 대해 간략히 살펴보겠습니다.
프로그레시브 웹 앱이란 무엇인가요?
프로그레시브 웹 앱은 어디에서나 작동하지만 최신 브라우저에서 강력해집니다. 점진적 개선은 모델의 근간입니다.
아론 구스타프슨은 땅콩 M&M에 점진적인 개선을 꼽았습니다. 땅콩은 콘텐츠이고, 초콜릿 코팅은 프레젠테이션 레이어, JavaScript는 단단한 사탕 껍데기입니다. 이 계층의 색상은 다양할 수 있으며, 이 계층을 사용하는 브라우저의 기능에 따라 계층이 달라질 수 있습니다.
캔디 셸은 많은 Progressive Web App 기능이 있는 곳이라고 생각하면 됩니다. 웹의 장점과 앱의 장점을 결합한 환경입니다. 사용자가 브라우저 탭을 맨 처음 방문할 때부터 유용하며, 설치가 필요하지 않습니다.
사용자가 반복 사용을 통해 이러한 앱과 관계를 구축하면 캔디 셸이 더욱 달콤해집니다. 서비스 워커 덕분에 느린 네트워크 연결에서도 매우 빠르게 로드되고, 관련 푸시 알림이 전송되고, 사용자의 홈 화면에 최고 수준의 아이콘이 표시되므로 앱을 전체 화면 앱 환경으로 로드할 수 있습니다. 스마트 웹 앱 설치 배너를 활용할 수도 있습니다.
프로그레시브 웹 앱은
- 프로그레시브 - 점진적인 개선을 핵심 테넌트로 하여 빌드되었으므로 브라우저 선택에 상관없이 모든 사용자에게 적합합니다.
- 반응형 - 폼 팩터, 데스크톱, 모바일, 태블릿 등 모든 기기에 적합합니다.
- 연결 독립적 - 서비스 워커를 사용하여 오프라인 또는 저품질 네트워크에서 작동하도록 향상됩니다.
- 앱과 유사 - 앱 셸 모델을 사용하여 앱 스타일의 탐색 및 상호작용을 제공합니다.
- 최신 상태 - 서비스 워커 업데이트 프로세스 덕분에 항상 최신 상태로 유지됩니다.
- 안전함 - 스누핑을 방지하고 콘텐츠가 조작되지 않도록 TLS를 통해 제공됩니다.
- 검색 가능 - W3C 매니페스트와 서비스 워커 등록 범위로 인해 검색엔진이 찾을 수 있으므로 '애플리케이션'으로 식별됩니다.
- 재참여 가능 - 푸시 알림과 같은 기능을 통해 쉽게 재참여를 유도할 수 있습니다.
- 설치 가능 - 앱 스토어의 번거로움 없이 사용자가 가장 유용하다고 생각하는 앱을 홈 화면에 '유지'할 수 있습니다.
- 연결 가능 - URL을 통해 쉽게 공유할 수 있으며 복잡한 설치가 필요 없습니다.
또한 프로그레시브 웹 앱은 Android용 Chrome에만 국한되지 않습니다. 아래에서는 Android용 Firefox (베타)에서 작동하는 Pokedex 프로그레시브 웹 앱이 초기 홈 화면에 추가를 사용하고, 서비스 워커 캐싱 기능이 정상적으로 작동하는 것을 확인할 수 있습니다.
이 모델의 '점진적' 특성의 좋은 점 중 하나는 브라우저 공급업체가 더 나은 지원을 제공할수록 기능이 점진적으로 잠금 해제될 수 있다는 점입니다. Pokedex와 같은 프로그레시브 웹 앱도 Android의 Opera에서도 훌륭하게 작동하며, 구현 측면에서 다음과 같은 주목할 만한 차이점이 있습니다.
프로그레시브 웹 앱에 대해 자세히 알아보려면 알렉스 러셀이 소개하는 블로그 게시물 원본을 읽어보세요. Paul Kinlan은 또한 프로그레시브 웹 앱에 사용할 만한 매우 유용한 Stack Overflow 태그도 시작했습니다.
원칙
웹 앱 매니페스트
매니페스트를 사용하면 웹 앱이 사용자의 홈 화면에 더 자연스러운 방식으로 표시될 수 있습니다. 이를 통해 앱을 전체 화면 모드 (URL 표시줄 없음)로 실행할 수 있고 화면 방향을 제어할 수 있습니다. 최신 버전의 Android용 Chrome에서는 주소 표시줄의 스플래시 화면 및 테마 색상 정의를 지원합니다. 앞서 언급한 스플래시 화면과 홈 화면 아이콘에 사용된 크기 및 밀도별로 아이콘 집합을 정의하는 데도 사용됩니다.
샘플 매니페스트 파일은 웹 스타터 키트와 Chrome 샘플에서 확인할 수 있습니다. Bruce Lawson은 매니페스트 생성기를 작성했으며 Mounir Lamouri도 유용한 웹 매니페스트 검사기를 작성하여 확인해 볼 만한 가치가 있습니다.
개인 프로젝트에서는 realfavicongenerator를 사용해 웹 앱 매니페스트와 iOS, 데스크톱 등에서 사용할 수 있도록 올바른 크기의 아이콘을 생성합니다. favicons Node 모듈도 빌드 프로세스의 일부로 유사한 출력을 얻을 수 있습니다.
현재 Chromium 기반 브라우저 (Chrome, Opera 등)에서 웹 앱 매니페스트를 지원합니다. Firefox는 적극적으로 지원을 개발하고 있으며, 웹 앱 매니페스트를 검토 중으로 표시합니다. WebKit/Safari는 아직 이 기능을 구현하겠다는 공개 신호를 게시하지 않았습니다.
자세한 내용은 웹 기초에서 Android용 Chrome에서 웹 앱 매니페스트를 사용한 설치 가능한 웹 앱을 참고하세요.
'홈 화면에 추가' 배너
Android용 Chrome에서는 한동안 사이트를 홈 화면에 추가하는 기능을 지원하지만, 최신 버전에서는 기본 웹 앱 설치 배너를 사용하여 사이트를 추가할 것을 사전에 제안하는 기능도 지원합니다.
앱 설치 메시지가 앱을 표시하려면 다음 조건을 충족해야 합니다.
- 유효한 웹 앱 매니페스트가 있음
- HTTPS를 통해 제공됩니다 (무료 인증서는 letsencrypt 참조).
- 유효한 서비스 워커가 등록되어 있어야 함
- 방문 간격이 5분 이상인 경우 두 번 방문해야 합니다.
기본 배너에서 관련 애플리케이션 표시와 같은 좀 더 복잡한 사용 사례까지 다양한 앱 설치 배너 샘플이 제공됩니다.
오프라인 캐싱을 위한 서비스 워커
서비스 워커는 웹페이지와는 별개로 백그라운드에서 실행되는 스크립트입니다. 이 도구는 서비스를 제공하는 페이지에서 생성된 네트워크 요청을 비롯한 이벤트에 응답합니다. 서비스 워커의 수명은 의도적으로 짧습니다.
이 백도어는 이벤트를 수신하면 절전 모드에서 해제되고, 이벤트를 처리해야 하는 기간 동안만 실행됩니다. 서비스 워커를 사용하면 Cache API로 리소스를 캐시하고 사용자에게 오프라인 환경을 제공할 수 있습니다.
서비스 워커는 오프라인 캐싱에 강력하지만, 사이트나 웹 앱을 반복해서 방문할 때 즉각적인 로드의 형태로 상당한 성능상 이점을 얻을 수도 있습니다. 애플리케이션 셸을 캐시하여 오프라인에서 작동하도록 하고 JavaScript를 사용하여 콘텐츠를 채울 수 있습니다.
포괄적인 서비스 워커 샘플 모음을 Chrome 샘플에서 확인할 수 있습니다. 제이크 아치볼드의 오프라인 설명서는 꼭 읽어야 할 자료입니다. 서비스 워커를 처음 사용한다면 Paul Kinlan의 첫 오프라인 웹 앱 둘러보기를 꼭 해 보시기 바랍니다.
또한 여러 서비스 워커 도우미 유틸리티를 유지관리하고 있으며 서비스 워커를 설정할 때 오버헤드를 줄이는 데 유용한 도구를 구축합니다. 서비스 워커 라이브러리에 나열되어 있습니다. 두 가지 주요 요소는 다음과 같습니다.
- sw-precache: 웹 앱 셸을 사전 캐시하는 데 유용한 서비스 워커 스크립트를 생성하는 빌드 시간 도구
- sw-toolbox: 자주 사용되지 않는 리소스에 대한 런타임 캐싱을 제공하는 라이브러리
제프 포스닉은 sw-precache에 관한 빠른 안내서를 '오프라인 우선, 빠른, sw-precache 모듈'과 '유용한 도구'에 관한 Codelab을 사용해 작성했습니다.
Chrome, Opera, Firefox는 모두 서비스 워커에 대한 지원을 구현했으며 Edge는 이 기능에 관심이 있다는 긍정적인 대중 신호를 갖고 있습니다. Safari는 한 엔지니어가 제안한 5개년 계획을 통해 이 기능에 관심이 있다고 간단히 언급했습니다.
재참여를 위한 푸시 알림
사용자가 탭 밖에서 사용할 수 있는 웹 앱을 효과적으로 빌드할 수 있습니다. 브라우저를 닫을 수 있으며, 사용자가 웹 앱을 적극적으로 사용하지 않아도 사용 환경에 참여할 수 있습니다. 이 기능을 사용하려면 앞서 요약한 일부 기능을 기반으로 구축된 서비스 워커와 웹 앱 매니페스트가 모두 필요합니다.
Push API는 Chrome에서 구현되었으며 Firefox에서 개발 중이며 Edge에서 고려 중입니다. Safari에서 이 기능을 구현하겠다는 공개 신호를 아직 확보하지 못했습니다.
오픈 웹의 푸시 알림은 맷 건트가 푸시 설정을 하는 방법을 포괄적으로 소개하고 웹 기초에서 푸시 알림 Codelab을 이용할 수 있습니다.
Chrome팀의 마이클 반 아우베르커크가 동영상에 관심이 있는 경우 푸시에 대한 6분 소개를 제공합니다.
고급 기능 레이어링
웹 앱을 표시하는 데 사용하는 브라우저에 따라 사용자 환경의 달콤함이 다를 수 있습니다. 단단한 캔디 셸을 제어할 수 있습니다.
백그라운드 동기화 (웹 앱이 닫혀 있는 경우에도 서버와의 데이터 동기화용) 및 웹 블루투스 (웹 앱에서 블루투스 기기와 통신하기 위한 경우)와 같이 웹 플랫폼에 제공되는 추가 기능도 이러한 방식으로 프로그레시브 웹 앱에 레이어로 추가될 수 있습니다.
원샷 백그라운드 동기화가 Chrome에서 사용 설정되어 제이크 아치볼드는 자신의 오프라인 위키백과 앱을 보여주는 동영상과 실제 동작을 보여주는 도움말을 보유하고 있습니다. Francois Beaufort가 제공하는 다양한 웹 블루투스 샘플도 API를 사용해 볼 수 있습니다.
프레임워크 친화적
빌드하는 기존 애플리케이션이나 프레임워크에 위의 원칙을 적용하는 것을 막을 수 있는 여지는 없습니다. 프로그레시브 웹 앱을 빌드할 때 유념해야 할 몇 가지 다른 원칙은 RAIL 사용자 중심 성능 모델과 플립 기반 애니메이션입니다.
2016년에는 점점 더 많은 상용구 및 시드 프로젝트가 핵심 기능으로 프로그레시브 웹 앱을 지원하기 위해 유기적으로 베이킹되는 것을 목격하리라 기대합니다. 그때까지는 자체 앱에 이러한 기능을 추가하는 데 따른 장벽이 그리 높지 않으며 IMHO(이하 IMHO)는 노력할 만한 가치가 있습니다.
아키텍처
'올인' 방식이 프로그레시브 웹 앱 모델에 적용되는 방식에는 여러 수준이 있지만, 일반적인 한 가지 접근 방식은 애플리케이션 셸을 중심으로 설계하는 것입니다. 이는 까다로운 요구사항은 아니지만 여러 가지 이점이 있습니다.
애플리케이션 셸 아키텍처는 애플리케이션 셸 (사용자 인터페이스)을 캐시하여 오프라인에서 작동하고 자바스크립트를 사용하여 콘텐츠를 채우도록 권장합니다. 재방문 시 네트워크 없이 화면에 의미 있는 픽셀을 매우 빠르게 표시할 수 있습니다. 이에 따라 상당한 성능 향상이 수반됩니다.
제러미 키스는 최근 이러한 유형의 모델에서 서버 측 렌더링을 대체로 간주해서는 안 되지만 클라이언트 측 렌더링은 개선사항으로 봐야 한다고 논의했습니다. 공정한 의견입니다.
Application Shell 모델에서 서버 측 렌더링을 최대한 많이 사용해야 하며 클라이언트 측 프로그레시브 렌더링을 서비스 워커가 지원될 때 환경을 '향상'하는 것과 동일한 방식으로 개선사항으로 사용해야 합니다. 최종적으로는 다양한 방법으로 접근할 수 있습니다.
아키텍처에 대한 글을 읽고 유사한 원칙을 자체 애플리케이션 및 스택에 가장 잘 적용할 수 있는 방법을 평가하는 것을 추천합니다.
보일러플레이트 시작하기
애플리케이션 셸
app-shell 저장소에는 애플리케이션 셸 아키텍처의 거의 완전한 구현이 포함되어 있습니다. Express.js로 작성된 백엔드와 ES2015로 작성된 프런트엔드를 가지고 있습니다.
모델에서 클라이언트 측과 서버 측 부분을 모두 포괄하고 이 부분에서 진행되는 작업이 상당히 많다는 점을 감안할 때, 코드베이스에 익숙해지려면 어느 정도 시간이 걸립니다. 이것이야말로 Google의 가장 포괄적인 프로그레시브 웹 앱 출발점입니다. Docs는 이 프로젝트의 다음 중점 주제입니다.
Polymer 스타터 키트
Polymer 웹 앱의 공식 시작점에서는 다음과 같은 프로그레시브 웹 앱 기능을 지원합니다.
- 웹 애플리케이션 매니페스트
- Android용 Chrome 스플래시스크린
- 플래티넘 SW 요소를 통한 서비스 워커 오프라인 캐싱
- 플래티넘 푸시 요소를 사용한 푸시 알림 (수동 설정 필요)
현재 버전의 PSK는 일부 프로그레시브 폴리머 웹 앱에서 볼 수 있는 고급 성능 패턴 (예: 애플리케이션 셸 모델, 비동기 로딩)을 지원하지 않습니다.
Google은 2016년에 이러한 패턴을 PSK에 적용하는 것을 목표로 하고 있지만, 이와 관련된 초기 실험은 Rob Dodson의 Polymer Zuperkulblog 앱과 Eric Bidelman의 훌륭한 Polymer Perf 패턴 강연에서 확인할 수 있습니다.
Web Starter Kit
새로운 vanilla 프로젝트를 위한 Google의 독보적인 시작점으로는 다음과 같은 프로그레시브 웹 앱 기능이 있습니다.
- 웹 애플리케이션 매니페스트
- Android용 Chrome 스플래시스크린
- sw-precache를 통한 서비스 워커 사전 캐싱
vanilla JS/ES2015로 작업하는 것을 선호하고 Polymer를 사용할 수 없는 경우, Web Starter Kit는 코드 스니펫을 재사용하거나 훔칠 수 있는 참조 지점으로 유용할 수 있습니다.
프레임워크가 있거나 없는 프로그레시브 웹 앱
커뮤니티 구성원들은 이미 많은 오픈 소스 프로그레시브 웹 앱을 JS 라이브러리와 프레임워크의 유무에 관계없이 빌드했습니다. 아이디어를 얻고 싶다면 아래 저장소를 참고하세요. 꽤 괜찮은 앱입니다.
바닐라 자바스크립트
- Paul Lewis의 음성 메모는
app-shell와 유사한 아키텍처를 사용하여 작성되었습니다 (작성). - 오프라인 위키백과 작성자: Jake Archibald (동영상)
- Air Horner - 폴 킨란
- 폴 루이스의 Guitar Tuner (작성)
Polymer
- Rob Dodson의 Zuperkulblog (슬라이드)
React
가상 DOM
Angular.js
- 케네스 오헨버그의 Timey.in - 리소스 사전 캐싱에
sw-precache도 사용
맺음말
앞서 언급한 바와 같이, 프로그레시브 웹 앱은 아직 초기 단계이지만, 이제 프로그레시브 웹 앱이 뒤에 있는 방법론을 살펴보고 자신의 웹 앱에 얼마나 잘 적용할 수 있는지 확인해 볼 기회입니다.
Paul Kinlan은 현재 프로그레시브 웹 앱에 관한 웹 기초 가이드를 계획하고 있습니다. 다루고 싶은 내용이 있다면 대화목록에 자유롭게 댓글을 남겨주세요.