🥇 PWA (Progressive Web App)

🦄 개념

-> 소프트웨어 앱을 만드는 강력한 방식!

• HTML/CSS/JS와 모던 웹 브라우저 APIs와 결합하여
  크로스 플랫폼에서 동작하는 어플리케이션을 손쉽게 만든다
• 즉, 이미 만든 웹사이트가 있다면 어플리케이션도 쉽게 만들 수 있다
  
  

native apps

-> 기능이 많다
안드로이드나 아이폰처럼 특정 플랫폼에서 동작하는 네이티브 앱은 플랫폼에서 제공하는 다양한 API를 이용,
사용자에게 다양한 기능을 제공
-> 접근성 떨어짐
앱스토어에서 다운받아야 하며 그 플랫폼에서만 사용 가능

Web app

-> 접근성 좋음
브라우저만 있으면 사용 가능
-> 기능성 떨어짐
플랫폼 자체의 API사용 불가

✨ PWA

ㅇ Web app 장점(접근성) + native apps 장점(플랫폼 API사용)

🦄 탄생 배경

1. 잡스가 아이폰 처음 출시하면서 강력한 웹 app만든다고 했음!

웹코드로 어플 만들 때 장점

• SDK 별도 필요 없음
• 재배포시 복잡하지 않은 절차
• 다양한 플랫폼 출시 가능

2. 근데 애플 앱 스토어 따로 만들었다!

3. 이에 크롬 개발자 Alex Russell, 디자이너 Frances Berriman에 의해 PWA라는 단어 공식 등장

4. PWA라는 웹코드를 이용해서, 모든 플랫폼에서 동작하는 앱을 만들기 위한 조건들을 정의하기 시작

조건(1) responsive web design
조건(2) service workers 사용
조건(3) app manifest 사용
조건(4) push notification 사용
조건(5) native app-like capabilities
조건(6) 사용자의 디바이스에 설치 가능

🦄 현황

사용 예시: youtube, safari, twitter, airbnb, facebook....

Project Fugu

-> 구글, 마소, 인텔 합작 프로젝트
-> web capabilities project

🦄 한계

(1) 새롭게 추가되는 브라우저 api들은 특정/예전 브라우저에서 사용 불가
(2) 파이어폭스는 데스크탑용 브라우저에서 pwa 지원하지 않음
(3) 앱스토어는 수익 관련 문제로 pwa 거부 중
(safari 통해 설치 가능)
(4) 네이티브 앱처럼 모든 플랫폼 api사용은 안됨

🦄 유용한 툴 3

• PWA builder: 오픈소스 프로젝트, 웹사이트를 pwa로 전환할 때 검토하고 보충해줌
• workbox: 다양한 pwa 서비스 워커 자동으로 만들어주는 라이브러리
• Maskable.app: adaptive 아이콘 제작

🦄 PWA 4 조건

(1) 웹 코드로 만든 웹사이트나 웹 app
(2) 보안을 위해: https로 서비스 제공해야 함
(3) app manifest필요(json포맷의 text파일)
(4) service worker: js로 작성. 서버와 데이터를 주고받을 때 중간에서 모든 요청을 통제, 관리. 특정 네트워크 요청과 반응에 한해서, 어떤 데이터 저장했다가 오프라인 상태일 때 보여주는 성능의 어플을 만들기 위해 사용 가능.