프로그레시브 웹 앱 시작하기

아디 오스마니
애디 오스마니

최근에 프로그레시브 웹 앱에 관한 환영받는 토론이 많았습니다. 비교적 새로운 모델이지만, 이 원칙은 vanilla JS, React, Polymer, Angular 또는 기타 프레임워크로 빌드된 앱을 개선할 수 있습니다. 이 게시물에서는 나만의 프로그레시브 웹 앱을 시작하기 위한 몇 가지 옵션과 참조 앱을 요약해 보겠습니다.

프로그레시브 웹 앱이란?

프로그레시브 웹 앱은 어디에서나 작동하지만 최신 브라우저에서 더욱 강력하다는 사실에 유의해야 합니다. 점진적인 개선은 모델의 핵심입니다.

아론 구스타프슨은 점진적 개선을 땅콩 M&M에 비유했습니다. 땅콩은 콘텐츠이고 초콜릿 코팅은 프레젠테이션 레이어이며 자바스크립트는 단단한 캔디 껍데기입니다. 이 레이어는 색상이 다양할 수 있으며 기능을 사용하는 브라우저의 기능에 따라 사용 환경이 달라질 수 있습니다.

캔디 껍데기는 많은 프로그레시브 웹 앱 기능이 있을 수 있는 곳이라고 생각하면 됩니다. 웹과 앱의 장점이 결합된 환경입니다. 사용자가 브라우저 탭을 처음 방문할 때부터 유용하며, 설치가 필요하지 않습니다.

반복적인 사용을 통해 이러한 앱과의 관계를 구축하면 캔디 껍데기가 더욱 달콤하게 만들어집니다. 네트워크 연결 속도가 느린 곳에서도 아주 빠르게 로드되고 (서비스 워커 덕분), 관련된 푸시 알림이 전송되고, 사용자의 홈 전체 화면 앱이 경험하는 최고급 아이콘이 표시될 수 있습니다. 스마트 웹 앱 설치 배너도 활용할 수 있습니다.

참여를 위한 웹 앱 설치 배너, 사용자 홈 화면에서 실행, Android용 Chrome의 스플래시 화면, 서비스 워커를 통해 오프라인으로 작동

프로그레시브 웹 앱은

  • 프로그레시브 - 핵심 테넌트로 점진적인 개선을 통해 빌드되었으므로 어떤 브라우저를 선택하든 관계없이 모든 사용자가 사용할 수 있습니다.
  • 반응형 - 데스크톱, 모바일, 태블릿 등 모든 폼 팩터에 맞습니다.
  • 연결 독립적 - 서비스 워커를 사용하여 오프라인 또는 저품질 네트워크에서 작동하도록 향상됩니다.
  • 앱과 유사 - 앱 셸 모델을 사용하여 앱 스타일의 탐색 및 상호작용을 제공합니다.
  • 최신 - 서비스 워커 업데이트 프로세스 덕분에 항상 최신 상태로 유지됩니다.
  • 안전 - TLS를 통해 제공되므로 스누핑이 방지되고 콘텐츠가 조작되지 않았음을 확인할 수 있습니다.
  • 검색 가능 - W3C 매니페스트 및 서비스 워커 등록 범위 덕분에 '애플리케이션'으로 식별되므로 검색엔진이 이를 찾을 수 있습니다.
  • 재참여 가능 - 푸시 알림과 같은 기능을 통해 쉽게 재참여를 유도할 수 있습니다.
  • 설치 가능 - 사용자가 앱 스토어에서 번거롭게 하지 않고도 자신에게 가장 유용한 앱을 홈 화면에 '유지'할 수 있습니다.
  • 연결 가능 - URL을 통해 쉽게 공유할 수 있으며 복잡한 설치가 필요하지 않습니다.

또한 프로그레시브 웹 앱은 Android용 Chrome에만 고유한 것은 아닙니다. 아래 그림은 Android용 Firefox (베타)에서 작동하는 Pokedex 프로그레시브 웹 앱 및 '홈 화면에 추가' 초기 단계의 작동과 서비스 워커 캐싱 기능 중 문제없이 작동하는 모습을 나타낸 것입니다.

Android용 Firefox에서 작동하는 프로그레시브 웹 앱

이 모델에 대한 '점진적' 특성의 좋은 점 중 하나는 브라우저 공급업체가 더 나은 지원을 제공할 때 기능이 점진적으로 잠금 해제될 수 있다는 점입니다. Pokedex와 같은 프로그레시브 웹 앱도 Android의 Opera에서도 훌륭하게 작동하며 구현 측면에서 몇 가지 주목할 차이점이 있습니다.

Android용 Opera에서 작동하는 프로그레시브 웹 앱

