프로그레시브 웹앱(Progressive Web Apps)이란?

프로그레시브 웹앱(Progressive Web Apps)은 Google I/O 2016에서 소개된 미래의 웹기술이며, PWA라고 줄여서 부르기도 합니다.

구글 에서 소개하는 PWA

PWA는 최고의 웹과 최고의 앱을 결합한 경험이다. 브라우저를 통해 처음 방문한 사용자에게 유용하며, 설치가 필요하지 않다.
사용자가 PWA와 관계를 점진적으로 형성할수록 성능이 더욱 강력해 질 것이다.
느린 네트워크에서도 빠르게 로드되고, 관련된 푸시 알림을 전송한다.
모바일 앱처럼 전체 화면으로 로드되고, 홈 화면에 아이콘이 있다.

쉽게 말해, PWA는 네이티브 앱과 웹앱 기술의 장점을 합친 것이라고 볼 수 있습니다.

완전히 새로운 개념은 아닙니다 — 이런 아이디어는 과거에 다양한 접근 방법으로 웹 플랫폼상에서 여러번 재검토되었습니다.

하지만, PWA는 웹을 훌륭하게 만드는 이미 존재하는 어떤 기능도 제거하지 않은 상태로 이 모든 것 그리고 그 이상을 제공합니다.

네이티브 앱은 설치하는데에 드는 시간과 비용이 큽니다. 하지만 웹은 설치가 필요하지 않고, URL을 통한 접근이 아주 간단합니다.

웹은 사용자가 한 번 사용하기에는 편리하지만, 반복해서 사용할 시에는 매 번 URL을 기억하고 입력해야 하는 수고가 듭니다. 이에 반해 네이티브 앱은 한 번 설치하고 나면 독자적인 아이콘을 통해 반복적으로 접근하는 것이 수월합니다.

네이티브 앱은 플랫폼(안드로이드, iOS)에 종속되어 개발하는데에 많은 시간과 노력이 필요합니다. 하지만 웹은 플랫폼에 종속되지 않습니다.

웹은 네트워크가 연결되어 있지 않을 시에는 사용이 불가능합니다. 하지만 네이티브 앱은 오프라인 상태에서도 작동합니다.

PWA는 세개의 요건을 만족해야한다.

1. HTTPS를 운영해야 한다.
   • PWA는 운영체제의 여러 특별한 권한을 부여받기 때문에, 웹 서버와의 보안 연결은 필수다. 이와 관련하여 도움이 필요하다면 렛츠인크립트Let’s Encrypt라는 무료 SSL 서비스를 확인해 보기 바란다.
2. 웹 앱 매니페스트Web App Manifest가 있어야 한다.
   • 이름만 보고 겁낼 필요는 없다. 단지 사이트와 관련된 정보를 담는 제이슨JSON 파일일 뿐이다. 게다가 파비콘favicon 생성기를 사용한다면 기본 뼈대를 갖춘 매니페스트 파일이 이미 있을 것이다. 브라우저나 검색 스파이더가 찾을 수 있도록 웹 페이지 head 부분에 link를 사용하여 참조시키면 된다.
3. 서비스 워커를 사용해야 한다.
   • 아마도 이게 가장 복잡한 단계일 것이다. 하지만 서비스 워커 관련해서는 엄청난 수의 가이드가 있어, 원하는 작업 유형에 맞는 제작 방법을 참고할 수 있다. 그 중에서도 특히 모질라Mozilla에서 제공한 가이드는 아주 훌륭하다.

모든 PWA가 공통적으로 갖는 열 가지 특징

• https://altenull.github.io/2018/02/25/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%A0%88%EC%8B%9C%EB%B8%8C-%EC%9B%B9-%EC%95%B1-Progressive-Web-Apps-%EB%9E%80/
• https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/Introduction
• https://webactually.com/2017/09/28/%EC%9B%B9-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%8A%94-pwa%EC%9D%B4%EC%96%B4%EC%95%BC-%ED%95%9C%EB%8B%A41/