[PWA] Progressive Web App 적용해보기

 

 

 

 

Progressive Web App

 

 

 

 

  PWA가 무엇인가요?

 

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

  구글은 PWA를 아래와 같이 소개합니다.

  PWA는 웹과 앱을 결합한 방식입니다. 브라우저를 통해 처음 방문한 사용자에게 설치를 필요로하지 않아 유용합니다. 사용자에게 PWA 형태의 서비스를 제공할수록 성능은 더욱 강력해질 것입니다. 느린 네트워크 혹은 네트워크가 끊어진 상태에서도 로드되며, 앱과 같이 푸시 알림을 전송합니다. 또 모바일 앱처럼 전체 화면으로 로드되며, 모바일 앱과 같이 아이콘이 있습니다.

 

  구글의 소개와 같이 브라우저에서만 제공하던 웹기술을 모바일과 결합하여 사용자들의 유입을 높히고 앱의 장점을 살린 Push Notification과 캐싱 등의 장점과 웹의 장점인 높은 접근성과 발견, 공유성을 통해 서비스 차원에서 사용자 접근과 유지보수와 빠른 대응, 좋은 사용자 경험을 모두 살릴 수 있는 기술입니다. 출시 초기에는 빠른 대응이 필요한 소규모 스타트업에서 많이 도입했지만 최근 많은 서비스에서 PWA 형태를 볼 수 있습니다.

 

  또한 PWA를 꼭 사용해야하는 이유로 최근 많은 서비스 이용자들은 모바일과 데스크탑의 경계를 허무는 형태를 보이고 있습니다. 2014년 기점으로 모바일 사용자 수가 데스크탑 사용자 수를 넘어섰지만 최근 코로나의 영향으로 다시 데스크탑 사용자 수가 늘고 있습니다. 따라서 서비스에서는 모바일 앱 뿐만아니라 웹 또한 빠른 대응과 적절한 서비스를 제공하는 것이 중요한데 이를 현실화하는데 PWA가 좋은 선택이라고 생각합니다. 

 

 

  PWA의 가치

 - Service Workers를 사용한 캐싱을 통해 앱을 한번 실행하면 그 후에는 로딩 시간을 줄일 수 있습니다. 

 - 네이티브 앱의 경우 아주 작은 부분의 수정을 다시 서비스로 출시하는데 많은 시간과 리소스가 필요합니다. 네이티브 앱의 수정에 따라 앱 업데이트가 이루어지고 사용자는 그 (약간) 수정된 앱을 다시 통째로 업데이트 받아야합니다. 하지만, PWA는 웹 기반에서 동작하기 때문에 이러한 절차가 필요없습니다.

 - 통합된 느낌을 줍니다. 모바일에서는 앱과 같이 웹에서는 웹 서비스와 같은 형태로 하나의 제품을 다중 플랫폼에 제공할 수 있습니다.

 - Push Notification을 통해 사용자의 재 참여율을 높일 수 있습니다.

 

  물론, PWA를 선택할 수 없는 케이스도 있습니다. 대표적인 예로 모바일 리소스를 많이 사용하는 경우입니다. 카메라앱이나 AR 앱과 같은 형태들은 네이티브 형태로 개발하여 서비스하는 것이 적합합니다. PWA는 그럼 최근에 나온 기술일까요? 아닙니다. PWA와 비슷한 형태의 기술은 구글이 발표하기 이전에 Firefiox OS 생태계에서  가능했다고 합니다.

 

 

  PWA의 특징

 - 발견 가능  컨텐츠를 검색엔진을 통해 찾을 수 있습니다.

 - 설치 가능  기기의 홈 화면에서 사용할 수 있습니다.

 - 연결 가능  간단하게 URL을 전송하여 공유가 가능합니다.

 - 네트워크 독립성  오프라인이나 불안정한 네트워크 연결에서 동작합니다.

 - 점진적  최신 브라우저의 모든 기능은 사용할 수 없지만 이전 브라우저의 기본은 여전히 사용할 수 있습니다.

 - 반응형  모든 기기의 화면이나 브라우저에서 사용할 수 있습니다. 모바일과 PC, 태블릿에서 하나의 제품을 제공

 - 안전  HTTPS 통신을 통해 모든 제 3자의 접근으로 부터 안전하게 보호합니다.

 

  이런 것들을 어떻게 구현할 수 있을까요?

  PWA를 위해 요구되는 핵심요소는 Service Worker입니다. PWA를 구현하는데 있어 80%를 차지한다고해도 과언이 아니죠. 고맙게도 Service Worker는 현재 데스크탑 및 모바일의 모든 주요 브라우저에서 지원됩니다.

  웹 앱 Manifest, Push Notification, 홈 아이콘 추가 기능과 같은 다른 기능들도 널리 지원되고 있습니다. 주의 할 점으로 현재 Safari에서는 웹앱 Manifest 및 홈 화면 추가 지원에 제한적이며 웹 Push Notification의 경우 지원하지 않습니다. 하지만 이 경우 PWA로 만들어진 웹앱을 네이티브 앱 위에 올려서 제공하는 방법도 있습니다. 아쉽지만 앱을 통한 서비스 제공을 필요로 한다면 고민해보고 결정할 수 있는 부분이기도 합니다. 따라서, Service Worker와 Manifest가 중요한 기술 요건입니다.

 

 

  PWA 구현하기

  필요한 것

 - 웹 사이트 혹은 웹 앱

 - https 연결  PWA의 특징 중 안전이 있습니다. PWA는 보안을 위해 https 통신을 기본으로 합니다. 따라서 로컬 혹은 https 통신이 아니면 작동할 수 없습니다.

 - 파일 업로드 권한  파일 업로드 권한이 반드시 필요합니다. root에 업로드할 권한이 있어야 합니다. 

 

 

  내 서비스가 PWA인지 확인하기

  크롬 브라우저에서는 서비스의 PWA 적합성 여부를 확인할 수 있게 도와줍니다. 개발자 도구를 켜고 상단 카테고리의 Lighthouse 탭에서 검사를 진행하면 PWA 조건 충족 여부를 알려줍니다. 이 부분을 하나씩 체크해 나가면 PWA에 가까워질 수 있겠죠? 😁

 

 

 

여기까지 PWA가 무엇이고 어떤 것이 필요하고 어떻게 만드는지 알아보았습니다. 

 

 

 

📗 Ref.

developer.mozilla.org/ko/docs/Web/Progressive_web_apps/%EC%86%8C%EA%B0%9C

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/

marshall-ku.com/web/tips/%EC%9B%B9-%EC%82%AC%EC%9D%B4%ED%8A%B8%EB%A5%BC-pwa%EB%A1%9C-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8%ED%95%98%EA%B8%B0