Progressive Web app


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

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




© 2017. by isme2n

Powered by aiden