프로그레시브 웹 앱 소개 - 프로그레시브 웹 앱 | MDN
프론트엔드 개발자가 PWA 알아야 하는 이유 | 요즘IT
진행중인 프로젝트에서 모바일 서비스를 제공해야하는데, 웹개발 경험밖에 없는 상황!
당장 프로젝트를 진행해야하지만 리액트 네이티브를 배운적이 없어 막막했는데 ..
마침 PWA를 알게되었고 또 마침 최근 ios 업데이트 소식도 들려와서 본격적으로 PWA에 대해 알아보고자 한다!
PWA란?
Progressive Web Apps
- 모바일 기기에서 네이티브 앱과 같은 사용자 경험을 제공
- 엡 다운로드나 업데이트 없이 웹 브라우저 통해 앱을 바로 사용 가능
- 웹페이지와 달리 오프라인에서도 사용 가능
- 푸시알림, 카메라, 마이크 처럼 모바일 기기 자체의 기능도 사용할 수 있음
PWA 적용 사례
트위터, 핀터레스트, 스타벅스, 넷플릭스, 트리바고 등 …
→ 크롬으로 열었을 때 위와 같이 다운로드 버튼이 나타남!
twitter lite
- 사용자 대기시간 30%이상 감소, 로딩 속도 75% 이상 향상
- 네이티브 앱과 비교해도 손색 없을 정도의 ux
PWA의 장점
1. 네이티브 앱 수준의 모바일 친화적 웹 개발 가능
- 고전적인 웹개발에 비해 앱과 같은 사용자경험 제공 가능
2. 네이티브 앱을 공부하지 않아도 동등한 수준으로 개발 가능
- 네이티브 앱 개발을 학습하는 것보다 훨씬 낮은 학습량
- OS 상관없이 호환이 가능함
3. 앱스토어, 플레이스토어와 같은 배급 시스템 필요 X
- 구글은 오래전부터 pwa에 대한 지원 해왔음
- Apple은 의도적으로 PWA에 대한 지원을 늦춰왔으나(앱스토어 등의 수익성 때문에?) ios 16.4 업데이트에서 웹 푸시 알림 기능을 지원하게 되었음! (구글에선 2015부터 지원한 것..)
- node.js 의
web-push패키지 사용하면 공개키, 개인키 생성하여 푸쉬알림을 보낼 수 있음
💞더알아보기
PWA 관련 iOS 업데이트 정리 by 노마드코더
▶ 드디어! 👀 모두가 기다리던 그 업데이트가 출시되었다...!
