on
React PWA 만들기(2)
PWA 장점
프로그레시브 웹 앱(Progressive Web App, PWA)은 웹과 네이티브 앱의 기능을 결합한 형태의 애플리케이션이다.
PWA는 온라인에서 쉽게 접근 가능하며, 브라우저를 통해 실행이 가능하고, 다운로드도 가능하다. 즉, 앱 스토어에서 다운로드 및 설치를 필요로 하지 않으므로, 개발자는 플랫폼의 종속성에서 벗어날 수 있다. 그리고 Native App을 별도로 개발할 필요가 없는 장점이 있다.
이렇게 장점만 보면 모든 기업들이 앞다투어 도입을 할 것 같지만, 어떤 이유 인지 도입이 그렇게 빠르게 되고 있다는 생각이 들지는 않는다. 아무래도 각 플랫폼의 이해타산이 맞물려 있기 때문이 아닐까 싶다.
구글과 애플의 입장에선 인앱 결제를 통한 수수료 수익이 줄어들 가능성이 있기 때문이지 않을까 싶다.
구글의 경우에는 그래도 크롬에서 지원하는 등의 노력이 보이는데, 애플은 아직 소극적인 느낌이다.
PWA의 기술적 정의
What is a Progressive Web App?
제레미 키스(Jeremy Keith)는 PWA의 기술적 특징을 이렇게 설명한다
- HTTPS
- Service-Worker
- Web App Manifest
이전 블로그 포스팅에서 나도 간단히 React 프로젝트에 PWA를 적용해봤는데, 저 내용을 보니 구현 과정이 조금 이해가 되는 듯 하다.
PWA-Builder에서 검사 항목들(https://www.pwabuilder.com)
HTTPS
이건 굳이 말하지 않아도 보안 때문이지 않을까 하는 생각이 든다.
(그리고 https가 아닐 경우 구글이 안전하지 않음이라는 문구를 노출하기 때문에..)
Service-Worker
웹 브라우저의 네트워크 요청과 자원관리를 개발자가 중간에서 직접 제어하도록 해주는 강력한 기술이다. 서비스 워커를 이용하면 안정적이고, 빠르고, 오프라인 기능에서도 작동하는 웹페이지를 제작할 수 있다. - 프로그레시브 웹 앱 (제이슨 그릭스비)
책에서는 위와 같이 설명을 하고 있는데, 조금 단순화해서 정리하면 App이 오프라인으로 전환되더라도 계속 작동하는 PWA를 만드는 JS파일(?)이라고 생각하면 될 듯하다. 우리나라에 워낙 모바일 네트워크가 잘 구축되어 있기 때문에, 스마트폰은 항상 통신이 되어야 한다고 생각한다.
하지만 이건 우리나라가 특이한 경우고 해외의 경우 모바일 통신 상태가 불안정한 경우가 많다. 그리고 개발자들은 이를 고려해야 하는 경우도 있다.
페이스북과 트위터가 라이트(lite)버전의 용량이 작은 앱을 별도로 출시 하는 것도 이런 이유일 것이다.
즉, 서비스 워커는 PWA의 로컬 캐시 전략을 정의하는 역할을 한다고 볼 수 있다.
Web App Manifest
Manifest
React 개발을 하다보면 어디선가 많이 봤을 법한 단어이다. 그렇다 public 폴더 안에 존재하는 manifest.json 파일을 말한다.
사실 나는 manifest.json 파일이 프로젝트에 항상 있었지만 어떤 역할을 하는지 몰랐었다. 하지만 삭제를 하려고 해도 혹시 몰라서 항상 건드리지 않았던 파일이었는데, PWA에서는 중요한 역할을 하고 있었다..