# 사용한 이유
필자는 React를 사용해본 경험이 있지만, 앱을 개발하고 싶었다.
네이티브 앱으로 새로 배우는 건 시간이 오래걸리기도 하고, 빠르게 배포해서 내가 사용하는 게 목적이기에, React의 pwa 기능으로 웹앱을 구축하기로 하였다.
# pwa 구축 과정
## 1. PWA React 애플리케이션 생성
컴파일 단계에서 에러를 잡는 안정성을 도입하기 위해 typescript로 개발 환경을 설정하였다.
// typescript
npx create-react-app pwa-react --template cra-template-pwa-typescript
## 2. service worker 등록
오프라인에서 앱을 구동시킬 수 있도록 설정하는게 목표이기 때문에 service worker를 등록하였다.
- index.tsx 파일에서 아래 코드를 수정한다.
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
serviceWorkerRegistration.register();
//unregister()이라고 되어있는 것을 주석처리 해주었습니다.
## 3. icon 설정하기
앱 아이콘을 설정해야 설치가 되기에, 별도의 아이콘 이미지를 넣어줘야 한다.
이때, 다양한 사이즈별로 이미지를 넣어야 하기에 아래의 웹사이트에서 도움을 받는다.
The ultimate favicon generator - Favic-o-Matic
Check this amazing tool, it creates EVERY kind of favicon you need, including iOS icons, Android icons, Metro tile icon and more! Favic-O-Matic is the FIRST favicon generator to correctly handle transparent favicon from png!
favicomatic.com
1) 아래의 화면에서 upload your image 버튼을 클릭해 사진을 넣어준다.
2) Every damn size, sir!을 선택해서 모든 사이즈를 만들 수 있도록 한다.
3) 변환 후 meta tag와 이미지 파일(zip)을 제공한다.
4) meta tag를 public/index.html 파일에 추가한다.
5) 이미지 파일(zip) 압축 해제한후, public/icons 폴더를 만들고 저장한다.
6) public/manifest.json에서 icons에 저장한 public 개수에 맞게 넣어준다.
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "./icons/apple-touch-icon-57x57.png",
"sizes": "57x57",
"type": "image/png"
},
{
"src": "./icons/apple-touch-icon-60x60.png",
"sizes": "60x60",
"type": "image/png"
},
{
"src": "./icons/apple-touch-icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "./icons/apple-touch-icon-76x76.png",
"sizes": "76x76",
"type": "image/png"
},
{
"src": "./icons/apple-touch-icon-114x114.png",
"sizes": "114x114",
"type": "image/png"
},
{
"src": "./icons/apple-touch-icon-120x120.png",
"sizes": "120x120",
"type": "image/png"
},
{
"src": "./icons/apple-touch-icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "./icons/apple-touch-icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
# 앱 설치하기
브라우저 검색창 오른쪽에 설치 버튼을 클릭햇을때, 아래처럼 나오면 성공이다!
참고로 서버에 배포할 때는 https 로 설정을 해야 앱에서 다운로드 받을 수 있다.
Service Worker은 브라우저와 네트워크 사이에서 동작하기때문에, HTTP 환경에서 동작한다면 중간자 공격을 당할 수 있다.
그래서 브라우저 보안 정책으로 HTTPS를 통해 통신을 암호화 해야 한다.
# 참고
