2018 Google I/O PWA 세션 다시 보기

프로그레시브 웹 앱이란?

  • 모바일 앱과 같은 경험을 주는 최신 웹 앱
  • 앱 아이콘, 앱 아이콘 설치 배너, 모바일 푸시, 오프라인 경험을 제공
  • HTML, CSS, JS로 모바일 앱과 같은 웹 앱을 구현

“높은 사용자 경험을 제공하기 위한 웹 앱의 진화”

FIRE (1:17 ~ 5:46)

  • Fast : Load fast & Feel fast
  • Integrated : Feel natural to the device
  • Reliable : Always work in the poor connection. 2G = 60% worldwide
  • Engaging : searchable, linkable, sharable

브라우저별 PWA 기능 지원 여부 (5:48 ~ 6:45)

  • 서비스 워커는 높은 사용자 경험을 제공하기 위한 기술
  • 모든 현대 브라우저에서 지원하며 지난 3월부터 Safari도 지원

  • 브라우저별 PWA 기능 지원 여부 (6:20)

    • Add to Home Screen (Edge, Safari 베타)
    • Web / Mobile Push (Safari 베타)

스타벅스 PWA 데모 (7:11 ~ 10:36)

  • 오프라인 경험 : 결제할 금액을 미리 캐싱해놔서 매장에서 즉시 결제 가능 (9:30)
  • 적용 기술 : Add to Homescreen, Launch Image, Location, Offline
  • 효과 : 웹 사용자 12% 상승, 데스크톱에서도 주문 & 결제 가능 (11:16)

스타벅스 PWA에 적용된 FIRE (11:17 ~ 18:12)

Fast

  • 사이트 로딩이 3초가 넘게 걸리면 사용자의 절반을 잃음 (11:33)
  • Placeholder Content 사용 (11:42)

Integrated

  • Add to Home Screen (12:52)
  • Chrome creates APK for Android (13:08)
  • 앱 설치 배너가 뜨는 조건 : 미설치, 30초 간 방문 (13:47)
  • 크롬 68부터 개발자가 앱 설치 이벤트를 직접 추가 (15:43)

Reliable

  • Precaching : 필요한 컨텐츠는 미리 캐싱 (16:07)
  • Runtime Caching : 추가적인 내용을 캐싱

Engaging

  • 적절한 위치의 뒤로가기 버튼 (17:24)
  • 애니메이션과 메시지 팝업 (17:36)

PWA가 적용된 구글 제품들 (18:30 ~ 20:04)

  • Google Search : 오프라인 검색 후 온라인에서 표시 (18:40)
  • Bulletin : 네이티브 모바일 앱 느낌 (19:08)
  • Google Maps : 저사양 기기와 저속 네트워크 대상의 성능 튜닝 -> 20% 페이지 로딩 속도 향상 (19:52)

Google Maps 시연 (21:50 ~ 23:01)

  • 서비스워커 + IndexedDB로 캐싱 (22:40)

Mobile과 데스크톱 사용 통계 자료 (27:56 ~ 28:35)

  • 모바일과 데스크톱 모두 성장
  • 시간대별 기기 사용량 역시 다양

PWA 데스크톱의 필요성 (28:37 ~ 30:21)

  • 슬랙, 구글 독스, Spotify
  • 일렉트론과 같은 데스크톱 개발 프레임워크의 문제점 -> 불필요한 렌더링 스택 문제
  • 브라우저가 있는데 왜 웹 화면을 한번 더 감싸야 하는가?
  • 윈도우 사용자는 MS 앱스토어에서 PWA 데스크톱 앱을 다운 받을 수 있음

PWA 데스크톱 - Spotify 시연 (30:37 ~ 32:08)

PWA 최종 정리 (39:34 ~ 40:24)

  • 웹 앱을 모바일 앱과 데스크톱 앱으로 변환시키는 PWA

2018 Google I/O 웹 관련 비디오 목록

PWA 온라인 강좌

프로그레시브 웹 앱 제작에 관심 있으시다면 아래의 온라인 강좌를 이용해보시는 것도 좋을 것 같아요 :)

인프런 온라인 강좌 : PWA 시작하기