PWA란?

 

[무료] PWA를 통한 1만 시간의 법칙 앱 제작! - 인프런 | 강의

웹 앱 (Web App)

• HTML, CSS, Javascript 등을 사용해 만들어진 애플리케이션
• 장점
  • 누구든, 어디서나, 어떤 장치를 통해서든 쉽게 접근 가능
  • 별도의 설치가 필요 X
• 단점
  • 오프라인에서는 사용이 어려움
  • 카메라와 같은 하드웨어에는 접근이 불가
  • 플랫폼 내의 API 사용 불가

네이티브 앱 (Navtive App)

• 모바일 기기에 최적화된 언어로 개발된 앱
• 안드로이드/ios와 같은 특정 플랫폼을 위해 만들어진 앱
  • 안드로이드 : Java 또는 Kotlin 사용
  • ios : Swift 또는 Object C 사용
• 장점
  • 특정 플랫폼에 최적화되어 있어서 안정적이고 실행 속도가 빠름
  • 플랫폼에서 제공하는 다양한 API 사용 가능
    • 오프라인 사용 가능
  • 하드웨어와 상호작용 가능
  • 푸시 알람 수신 가능
• 단점
  • 플랫폼에 한정적
  • 각 플랫폼에 맞는 앱 제작 필요 -> 많은 시간과 비용 투자 필요

PWA (Progressive Web Application)

• 웹 앱과 네이티브 앱의 장점을 결합한 웹 기술
  : 웹 앱의 높은 접근성 + 네이티브 웹의 기능적인 측면의 장점
• 모바일 웹에서 네이티브 앱과 유사한 사용자 경험을 제공하는 웹 어플리케이션대표 기능
  • PUSH 알림
  • 오프라인 환경
  • 홈 화면에 설치 가능
• 필수 요건
  • HTTPS
    : PWA는 보안이 연결된, 즉 신뢰할 수 있는 사이트에서만 동작.
      HTTPS는 월드 와이드 웹 통신 프로토콜로, 보안이 강화된 HTTP. HTTP에 Secure Socket이 추가되어 데이터를 주고 받는 과정에서 내용이 암호화되어 안전하게 통신할 수 있도록 함
  • Service Worker
    : 백그라운드에서 실행되는 Javascript 파일 형태의 스크립트. 오프라인 환경에서도 웹이 동작할 수 있도록 네트워크 요청을 가로채서 네트워크 불량 상태 등 접속성이 안 좋은 상황을 커버.
    그런데 이때, 네트워크 요청을 중간에 가로챌 수 있으므로 중간자 공격에 취약. 따라서 보안이 강화된 HTTPS에서만 작동.
  • Manifest
    : PWA에 대해 브라우저에 알려주고 사용자의 데스크탑이나 모바일 디바이스에 설치할 때 어떻게 작동(행동)해야하는지 알려주는 JSON 파일.
    웹 페이지의 URL과 앱의 이름, 화면 표시 방식 등 기능과 표시 방법에 대한 정보들이 포함됨. 다른건 몰라도 이 파일은 꼭 필요.
• 좋은 PWA를 만들기 위한 Checklist
  • Start fast, stays fast
    : 앱은 빠르게 로드되고, 빠르게 유지되어야 함.
  • Works in any browser
    : PWA는 모든 브라우저에서 작동해야 함.
  • Responsive to any screen size
    : 모든 화면 크기에 대응해야 함. 화면 크기에 상관없이 콘텐츠가 표시되고 모든 기능 사용 가능해야 함.
  • Provides a custom offline page
    : 오프라인 환경에서는 브라우저의 기본 오프라인 페이지가 아닌 맞춤형 오프라인 페이지를 제공.
  • Is installable
    : 설치가 가능해야 함.

 

리액트에서의 PWA

• 이미 생성된 리액트 프로젝트에 적용할 수는 없고 새로 PWA가 세팅된 프로젝트를 생성하여 코드를 복사하여 붙여넣고 사용하면 된다.
• 터미널창에 다음의 명령어를 입력하면 PWA에 필요한 manifest.json 파일과 service-worker.js 파일이 포함된 리액트 프로젝트 생성 가능.

npx create-react-app 프로젝트명 --template cra-template-pwa

• manifest.json
  : 설치할 때 아이콘은 무엇을 사용하고 아이콘을 눌렀을 때 접속할 페이지는 무엇인지, 배경색은 무엇으로 할 것인지 등등...요약하자면 앱에 대한 설정 파일
  • short_name : 앱 이름(아이콘 아래에 표시될 이름)
  • name : 앱의 풀 네임
  • icons : 앱 아이콘 설정. 플랫폼마다 요구하는 아이콘의 크기가 다르므로 다양한 크기의 아이콘 이미지 필요
  • start_url : 앱 클릭시 처음 뜨는 페이지 설정
  • display : 화면 형태(browser, standalone, fullscreen, minimul-ui)
  • orientation : 화면 방향(가로 모드, 세로 모드)
  • theme_color : 테마 색상 설정
  • background_color : 배경색 설정
• service-worker.js
  : 오프라인에서도 사이트를 열 수 있게 해주는 파일.
  • 빌드 시에 service-worker.js 파일을 생성하기 위해서는 index.js 파일의 설정을 다음과 같이 변경 필요.

//serviceWorkerRegistration.unregister();
serviceWorkerRegistration.register();