[30] PWA가 뭔가요? PWA에 대해서 아는 대로 설명해주세요.

📎 질문

PWA가 뭔가요? PWA에 대해서 아는 대로 설명해주세요.

1. PWA란? 네이티브앱처럼 사용할 수 있는 웹 어플리케이션 설치, 푸시알림, 오프라인동작 등 네이티브앱에서만 가능했던 기능들을 웹사이트에서도 이용할 수 있다.

2. PWA 장점

앱스토어 출시를 위한 프로세스가 없다 + 플레이스토어나 앱스토어에 내는 수수료도 없다.
네이티브앱 개발을 위한 언어, 프레임워크가 아닌 일반적인 웹기술로 PWA만들 수 있고, 기존 웹으로 개발된 웹사이트를 앱으로 만들 수 있기 때문에 마이그레이션, 유지관리가 쉽다.
검색엔진을 통해서도 검색이 가능하다.
원한다면 앱스토어를 통해서도 PWA 배포가 가능하다.
푸시알림으로 사용자 재접속을 유도할 수 있다.

3. PWA 단점

아직 IOS는 PWA에 필요한 기술들을 사파리에서 지원하지 않는 경우가 있음. (설치 프롬프트)
하드웨어 직접 접근이 어려움 (카메라, 지문인식, 센서 등을 활용하는데 제한있을 수 있음 + 네이티브앱에 비해 성능이 떨어질 수 있음)
게임같은 고사양 애플리케이션은 PWA로 어려움.
(개인적인 생각) : '홈화면 추가하기'라는 절차가 아직 대다수의 사용자에게는 익숙하지 않은 방식의 앱설치 방법이라고 느낌. 설치 유도가 쉽지 않음

4. PWA 적용방법 PWA 적용할때 참고했던 포스팅

next-pwa 설치 및 next.config.js에 적용
OS, 이미지 크기별 아이콘 파일 추가하기
manifest.json 파일 만들고 layout.tsx의 head에 적용해주기 { "theme_color": "#C9E5FF", "background_color": "#C9E5FF", "display": "standalone", "scope": "/", "start_url": "/", "name": "\ub9ac\uc2a4\ud2f0\uc6e8\uc774\ube0c", "short_name": "\ub9ac\uc2a4\ud2f0", "icons": [ { "src": "icons/pwa/windows11/SmallTile.scale-100.png", "sizes": "71x71" }, { "src": "icons/pwa/windows11/SmallTile.scale-125.png", "sizes": "89x89" }, <link rel="manifest" href="/manifest.json" />

추가. PWA 적용 대표 서비스 트위터, 스타벅스, 우버, 핀터레스트 등

PWA(Progressive Web App)는 웹 애플리케이션의 최신 개발 패턴으로, 네이티브 앱과 유사한 사용자 경험을 제공하는 웹 애플리케이션을 의미합니다. PWA는 HTML, CSS, JavaScript의 기술을 사용하여 개발됩니다.

서비스 워커(Service Worker)
- 브라우저와 웹 서버 사이에 위치한 스크립트로, 네트워크 요청을 가로채고 캐싱을 관리
- 오프라인 모드 지원, 푸시 알림, 백그라운드 동기화 등의 기능을 제공함
웹 앱 매니페스트(Web App Manifest)
- PWA의 메타데이터(앱 이름, 아이콘, 시작 URL, 테마 색상 등)를 포함한 JSON 파일
- 사용자가 PWA를 홈 화면에 추가할 때 네이티브 앱처럼 보이게 하는 데 사용 됨
HTTPS
- 보안된 HTTPS 프로토콜을 사용하여 PWA를 제공해야 함
- 서비스 워커의 설치와 실행을 위해 필수