오늘 본 비디오는 Great libraries and tools for great Progressive Web Apps 입니다. 솔직히 제목에 혹~! 했습니다만 막상 비디오를 다 보고 나니 동영상에 나온 것들을 적용하려면 고민을 많이 해야 할 것 같더군요. 동영상의 내용은 대략 다음과 같습니다.
Progressive Web Apps 은 웹에서의 최신 유행어다.
- PWA는 최신 기술을 많이 사용하고
- PWA를 만들면 사용자에게 유용하고, 사용성이 높고, 즐거운 경험을 줄 수 있다.
PWA를 만드려면 만드는 방법의 변화가 필요하다.
- 예전 웹
- 예전에는 고수준의 기능으로 웹페이지를 만들었다.
- 이미지를 보여주고 싶으면 이미지 태그를 사용하고, 테이블을 보여주고 싶으면 테이블 태그를 사용했다.
- 확장할 수 있는 웹
- 웹 표준의 새로운 아이디어는 extensible web이다.
- 특정한 기능을 하는 간단한 API 대신 새로운 기능은 저수준이고 강력하며 더 다양한 것을 가능하게 한다.
- 이미지를 보여주는 태그 대신 임의의 그래프를 그릴 수 있는 태그를 제공한다.
- 테이블 태그 보다는 원하는 것을 그리를 수 있는 CSS 속성을 제공한다.
- 페이지를 앱으로 바꿀 수 있다.
- 그런데 실제 만들어야 할 것과 플랫폼 사이에 간극이 생기게 되고
- 이 간격은 라이브러리로 채운다.
- 커뮤니티는 개발자가 원하는 특정한 기능을 수행할 수 있는 간단하고 사용하기 좋은 라이브러리를 제공할 책임이 있다.
Service Worker libraries
- PWA에서 가장 중요한 기술은 Service Worker다.
- 오프라인, 푸시 메시지, 백그라운드 데이터 싱크 같은 기능을 제공
- sw-toolbox (https://github.com/GoogleChrome/sw-toolbox)
- 연결 상태와 관련된 패턴을 추출하여 쉽게 사용할 수 있도록 만듬
- sw-precache (https://github.com/GoogleChrome/sw-precache)
- 캐시 관리를 쉽게 하도록 도와줌
- cli로도 사용 가능
- sw-appcache-behavior (https://github.com/GoogleChrome/sw-helpers/tree/master/projects/sw-appcache-behavior)
- 기존에 만들어진 appCache 사이트를 Service Worker로 바꾸도록 도와줌
- sw-helpers (https://github.com/GoogleChrome/sw-helpers)
- sw-appcache-behavior는 sw-helpers의 일부임
- 현재 작업 중인 것에는 offline analytics 가 있음
- 오프라인일 때 ga 요청을 저장하고 있다가 온라인이 되면 서버로 전송
Chrome DevTools
- 최신 버전 (Canaray 52)에서 사용 가능
- resources 패널이 application 패널로 변경
- manifest panel
- manifest 의 정보를 확인 가능
- add to homescreen 가 있어서 homescreen에 추가되지는 않지만 onbeforeinstallprompt 이벤트를 트리거함
- service worker panel
- offline, update on reload, bypass for network(service worker 미동작) 등의 상태를 테스트할 수 있다.
- clear storage panel
- 현재 사이트의 값만 제거할 수 있다.
- cache storage viewer
- 추가된지는 좀 됐지만 사람들은 잘 모른다.
- 캐시된 항목의 목록
Lighthouse (https://github.com/GoogleChrome/lighthouse)
- 크롬 익스텐션이나 npm 모듈로 제공
- remote debugging API 사용
- 몇 번 페이지 로드한 후 PWA의 관점에서 리포트를 제공해줌
- cli: $ lighthouse your.address
- 콘솔에 찍거나, json, html로 리포트 제공
- node module로도 사용 가능
- ci 과정에서 활용 가능
- 알파 버전 상태, 규칙은 아직 확정되지 않은 상태, 카나리 52+에서만 동작,
- 아직 초기 단계료 여러분의 도움이 필요함
잘못된 부분이 있을 수 있으니, 꼭 원본 동영상을 참고하시기 바랍니다.