[React]PWA

PWA

Progressive Web App

웹이지만 어플리케이션처럼 URL창도 제거되고 구동됨.
(모바일앱인척 하는 웹)

PWA 장점

1. 설치 마케팅 비용 적음
2. 아날로그 유저들 배려
3. html css js 로 모바일 앱까지 대응 가능
4. 푸시알림, 자이로센서 적용 가능.

PWA 만드는 법

1. PWA가 셋팅된 리액트 프로젝트 생성하기
   npm create-react-app [프로젝트명] --template cra-template-pwa

2. 기존 프로젝트를 PWA로 만들기
   : 새 PWA 프로젝트에 기존코드를 복붙하면 됨.
   필요 라이브러리도 설치.
   

내부 구조

• manifes.json
  • manifest.json내의 icon이 여러개 있는 것은
    안드로이드, ios, 윈도우 아이콘 각각 설정하기 위함.
  • start_url : 시작 페이지 설정.

• service-worker.js
  • index.js 파일에서
    serviceWorkerRegistration.unregister();
    위 코드를 아래와 같이 바꾸면
    serviceWorkerRegistration.register();
    service-worker.js 파일 생성됨.
    
    기존에 있는 service-worker.js는 설정파일이라고 보면 되고
    npm run build하면 build-static폴더 내에 해당 파일이 생성됨을 볼 수 있음.
    
    service-worker.js 파일은 오프라인에서도 사이트를 열 수 있도록 도와준다.
    
    예를 들어 카카오톡 같은 경우 오프라인에서도 렌더링 되는 이유는 모든 파일을 다 받아놨기 때문임. 그래서 인터넷 없어도 구동 됨

PWA 구동 확인하기

build 된 것을 vscode로 오픈
-> index.html 미리보기
-> 설치버튼 보임.(설치버튼 강제로 띄우는 것은 검색하면 나옴)
개발자 도구의 Application 탭에서 Manifest와 service-worker 구동 확인도 가능.

특정 파일들 캐싱 안되게 만들기

node_modules -> react-scripts -> webpack.config.js

injectManifest 검색

exclude 부분에 캐싱 원하지 않는 파일 추가하면 됨.
(정규식 문법)