프로그레시브 웹 앱에 대해 자세히 알아보려면 이를 소개하는 Alex Russell의 원본 블로그 게시물을 읽어보세요. 폴 킨란은 프로그레시브 웹 앱에 유용한 Stack Overflow 태그를 만들기도 했습니다.

원칙

웹 앱 매니페스트

매니페스트를 사용하면 웹 앱이 사용자의 홈 화면에 네이티브와 유사한 느낌을 줍니다. 이를 통해 앱을 전체 화면 모드 (URL 표시줄 없음)로 실행할 수 있고 화면 방향을 제어할 수 있습니다. 또한 Android용 Chrome의 최신 버전에서는 주소 표시줄의 스플래시 화면테마 색상을 정의할 수 있습니다. 또한 앞서 언급한 스플래시 화면 및 홈 화면 아이콘에 사용되는 크기 및 밀도별로 아이콘 집합을 정의하는 데도 사용됩니다.

홈 화면에 추가, 홈 화면에서 실행, 전체 화면 앱 같은 환경을 제공합니다.

샘플 매니페스트 파일은 웹 스타터 키트 이상의 Chrome 샘플에서 찾을 수 있습니다. 브루스 로슨이 매니페스트 생성기를 만들었고 Mounir Lamouri가 작성한 편리한 웹 매니페스트 검사기를 확인해 보세요.

제 개인 프로젝트에서는 realfavicongenerator를 사용하여 웹 앱 매니페스트 및 iOS, 데스크톱 등에서 사용할 올바른 크기의 아이콘을 생성합니다. 파비콘 노드 모듈도 빌드 프로세스의 일부로 유사한 출력을 얻을 수 있습니다.

Chromium 기반 브라우저 (Chrome, Opera 등)는 현재 Firefox에서 적극적으로 웹 앱 매니페스트를 지원하며 Edge에서는 이를 고려 중으로 표시합니다. WebKit/Safari는 이 기능을 구현하려는 자사의 의도에 대한 공개 신호를 아직 게시하지 않았습니다.

자세한 내용은 웹 기초에서 Android용 Chrome에서 웹 앱 매니페스트가 포함된 설치 가능한 웹 앱을 읽어보세요.

'홈 화면에 추가' 배너

Android용 Chrome에서는 한동안 사이트를 홈 화면에 추가하는 기능을 지원했습니다. 하지만 최신 버전에서는 네이티브 웹 앱 설치 배너를 사용하여 사전에 사이트 추가를 제안하는 기능도 지원합니다.

Android용 Chrome에 웹 앱 설치 배너 프롬프트를 표시하는 음성 메모 데모 애플리케이션

앱 설치 메시지가 앱을 표시하려면 다음을 실행해야 합니다.

  • 유효한 웹 앱 매니페스트가 있어야 합니다.
  • HTTPS를 통해 제공됩니다 (무료 인증서는 letsencrypt 참조).
  • 유효한 서비스 워커가 등록되어 있음
  • 두 번 방문(방문 간 간격 5분 이상)

기본 배너부터 관련 애플리케이션 표시와 같은 더 복잡한 사용 사례에 이르기까지 다양한 앱 설치 배너 샘플을 사용할 수 있습니다.

오프라인 캐싱을 위한 서비스 워커

서비스 워커는 웹페이지와는 별개로 백그라운드에서 실행되는 스크립트입니다. Search Console은 게재하는 페이지에서 생성된 네트워크 요청을 비롯한 이벤트에 응답합니다. 서비스 워커의 전체 기간은 의도적으로 짧습니다.

이벤트가 발생하면 절전 모드에서 해제되어 이벤트를 처리해야 하는 기간에만 실행됩니다. 서비스 워커는 Cache API를 사용해 리소스를 캐시하고 사용자에게 오프라인 경험을 제공하는 데 사용할 수 있게 해줍니다.

서비스 워커는 오프라인 캐싱에 강력하지만 사이트 또는 웹 앱의 반복 방문에 대해 즉각적인 로드의 형태로 상당한 성능 이점을 제공합니다. 애플리케이션 셸을 캐시하여 오프라인에서 작동하도록 하고 JavaScript를 사용하여 콘텐츠를 채울 수 있습니다.

애플리케이션 셸의 서비스 워커 캐싱으로, 네트워크 없이도 로드 가능

Chrome 샘플에서 포괄적인 서비스 워커 샘플 세트를 확인할 수 있습니다. 제이크 아치볼드의 오프라인 레시피북은 필독서로, 서비스 워커가 처음이라면 폴 킨런의 첫 오프라인 웹 앱 둘러보기를 꼭 읽어보시기 바랍니다.

