구글 I/O Extended 첫 번째 세션- Progressive Web Apps
Alex Russell의 팀이 만든 용어이다.
Progressive Enhancemnet
웹 플랫폼이 발전함에 따라 최대한의 성능으로 컨텐츠를 제공하자는 취지이다.
플랫폼을 이용해 점진적인 발전을 만들어 간다는 목표를 담고 있다..
사용자에게 푸시알림으로 다시 열 수 있는 기능이 필요함.
다른 네이티브 앱과 다른 점이 없이 동작하도록 하겠다는 것이 Progressive Web App의 목표다.
왜 Progressive Web app이 필요한가 ?
그 이유는 모바일 때문이다. 즉, 사용자의 증감 가능성이 여진히 존재하다. 왜냐하면, 인도의 60%는 여전히 인터넷 수용이 적다. 즉, 데스크탑보다 모바일을 먼저 사용하게 된다. 즉, 이러한 점에서 향후 데스크탑 보다 모바일의 영향력이 더 중요하다. 웹 보다 모바일 웹의 접근이 두배 이상이다. 그래서 대두 된 것이다.
플랫폼을 그대로 사용하자.
웹 브라우저를 그냥 사용하자, 단, 튜닝을 이제 하지 말고, 단순하게 적은 OverHead와 최소의 Payload, 최소 시간으로 상호작용을 하도록 하자. —— 이게 목표점.
모바일 환경에서 네트워크의 환경이 부적합하다. 그래서 구글에서는 웹 컴포넌트를 쓰도록 가이드를 제시하고 있다. 이미 W3C의 표준이다. 즉, 웹 브라우저에서 제공한다는 뜻이다. 또한, 웹 컴포넌트를 AngularJS2에서 바로 사용할 수있다. 또한, HTTS를 반드시 사용해야 한다.
Gzip보다 강력한 Brotli 알고리즘을 사용할 수 있다.
github/fetch — 관심 가져야 할 오픈 소스
첫 페이지는 빠르게 로딩 되어야 한다. App shell architecture를 이용하여 빠른 로딩을 한다. 그럼으로 인해 네이티브 앱과 유사한 UI를 만들 수 있다.
devTools를 통해 강력한 개발자 도구를 지원한다. 빠른 인터랙션 디버깅 도구를 제공한다. High/Low Condition 상황도 가정할 수 있다. Polymer-cli를 제공한다.
Service Worker(Cache with service worker)는 라이프 사이클을 지니고 있음. — 공부하려면 무조건 해당 구조를 공부해야 할것 같다.
구글 툴 박스
깃허브 레포지토리에 있음
sw - precache를 사용하여 빌드 타임에 캐싱 할 수 있음
pregressive web app으로 만들어진 앱을 검사 할 수 있는 툴이 제공됨. 구글 크롬 플러그인으로 자동으로 테스트를 진행함. 자동으로 레포팅을 제공해주므로 개발시 편리한 테스팅 툴이다. offline first를 이용해 어플케이션의 성능이 항상 되도록 Offline first 전략을 사용해야 한다. 열악한 상황에서도 동작하도록 지원해야 함(인도 같은 경우에 네트워크 인프라 환경이 사용하기에 부적합하기도 하고, 굉장히 열악하다. )
- 캐시를 이용해 온라인 환경에서도 훨씬 빠른 웹 어플리케이션을 지원하고 , 라이 파이 환경에서도 더 빠른 환경을 제공한다.
- 결국 Installable app으로 제공하고, manifest.json을 작성하여 설정 할 수 있다 .
Indexed DB를 사용한다.
idb(npm)를 사용하는 것이 개발하는 게 더 빠르다. 현재 기존으로 그냥 사용할 경우 에러 핸들링이 아직 어려움 이미 구현된 라이브러리로 사용
Sync 기능을 통해 오프라인에서 보낸 메시지가 자동으로 온라인 연결시 해당 처리를 진행함.
Web push를 사용해 기능을 향상 시킬 수 있음.
GCM -> FCM으로 이름이 변경 되서 Push Server를 생성 하여 사용.
기능이 서비스 워커에서 실행 되므로 서비스 워커와 서버 간 설정 작업을 해야 함.
Google I/O 2016 Codelabs에서 참고하여 실제로 해볼 수 있다고 한다.
