[PWA] Progressive Web App

이도원·2022년 12월 22일
0

기타 정리

목록 보기
2/2

정의

새롭게 떠오르는 웹 브라우저 API를 전통적인 점진적 향상 기법과 함께 사용해서 네이티브 앱에 필적하는 사용자 경험을 제공하는 크로스 플랫폼 웹 애플리케이션

WEB APP + (HTTPS + manifest.json + serviceWorker.js)

크로스 브라우징 지원

웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업
CanIUse - 브라우저 호환성 표(https://caniuse.com)
BrowerStack - 기기별, 브라우저별 크로스 브라우징 우너격 시뮬레이팅하는 테스트 도구

manifest

web app manifest는 브라우저에게 데스크톱이나 모바일 기기에 설치할 때 어떻게 작동해야 하는지 알려주는 JSON 형식의 파일

서비스 워커

  • 웹 응용 프로그램, 브라우저, 그리고 (사용 가능한 경우) 네트워크 사이의 프록시 서버 역할
  • 출처와 경로에 대해 등록하는 이벤트 기반 워커로서 JavaScript 파일의 형태

생명주기 - Installing -> installed/waiting -> Activating -> Activated -> Redundant

캐시

  • 코드기반 접근 방식으로 개발자가 캐시내용 완벽 제어 가능
  • 서비스 워커를 통해 제어할 수 있어 오프라인에서도 해당 캐시 사용 가능
  • 웹페이지 구성을 위한 기본적이고 정적인 구성 요소인 App shell 캐싱

리소스 캐싱하기 -> 캐시에 응답하기 -> 불필요한 캐시 삭제하기

PWA 감사(audit)

Lighthouse, PWABuilder

사례

Twitter Lite - 플레이스토어 앱 설치 (빠른 속도, 데이터/저장공간 효율 up, 푸시알림, 오프라인 실행 지원)

공식 참조

https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps

profile
studying

0개의 댓글