또한 당사 팀은 여러 서비스 워커 도우미 유틸리티와 빌드 도구를 유지 관리하며, 서비스 워커를 설정하는 과정에서 오버헤드를 줄여줍니다. 서비스 워커 라이브러리에 나열되어 있습니다. 두 가지 주요 특징은 다음과 같습니다.

  • sw-precache: 웹 앱 셸 사전 캐싱에 유용한 서비스 워커 스크립트를 생성하는 빌드 시간 도구
  • sw-toolbox: 자주 사용하지 않는 리소스에 대한 런타임 캐싱을 제공하는 라이브러리

제프 포스닉은 sw-precache에 관한 간단한 지침서인 오프라인 우선, 빠른, sw-precache 모듈Codelab을 유용하다고 생각하는 동일한 도구에 작성했습니다.

Chrome, Opera, Firefox는 모두 서비스 워커에 대한 지원을 구현했으며 Edge는 이 기능에 대한 관심을 공개적으로 밝힙니다. Safari는 한 엔지니어가 제안한 5년 계획을 통해 이에 대한 관심을 간략하게 언급했습니다.

재참여 유도 푸시 알림

사용자가 탭 외부에서 참여할 수 있는 웹 앱을 효과적으로 빌드할 수 있습니다. 브라우저를 닫을 수 있으며 웹 앱을 적극적으로 사용하지 않고도 사용자 환경에 참여할 수 있습니다. 이 기능을 사용하려면 앞에서 요약한 일부 기능을 기반으로 하는 서비스 워커와 웹 앱 매니페스트가 모두 필요합니다.

Push API는 Chrome에서 구현되어 Firefox에서 개발 중이며 Edge에서 검토 중입니다. Safari에서는 아직 이 기능을 구현하겠다는 의도에 관한 공개 신호를 받지 못했습니다.

오픈 웹의 푸시 알림은 Matt Gaunt의 푸시 설정을 포괄적으로 소개하는 내용이며 푸시 알림 Codelab도 웹 기초에서 이용할 수 있습니다.

Facebook 모바일 사이트의 웹 푸시 알림

더 많은 동영상을 시청하고 싶다면 Chrome팀의 Michael van Ouwerkerk가 푸시 관련 6분 소개를 진행합니다.

고급 기능 활용

웹 앱을 볼 때 사용하는 브라우저에 따라 사용자 환경의 달콤함이 달라질 수 있습니다. 단단한 캔디 껍질을 직접 제어할 수 있습니다.

백그라운드 동기화 (웹 앱이 닫혀 있을 때도 서버와의 데이터 동기화용) 및 웹 블루투스 (웹 앱에서 블루투스 기기와 통신하기 위해) 등 웹 플랫폼에 제공되는 추가 기능도 이러한 방식으로 프로그레시브 웹 앱에 추가할 수 있습니다.

Chrome에서 원샷 백그라운드 동기화가 사용 설정되어 있고 제이크 아치볼드는 오프라인 위키백과 앱동영상과 실제 작동 방식을 보여주는 도움말을 올렸습니다. 프랑수아 보퍼트는 이 API를 사용해 보려는 경우 여러 웹 블루투스 샘플을 사용할 수 있습니다.

프레임워크 친화적

위의 원칙을 빌드 중인 기존 애플리케이션이나 프레임워크에 적용하는 데 지장이 없습니다. 프로그레시브 웹 앱을 빌드할 때 유의해야 할 몇 가지 다른 원칙으로는 RAIL 사용자 중심 성능 모델과 플립 기반 애니메이션입니다.

2016년에는 핵심 기능으로 프로그레시브 웹 앱 지원을 위한 상용구와 시드 프로젝트가 점점 더 많아질 것으로 기대합니다. 그때까지는 자체 앱에 이러한 기능을 추가하는 데 있어 장벽이 그다지 높지 않으며 그럴 만한 가치가 있습니다.

아키텍처

'올인' 방식이 프로그레시브 웹 앱 모델을 구현하는 수준에는 여러 가지가 있지만, 일반적으로 사용되는 접근 방식 중 하나는 애플리케이션 셸을 중심으로 설계하는 것입니다. 이는 어려운 요구사항은 아니지만 몇 가지 이점이 있습니다.

애플리케이션 셸 아키텍처는 애플리케이션 셸 (사용자 인터페이스)을 캐시하여 오프라인에서 작동하고 자바스크립트를 사용하여 콘텐츠를 채우도록 합니다. 이를 통해 재방문 시 네트워크 없이도, 해당 콘텐츠에서 콘텐츠가 전달되더라도 화면에 의미 있는 픽셀을 매우 빠르게 표시할 수 있습니다. 이에 따라 성능이 크게 향상됩니다.

