프로그레시브 웹 앱(PWA)은 웹 사이트를 구축하는 새로운 방법입니다만, 완전히 새로운 방법일까요? PWA의 기본 원칙은 점진적인 향상, 반응형 디자인, 모바일 우선 등과 같은 앱 디자인을 위한 과거의 전략으로부터 비롯되었습니다. 프로그레시브 웹 앱은 새로운 API 세트와 여러 기능들과 같은 입증된 기술들을 하나의 용어로 통합하여 지칭하는 것입니다. 2018년은 PWA의 해가 될 것입니다.

MDN 웹 문서에는 PWA에 관심있는 모든 분들을 위한 PWA 핵심 가이드 세트가 작성되어 있습니다. 저는 게임 개발자로서 이 시리즈에 게임과 관련된 예제를 포함시킬 수 밖에 없었습니다. js13kPWA는 js13kGames 2017 대회의 A-Frame 카테고리에 포함된 모든 항목을 나열한 제 웹사이트입니다.

사용자가 모바일 브라우저를 지원하는 PWA 페이지를 방문하면, PWA로서 앱 설치가 가능하다는 배너가 나타나야합니다:

여전히 다른 웹사이트와 거의 같기 때문에, 별도의 단계가 필요 없이 여러분 스스로 시도해 볼 수 있습니다. 소스 코드는 Github에 있으며, 라이브로 볼 수도 있습니다.

현재 다섯 개의 PWA 핵심 가이드 문서가 있습니다:

• PWA 소개
• 앱 구조
• Service Worker를 사용해 오프라인에서 동작
• 홈 화면에 설치
• 알림과 푸시를 사용한 재 관여(Re-engaging).

프로그레시브 웹 앱 소개

시리즈의 첫 문서는 프로그레시브 웹 앱을 소개합니다: PWA가 무엇인지, 무엇이 앱을 점진적으로 만드는지, 구축하는 것이 가치있는지, 일반적인 웹 앱에 가져다주는 이점에 대해 정의합니다.

브라우저 지원과 js13k PWA 예제를 확인할 수 있습니다. 예제에 포함된 구현물은 이어지는 문서에서 설명합니다.

프로그레시브 웹 앱 구조

이제 여러분은 PWA의 이론에 대해 배웠고, 실제 앱의 권장 구조에 대해 살펴볼 수 있습니다. 이 문서는 서버 사이드 렌더링과 클라이언트 사이드 렌더링의 차이에 대해 살펴보고, 이 둘을 혼합하는 방법을 보여주며 여러분이 원하는 방식으로 PWA를 구축하는 방법에 대해 설명합니다.

app shell 개념은 앱의 구조를 구축하는 가장 유명한 접근법입니다. 접근가능하고, 점진적이며 디자인에 반응해야 한다는 규칙을 따르는 것이 중요합니다. 우리는 Streams API가 가까운 미래에 더 빠른 점진적인 로딩을 지원하는 방법에 대해서도 간략하게 설명합니다.

Service worker를 사용해 PWA를 오프라인에서 동작하게 만들기

이 문서는 service worker를 사용해 오프라인 기능을 구현에 대한 상세 내용과 오프라인 우선 접근법에 대해 설명하며 PWA에서 “점진적“이라는 것이 중요한 이유에 대해 살펴봅니다.

그 후 js13kPWA 소스 코드를 분석해 service worker를 등록하는 방법과, 상세 내용에서 설명한 설치, 활성화 및 업데이트를 통해 service worker의 수명 주기가 어떤지, 필요한 경우 캐시를 어떻게 지우는지에 대해 배웁니다.

PWA를 설치 가능하도록 만드는 방법

네 번째 문서는 모바일 브라우저를 지원하는 모바일 기기에 PWA를 설치하여 앱을 네이티브 앱처럼 사용할 수 있는 방법에 대해 설명합니다.

사용자가 버튼을 클릭하면, 앱이 어떻게 표시될지 보여주는 추가 단계가 있습니다. 확인이되면 앱은 홈 화면에 설치됩니다:

이 섹션에서는 기본 요구사항, manifest 파일의 내용, 홈 화면에 추가 기능, 스플래시 스크린 구성에 대해 살펴봅니다.

알림과 푸시를 사용해 PWA를 재관여(reengageable) 가능하도록 만드는 방법

핵심 가이드의 마지막 문서는 사용자와의 관계를 지속적으로 유지하는 방법을 제공합닏. Push API와 Notifications API 모두 이 목표 달성을 돕습니다. Push API는 새로운 내용이 있을 때 이를 전달해주며, Notifications API는 사용자에게 그 상세내용을 보여주는데 사용합니다.

지금까지는, PWA 핵심 개념을 설명하기 위해 백엔드가 없는 GitHub 페이지로부터 제공된 js13kPWA를 사용했지만, Push API는 서버 사이드 동작이 필요합니다. 따라서 Service Workers Cookbook에서 Push Payload 데모 예제를 가져와 구독, VAPID 키 획득, 컨텐츠 게시 및 수신에 대한 상세 내용에 대해 설명합니다.

결론

이러한 발췌문이 여러분의 관심을 깨웠기를 바랍니다. 지금 바로 컨텐츠를 확인해 여러분의 앱에 PWA 기능을 구현하는 방법에 대해 배워보시기 바랍니다. PWA의 이점은 여러분의 앱을 더욱 매력적으로 만들기 위한 노력보다 훨씬 더 큽니다.

앞으로 몇 년 후에 PWA가 인터렉티브한 웹사이트를 구축하는데 사용되는 주요 기술이되므로 PWA라는 용어를 잊게 될 수도 있습니다. 이를 효과적으로 활용할 수 있는 방법에 대해 지금 배워보세요. 반응형 웹 디자인 접근법이 이제 모바일 최적화 웹사이트 구축을 위한 표준이 된 것 처럼, PWA 기술들은 미래의 표준이 되기위한 과정에 있습니다.