[React]PWA 세팅하는 방법

[React]PWA 세팅하는 방법

PWA란?

PWA(progressive web app)의 줄임말로 웹사이트를 모바일 앱처럼 설치해서 사용할 수 있는 기술이다.

PWA 세팅하기

터미널창을 열어 PWA가 셋팅된 리액트 프로젝트를 생성한다.

기존 프로젝트에 PWA를 만들 수 없다.

PWA가 세팅된 리액트 프로젝트를 생성하면 manifest.json 파일과 service-worker.js 파일이 생성된다.

manifest.json

manifest.json은 앱 설정 파일이다.

short_name	앱 이름 아이콘 아래에 표시할 이름
name	앱의 풀 네임
icons	앱 아이콘 설정 플랫폼마다 요구하는 아이콘 크기가 다름
start_url	앱 클릭시 처음 뜨는 페이지 설정
display	앱을 실행했을 때 브라우저 상단바를 제거할지 말지 설정
theme_color	테마 색사아 설정
background_color	배경색 설정

service-worker.js

service-worker.js 파일은 오프라인에서도 사이트를 열 수 있게 도와주는 파일이다. html, css, js 파일을 미리에 하드디스크에 저장해두고 사이트 접속시 별도로 다운받지 않고 하드디스크에서 가져와 사용할 수 있다. aset-manifiest.json 파일에 캐싱 목록이 기록되어 있다.

캐싱 : 미리 하드디스크에 저장해두는 것

index.js

빌드시에 service-worker.js 파일을 생성하기 위해서 index.js 파일에 설정을 변경한다.

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

웹 페이지를 열었을 때 설치 버튼이 생성되게 만들어준다.

PWA 테스트하기

1.프로젝트를 빌드한다.

2.빌드된 파일을 vs Code로 오픈한다.

3.Live Server를 사용하여 index.html 미리보기를 띄운다.

4.앱으로 설치할 수 있는 버튼을 확인한다.

5.맥북에서 앱 설치 테스트

PWA 설정 확인

개발자 도구의 Application 탭을 열어 PWA 설정 확인이 가능하며 Caches Storage에서 캐싱된 파일을 확인할 수 있다.

특정 파일을 캐싱 안 되게 하는 방법

node_modules/react-scripts/config/webpack.config.js 파일에서 InjectManifest 부분에 캐싱 하지 않을 파일 추가한다.

new WorkboxWebpackPlugin.InjectManifest({
          swSrc,
          dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
          exclude: [/index\.html/, /\.map$/, /asset-manifest\.json$/, /LICENSE/],
          // Bump up the default maximum size (2mb) that's precached,
          // to make lazy-loading failure scenarios less likely.
          // See https://github.com/cra-template/pwa/issues/13#issuecomment-722667270
          maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
        }),

/index\.html/은 index.html 파일을 추가한 코드이다. 정규식 문법을 사용하여 . 은 \. 으로 표현한다.