- Progressive Web Apps의 줄임말로 모바일 사이트에서 Native App과 같은 사용자 경험을 제공하는 기술이다.
- WEB을 Native App처럼 만들어 주는 기술이므로 모든 Native 기능을 사용할 순 없으나 읽기 속도, 표시 속도, 오프라인에서의 실행 등의 이점이 있다.
- 웹과 앱 모두의 장점을 가져 App처럼 설치할 필요는 없으나 홈 화면에 아이콘 추가 및 푸시 알림 전송이 가능해 UX에 이점이 있다.
npx create-react-app my-app --template cra-template
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
serviceWorkerRegistration.register();
편리한 icon 설정을 위한 site
다운 받은 파일은 publi/icons 폴더에 저장하여 관리한다.
public/index.html로 가서 제공해준 meta tag를 모두 head태그 안에 붙여넣는다.
public/manifest.json에서 아래와 같이 아이콘들을 모두 추가해줘야 한다.
{
"short_name": "project name",
"name": "project name",
"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"
},
{
"src": "./icons/favicon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"theme_color": "#031230",
"background_color": "#031230"
}
}
display: standalone은 브라우저의 주소칸과 버튼을 숨겨준다.
theme_color는 PWA의 바 색상이 되고 background_color은 splash화면의 색상이다.
"dependencies": {
"workbox-background-sync": "^5.1.4",
"workbox-broadcast-update": "^5.1.4",
"workbox-cacheable-response": "^5.1.4",
"workbox-core": "^5.1.4",
"workbox-expiration": "^5.1.4",
"workbox-google-analytics": "^5.1.4",
"workbox-navigation-preload": "^5.1.4",
"workbox-precaching": "^5.1.4",
"workbox-range-requests": "^5.1.4",
"workbox-routing": "^5.1.4",
"workbox-strategies": "^5.1.4",
"workbox-streams": "^5.1.4"
}
앱을 product로 실행시키고 chrome 개발자 도구 에서 아래 옵션을 선택해준다.
installable이 가능해지면, 모바일 브라우저를 통해 다운받고 설치할 수 있다.