PWA(Progressive Web Application)란?
웹 사이트를 *네이티브앱처럼 이용할 수 있도록 하는 구조 기술
*네이티브앱: AppStore / Google Play와 같은 설치하여 사용하는 앱
PWA로 구현한 웹 사이트는 앱스토어의 심사를 거치지도 않고 설치도 필요 없음
무엇보다 PUSH 기능, 오프라인 작동과 같은 네이티브 앱이 가진 특성들을 이용할 수 있음
웹에서만 사용할 수 있는 기능들만을 활용하여 보다 더 네이티브 앱과 같은 기능을 만든다는 개념으로 Google에서 가장 처음 사용
PWA는 이 반응형 웹을 베이스로 좀 더 네이티브만 앱의 기능들이 더 추가됐다고 생각하면 됨, 앞서 말한 Push, 오프라인 기능에 더불어 위치, 카메라 엑세스 등등 실제로는 웹 앱이지만 네이티브 앱 같은 느낌을 줄 수 있음
PWA의 장점?
- 사용자의 기기에 설치 가능 (홈화면에 추가)
홈스크린을 통해 앱에 접근, 브라우저 탭이 아닌 독립실행형 창에서 동작
- 빠른 페이지 로딩 속도
service work의 Cache API를 사용하여 데이터를 캐싱 시킬 수 있음
- 오프라인, 저속 환경에서도 동작
리소스 캐싱, 네트워크에 독립적
사용자가 앱을 사용하지 않을 때 메모리상 동작
-> 만약 네트워크가 연결되지 않은 상태더라도 IndexedDB를 활용하여 브라우저 내에서 클라이언트 측 데이터를 저장할 수 있는 비관계형 데이터베이스 즉, 오프라인 상태에서 데이터를 로컬에 저장하고, 네트워크가 복구 되었을 때 서버로 동기화
-> PWA는 Service Worker를 활용하여 오프라인 감지를 구현
사용자가 오프라인 상태일 때는 로컬에 저장된 데이터를 보여주고, 온라인 상태로 전환되면 서버와 동기화
- 백그라운드 동기 가능
사용자가 앱을 사용하지 않을 때 메모리상 동작
- PUSH 알림 가능
Web API인 Push API를 활용하여 서버로 부터 push event를 받고, Notification API를 활용해 브라우저에 시스템 알림을 보여줌
- 검색 가능
웹 앱 특성 그대로 검색 가능
- 공유 가능
웹 앱이므로 URL을 통하여 공유 가능
- 다양한 Web API 사용, 네이티브 앱과 같은 사용성
사용자 위치 정보, 카메라, 진동, AR, VR 등등 모두 사용 가능
- https 프로토콜을 통해 제공
보안성, 안정성이 보장
- 점진적 구축이 쉬움
기존에 만들어진 웹 앱에 service Worker와 Manifest.json 파일을 만들어 쉽게 PWA로 구축 가능
그렇다면 단점은?
공식문서에서는 당연히 안 알랴줌
- 제한된 기능
네이티브 기능 접근 제한: PWA는 네이티브 앱에 비해 일부 기능에 접근할 수 있는 제한이 존재
Bluetooth, NFC, 일부 하드웨어 기능 등은 PWA에서 지원되지 않을 수 있음
- 브라우저 호환성
PWA는 모든 브라우저에서 동일하게 동작하지 않을 수 있음
특히 구형 브라우저나 일부 모바일 브라우저에서는 PWA를 지원하지 않을 수 있음
- 성능 문제
아무래도 온전한 네이티브앱이 아니기 때문에, 성능적으로 조금 떨어질 수 있음
특히 데이터 양이 많거나 복잡한 인터페이스를 가진 애플리케이션에서는 성능 문제가 발생할 수 있음
- 오프라인 기능의 한계
오프라인에서도 동작이 가능하긴 하지만 모든 기능이 오프라인에서 지원되는 건 아님
서버와의 동기화가 필요한 작업은 온라인상태에서만 수행이 가능함
- SEO의 기능성
SPA로 구현되는 경우가 많아 SEO 최적화가 어려울 수 있음
이럴 때 SSR이나 SSG을 적절히 사용해야함
일반 웹을 PWA로 변경하는 방법
우선 모바일 뷰로 우선적으로 구현을 해야만함
반응형 할거면 반응형으로 만들었던가 해야함
만약 이미 프로제트를 완성 시킨 상태라면 아래 필수 요구사항을 충족하면 됨
1) Web App Manifest JSON 파일
minifest.json은 브라우저에게 PWA에 대한 메타 정보와 현재 웹 사이트가 유저의 데스크톱이나 모바일 장치에 어떻게 설치되어야 하는지에 대한 정보를 저장한 파일임 / 앱 이름, 아이콘, 테마 색상 정보 등을 포함
2) ServiceWorker.js
ServiceWork는 PWA의 핵심 기능인 푸시알림, 백그라운드 동기화, 오프라인 환경 지원, 리소스 캐싱의 구현체를 담을 수 있는 스크립트 파일
ServiceWorker는 JavaScript기반의 Web API의 한 종류로 브라우저의 백그라운드에서 독립된 스레드를 실행
그래서 사용자가 해당 메인 앱을 켜놓지 않더라도 백그라운드에서 실행 가능
3) 아이콘 이미지 파일
앱처럼 사용하기 위해 이미지 파일 필요
4) HTTPS
Https에서만 활용이 가능하므로 브라우저의 보안 정책인 CORS를 따르기 때문에 보안적인 이점이 있음
PWA의 설치법?
데스크톱이나 모바일에서 브라우저 (Chrome 등)를 통해 PWA가 적용되고 배포된 웹페이지에 접근
그 후 주소창에 아이콘을 통해 다운로드하면
(실제예시 - 유튜브)
- 주소창 아이콘을 통해 설치
- 설치된 앱을 오픈
PWA을 위해 제작된 프로젝트와 연동됨
물론! 해당 앱이 배포된 상태에서만 작동함
그렇다면 모바일에서는?
IOS / Android 모두 동일
-
브라우저를 통해 들어간 후
-
공유 버튼을 눌러 '홈 화면에 추가'를 누른 후
-
홈화면에 추가하면 사용 가능
