1. PWA(Progressive Web Apps)란 무엇인가
PWA는 우리 모두가 알고 있고 좋아하는 HTML, CSS, JS와 같은 웹 기술로 만드는 앱이다. 하지만 그 느낌과 기능은 실제 네이티브 앱과 견줄 수 있을 정도로 좋다. PWA는 모바일환경에서 일단 홈 화면에 저장되면 브라우저에서 실행되며, 네이티브 앱처럼 동작한다.
또한, 푸시 알림이나 오프라인 지원과 같은 네이티브 앱의 특징들도 전부 제공할 수 있다.
위 그림에서 볼 수 있는 것과 같이, PWA란 웹 앱의 발견 용이성과 네이티브 앱의 강력함을 모두 제공하는 것을 목표로 한다.
웹 앱의 발견 용이성
- 웹 사이트에 방문하는 것이 훨씬 쉽다.
- 설치해야 하는 네이티브 앱과는 달리 웹 사이트에 방문하면 바로 사용할 수 있다.
- URL 링크로 웹 앱을 공유할 수 있다.
네이티브 앱의 강력함
- 부드러운 사용자 경험을 제공
- 내가 필요로 하는 정보에 대해 푸시 알림을 받을 수 있음
- 홈 화면 아이콘을 탭하여 웹보다 더 쉽게 접근할 수 있음
pwa를 사용하는 대표적인 기업은 스타벅스(Starbucks.com), 핀터레스트(Pinterest.com), 워싱턴포스트(Washingtonpost.com), 우버(Uber.com) 등이 있다.
2. PWA의 특징
웹 앱과 네이티브 앱이 가지는 장점만을 취하기 위해서 PWA는 새로운 기술 (Service Worker) 을 같이 사용합니다.
Service Worker란?
Service Worker (앞으로 SW로 통칭) 란 브라우저가 백그라운드에서 실행하는 스크립트입니다.
Service Worker의 실행 조건
1. 브라우저에서 지원해야 함
2. HTTPS에서 실행 (로컬환경에서는 상관없음)
3. manifest.json의 유무
3. PWA의 장점
- 다양한 앱스토어에 출시하기 위해서 별도의 프로세스를 거치지 않아도 된다.
- 일반적인 웹 기술을 활용해서 PWA를 만들 수 있다.
- 일반적으로 개발 비용이 더 저렴하다.
- 기존의 웹사이트를 앱으로 만들 수 있기 때문에, 추가로 유지관리해야 하는 코드베이스(codebase, 소스코드 일체)가 적다.
- PWA는 기본적으로 반응형(responsive)이기 때문에, 다양한 화면 크기에도 잘 동작한다.
- PWA는 부드럽고 빠르며 가볍다.
- 일반적인 웹사이트와는 달리, 오프라인에서도 작동한다.
- PWA는 검색엔진을 통해서 찾을 수 있다. (앱스토어보다는 검색엔진을 사용하는 사람들이 훨씬 더 많다. 그리고 원한다면 앱스토어를 통해서도 PWA를 배포할 수 있다.)
- 푸시 알림을 통해서 사용자들의 관심을 끌 수 있다.
- PWA를 설치하게 함으로써 보다 높은 참여를 이끌어낼 수 있다.
4. PWA의 단점
- 모든 플랫폼에서 PWA가 완벽하게 지원되지 않았었다.
현재는 대부분의 플랫폼에서 지원을 하지만 과거에는 그러지 않아서 업데이트를 진행하지 않은 유저의 경우에는 pwa를 사용할 수 없다.
- React에서 PWA를 적용하기에 까다롭다.
레퍼런스
댓글