창과 기본 콘텐츠 영역 등 앱의 UI를 세분화하는 것으로 시각화된 애플리케이션 셸

제레미 키스는 최근 이러한 유형의 모델에서 서버 측 렌더링을 대체로 간주해서는 안 되지만 클라이언트 측 렌더링을 개선 방안으로 여겨야 한다고 댓글을 남겼습니다. 공정한 의견입니다.

애플리케이션 셸 모델에서 서버 측 렌더링을 최대한 많이 사용해야 하며, 클라이언트 측 프로그레시브 렌더링은 서비스 워커가 지원될 때 환경을 '향상'하는 것과 동일한 방식으로 개선 기능으로 사용해야 합니다. 궁극적으로는 여러 가지 방법으로 접근할 수 있습니다.

저는 아키텍처에 관한 글을 읽고 비슷한 원칙을 어떻게 자체 애플리케이션과 스택에 가장 잘 적용할 수 있는지 평가해 보고자 합니다.

시작하기 상용구

애플리케이션 셸

GitHub에서 보기

app-shell 저장소에는 거의 완벽한 애플리케이션 셸 아키텍처 구현이 포함되어 있습니다. Express.js로 작성된 백엔드와 ES2015로 작성된 프런트엔드를 갖추고 있습니다.

모델의 클라이언트 측과 서버 측 부분을 모두 다루며 많은 내용이 있다는 점을 감안하면 코드베이스에 익숙해지는 데 시간이 걸릴 것입니다. 다른 점은 현재 가장 포괄적인 프로그레시브 웹 앱 시작점입니다. 이 프로젝트의 다음 주안점은 Docs입니다.

Polymer 스타터 키트

GitHub에서 보기

Polymer 웹 앱의 공식 시작점은 다음과 같은 프로그레시브 웹 앱 기능을 지원합니다.

프로그레시브 웹 앱 기능이 내장된 Polymer 스타터 키트

현재 버전의 PSK에는 일부 Progressive Polymer 웹 앱에서 찾을 수 있는 일부 고급 성능 패턴 (예: 애플리케이션 셸 모델, 비동기 로드)에 대한 지원이 없습니다.

Google은 2016년에 이러한 패턴을 PSK에 적용할 계획입니다. 하지만 이와 관련된 초기 실험은 Rob Dodson의 Polymer Zuperkulblog 앱과 에릭 비델만의 훌륭한 Polymer Perf Pattern 강연에서 찾아볼 수 있습니다.

웹 스타터 키트

GitHub에서 보기

새로운 기본 프로젝트를 위한 Google의 독보적인 출발점에는 다음과 같은 프로그레시브 웹 앱 기능이 포함되어 있습니다.

  • 웹 애플리케이션 매니페스트
  • Android용 Chrome 스플래시스크린
  • sw-precache 덕분에 서비스 워커 사전 캐싱

vanilla JS/ES2015를 사용하고 싶은데 Polymer를 사용할 수 없다면 Web Starter Kit가 코드 스니펫을 재사용하거나 도용할 수 있는 기준점으로 유용할 수 있습니다.

프레임워크 유무에 따른 프로그레시브 웹 앱

이미 커뮤니티 회원들이 JS 라이브러리와 프레임워크의 유무에 관계없이 여러 오픈 소스 프로그레시브 웹 앱을 빌드했습니다. 아이디어가 필요한 경우 아래 저장소를 참고하세요. 게다가 꽤 좋은 앱이기도 합니다.

React, Polymer, Virtual DOM 및 AngularJS를 사용하여 구현된 프로그레시브 웹 앱

Vanilla 자바스크립트

Polymer

반응

  • Jeff Posnick의 iFixit - 애플리케이션 셸 캐싱에 sw-precache 사용 (슬라이드)

가상 DOM

  • 놀란 로슨의 Pokedex. 프로그레시브 렌더링에 도움이 되도록 '웹 작업자에서 모든 작업을 수행'하는 접근 방식을 적용하는 우수한 프로그레시브 웹 앱입니다. (문서)

Angular.js

  • 케네스 아우헨버그의 Timey.in - 리소스 사전 캐싱에 sw-precache도 사용

맺음말

앞서 언급했듯이 프로그레시브 웹 앱은 아직 초기 단계이지만, 프로그레시브 웹 앱은 그 이면의 방법론을 살펴보고 자신의 웹 앱에 얼마나 잘 적용될 수 있는지 살펴봐야 할 때입니다.

폴 킨런은 현재 프로그레시브 웹 앱에 관한 웹 기초 가이드를 계획하고 있으며, 다루고 싶은 내용이 있으면 대화목록에 댓글을 남겨주시기 바랍니다.

추가 자료