- 리엑트 앱 시작할 때 PWA 전용 앱 환경을 생성해야함
기존 앱을 PWA로 바꾸려면 src폴더 전체를 복붙하고
index.js 파일은 바뀌는게 좀 있어서 잘 고려해야함.
또 라이브러리들을 설치했던거 똑같이 설치(ex, router, redux..).
- PWA 환경 설정 앱 생성
npx create-react-app 프로젝트명 --template cra-template-pwa
- PWA의 조건
-
manifest.json
-
service-worker.js
=> 오프라인에서도 사이트열 수 있게 도와줌. -
index.js 설정
serviceWorkerRegistration.unregister();을
serviceWorkerRegistration.register();- build
yarn build / npm run build
build 폴더 안에
manifest.json / service-worker.js 자동생성
manify 된다고 표현하는데 serivce-worker.js 파일 안에는
변수도 하나로 공백도 없이 파일들이 압축이 된 상태로 저장이 됨.
*asset-manifest.json
캐싱할(오프라인으로 저장할) 파일들을 전부 표시해줌
일단, PWA 발행 끝.
1) manifest.json
앱으로 될 때, 다양한 설정들
short_name : 앱 이름
icons : 앱이 됐을 때, 이미지들
-
다양한 os 위의 필요한 이미지 크기가 다르기에 여러개
start_url : 처음 시작하는 url -
"." default가 "./index.html" 임
display : 상단 바 제거 -
제거해야 앱처럼 보임
이 외에도 수백가지 설정 있음
{
"version" : "여러분앱의 버전.. 예를 들면 1.12 이런거",
"short_name" : "설치후 앱런처나 바탕화면에 표시할 짧은 12자 이름",
"name" : "기본이름",
"icons" : { 여러가지 사이즈별 아이콘 이미지 경로 },
"start_url" : "앱아이콘 눌렀을 시 보여줄 메인페이지 경로",
"display" : "standalone 아니면 fullscreen",
"background_color" : "앱 처음 실행시 잠깐 뜨는 splashscreen의 배경색",
"theme_color" : "상단 탭색상 등 원하는 테마색상",
}2) service-worker
이 파일이 웹앱을 설치했을 때, 어떤 CSS, JS, HTML, 이미지 파일이 하드에 설치될지 결정.
그럼 이제 다음에 앱을 켤 때마다 Cache Storage에 저장되어 있는 CSS, JS, HTML 파일을 사용하게 됨.(앱처럼 오프라인에서도 사용가능)
근데 설정은 모든 HTML, CSS, JS 파일을 Cache Storage에 저장하도록 기본 셋팅 되어 있음. service-worker를 편집해서 저장 원치 않은 파일들을 걸러낼수 있는 custom 가능.
(공식 튜토리얼) https://developers.google.com/web/fundamentals/primers/service-workers
(샘플) https://googlechrome.github.io/samples/service-worker/basic/
*추가로 오프라인(하드)에 js, css, html 파일이 저장되어 있다고 하면 업데이트를 어떻게 하느냐 언제 하느냐 문제가 될 소지가 있는데 build할 때마다 js,css,html 파일의 이름과 경로가 무작위로 바뀌는데 파일명이 바뀔시 하드에 있는게 아니라 서버에 요청해서 파일들을 새로 받음.
- PWA 잘 개발 됐는지 확인
1) 호스팅해서 올리거나(Github pages, Nelify 등..)
2) live server
- build 폴더를 에디터로 오픈하고 거기 있는 index.html 우 클릭해서 live server 띄우기
열어서 크롬 개발자도구 키면 Application 탭에 PWA와 관련된 모든걸 살펴볼 수 있음.
Manifest 메뉴에서 manifest.json 내요들 확인 가능.
Service Worker 메뉴에서 service-worker 파일이 잘 있는지, 오프라인에서 잘 작동하는지 테스트 가능하고 푸시알림 기능도 샘플로 전송 가능.
Cache Storage 메뉴에선 service-worker 덕분에 하드에 설치된 CSS, JS, HTML 파일들을 확인할 수 있음.
캐시된 파일 제거도 가능.
*PWA 커스터마이징하기
하드에 저장을 원치 않은 파일을 지정할 수 있음.
주로 그나마 html이 자주 바뀌기에 적용하기도 함 (근데 이러면 오프라인 때 하얀 화면이 나올 수 있어서 모바일 앱의 장점을 버리는셈)
어쨋든 나중에 필요하고 또 PWA를 이해하는데 도움이 됨.
node_modules/react-scripts/config/webpack.config.js 에서
new WorkboxWebpackPlugin.InjectManifest({
swSrc,
dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
exclude: [/\.map$/, /asset-manifest\.json$/, /LICENSE/], 코드를 찾아서 exclude를 편집
이게 지금 정규표현식으로 제외하는걸 잡아놓은거.
html 제외하는 예시
new WorkboxWebpackPlugin.GenerateSW({
clientsClaim: true,
exclude: [/\.map$/, /asset-manifest\.json$/, /index\.html/],
}) 이거 말고도 "모든 .css로 끝나는 파일" "a라는 글자로 시작하는 파일"
이런식으로도 가능.
-
PWA는 구글 앱스토어에 올릴 수 있는 apk 파일로 변환할 수 있는데 PWAbuilder 등을 이용하면 됨.
-
앱을 설치하는데 url 옆에 눌러서 다운을 받아야함. html에서 강제로 해당 안내가 나올 수 있게도 가능.
