[React]PWA 세팅하는 방법
PWA란?
PWA(progressive web app)의 줄임말로 웹사이트를 모바일 앱처럼 설치해서 사용할 수 있는 기술이다.
- 설치 마케팅 비용이 적다.
- 아날로그 유저들을 배려한다.
- html, css, js만으로 앱까지 만들 수 있다.
- 앱에서 제공하는 푸시알림, 센서 등을 웹에서 사용할 수 있다.
PWA 세팅하기
터미널창을 열어 PWA가 셋팅된 리액트 프로젝트를 생성한다.
npx create-react-app 프로젝트명 –template cra-template-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.프로젝트를 빌드한다.
yarn build
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 파일을 추가한 코드이다. 정규식 문법을 사용하여 . 은 \. 으로 표현한다.
