구글 I/O Extended - Progressive Web Apps
What Progressive Web App? -문현경님-
같이 간 Seungdols님이 정리한 내용을 토대로 작성합니다.
웹 플랫폼이 발전함에 따라 최대한의 성능으로 컨텐츠를 제공하자
플랫폼을 이용해 점진적인 발전을 만들어 간다는 취지..
사용자에게 푸시알림으로 다시 열 수 있는 기능이 필요함.
다른 네이티브 앱과 다른 점이 없이 동작하도록 하겠다는 것이
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를 사용한다.
- Sync 기능을 통해 오프라인에서 보낸 메시지가 자동으로 온라인 연결시 해당 처리를 진행함.
- Web push를 사용해 기능을 향상 시킬 수 있음.
- GCM -> FCM으로 이름이 변경 되서 Push Server를 생성 하여 사용.
idb를 사용하는 것이 개발하는 게 더 빠르다. 현재 기존으로 그냥
사용할 경우 에러 핸들링이 아직 어려움 이미 구현된 라이브러리로 사용
기능이 서비스 워커에서 실행 되므로 서비스 워커와 서버 간 설정 작업을 해야 함.
Google I/O 2016 Codelabs에서 참고하여 실제로 실습 가능하다.
좀 더 잘 정리된 글은 Seungdols에 가면 보실 수 있습니다.
