Hello ReactWorld - 9 PWA

본 포스팅은 코딩애플님의 리팩트 강의를 수강한 후 참고하여 작성하였습니다.

PWA(Progressive Web App)

웹사이트를 앱처럼 사용할 수 있게 만드는 일종의 기술
PWA를 이용하면 앱스토어에 들어가서 앱을 설치하는 과정없이
간단한 팝업을 통해서 앱 설치를 유도할 수 있음
미국 쇼핑몰에서는 PWA를 적극 이용중

따라해보기

로컬경로에
manifest.json service-worker.js 라는 파일이 있으면 브라우저가 PWA로 인식

STEP1. 프로젝트 생성

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

manifest.json

{
  "short_name": "MRA", // 앱 이름
  "name": "My React App", //앱이름
  //앱 아이콘 - 환경마다 요구하는 크기가 달라서 여러개가 존재
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".", // . -> index.html
  "display": "standalone",  //  브라우저 상단바 제거하는 설정
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

service-worker.js
인터넷 연결이 안되어있는 상황에서도 카카오톡을 열 수는 있는 것처럼
오프라인에서도 접속시 사이트는 열 수 있게 해주는 파일

STEP2. index.js 파일 변경

serviceWorkerRegistration.unregister();

이렇게 설정된 부분을

serviceWorkerRegistration.register();

로 변경

STEP3. 빌드

npm run build

배포후 해당 사이트로 들어가면 애플리케이션이 다운로드 된다고 한다...()