Progressive Web app 1

Progressive Web App에 대해 공부합니다. 장기효님의 PWA 시작하기

1. PWA의 기본이론

1. PWA란?

• 모바일 앱과 같은 경험을 주는 웹 앱
• 앱 아이콘, 앱 아이콘 설치 배너, 모바일 푸시, 오프라인

2. 등장 배경

• 모바일 시장의 성장

• 모바일 웹보다는 모바일 애플리케이션을 선호

  • 웹은 URL입력후 이동해야 하지만 애플리케이션은 누르기만 하면 됨

• Ionic, React Native 의 발달

  • 최종적으로는 Native에 대한 이해가 필요함
• Offline web의 필요성

3. 특징들

• Responsive : 반응형 웹 디자인

  • PC, 테블릿, 모바일모두에 적용되는 디자인 패턴

• App-like

  • 앱과 같은 경험 (Not Web)
  • 아이콘을 통한 접속

• Discoverable

  • 특정 사이트를 들어갈 때 설치배너가 뜸 -> 스토어 방문 필요 X

• Engageable

  • Push 기능을 사용할 수 있음 (자바스크립트로 가능!)

• Connectivity

  • 온라인과 오프라인 상태가 동일한 사이트이용 가능

• Safe

  • 제약사항이자 기본적인 기술
  • Https에서만 사용할 수 있음.

4. 어디에 적용?

• Instagram, Twitter, Starbucks등 많은 사이트에서 적용됨
• 초기 사파리가 지원이 안된 상태였지만, 현재는 모던브라우저 전체가 지원됨

PWA 관련 발표 동영상 link

• Google I.O 2018
• Instagram PWA

PWA를 이용한다면, 웹 개발자도 앱 개발자와 비슷한 서비스를 운영할 수 있다는 점에서 매우 흥미로웠다. 2017년에 발표된 이후 많은 회사들이 적용하고 있는데, 그리 어려워 보이지 않는다.