프로그레시브 웹 앱(PWA, Progressive Web App)

정의

똑같이 모바일 기기에서 네이티브 경험을 제공한다는 점에서는 웹 앱과 동일함

그러나 오프라인(캐싱) 접속, 푸시 알람 등 기존의 웹 앱이 할 수 없었던 네이티브 기능까지 수행할 수 있는 웹 앱

 

웹 앱과의 차이점

1. 웹 앱 매니페스트(Web App Manifest), 홈 화면 추가

앱 스토어를 거치지 않고 홈 화면에 설치할 수 있는 웹사이트

기존의 웹 앱은 브라우저를 켜서 접속해야 했음

 

2. Service Worker를 통한 캐싱 가능

-> 이를 통해 오프라인에서도 동작 가능

 

3. 푸시 알림 + 카메라, 마이크 등 모바일 기기 자체 기능도 사용 가능

 

장점

1. 네이티브 수준의 개발 가능

 - 물론 모든 기능은 구현할 수 없지만 유사한 경험까진 가능

 - 네이티브 언어를 알지 못해도 네이티브의 기능을 구현하는 앱을 개발할 수 있음

2. 호환성

 - 한 번의 개발로 android, ios 상관 없이 가능

3. 업데이트

 - 네이티브의 경우 업데이트하면 전체 앱을 다 다시 다운로드 해야 함

    vs. PWA는 변경된 컨텐츠만 업데이트하면 됨

 

단점

1. PWA가 제공해도 os가 제공하지 않으면 사용 못함, os에 의존적임

2. PWA보다 네이티브가 성능이 더 좋음 ex. 게임

 

 

구글 PWA로 학습하기 : https://web.dev/learn/pwa

Learn PWA  |  web.dev

 

참고

https://lillo.co.kr/blog/16480

https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames#%EC%95%B1%EC%9D%84_pwa%EB%A1%9C_%EB%A7%8C%EB%93%9C%EB%8A%94_%EA%B2%83%EC%9D%80_%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94

https://yozm.wishket.com/magazine/detail/1969/