<div id="readability-page-1" class="page"><div><ul>
<li>리엑트 앱 시작할 때 PWA 전용 앱 환경을 생성해야함 
기존 앱을 PWA로 바꾸려면 src폴더 전체를 복붙하고 
index.js 파일은 바뀌는게 좀 있어서 잘 고려해야함. 
또 라이브러리들을 설치했던거 똑같이 설치(ex, router, redux..).</li>
</ul>
<ol>
<li>PWA 환경 설정 앱 생성 
npx create-react-app 프로젝트명 --template cra-template-pwa</li>
</ol>
<ul>
<li>PWA의 조건 </li>
</ul>
<ol>
<li>
manifest.json
</li>
<li>
service-worker.js 
=&gt; 오프라인에서도 사이트열 수 있게 도와줌.
</li>
<li>
index.js 설정
</li>
</ol>
<pre><code>serviceWorkerRegistration.unregister();</code></pre>
을 
<pre><code>serviceWorkerRegistration.register();</code></pre>
<ol start="3">
<li>build</li>
</ol>
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 : 앱이 됐을 때, 이미지들
<ul>
<li>
다양한 os 위의 필요한 이미지 크기가 다르기에 여러개 
start_url : 처음 시작하는 url
</li>
<li>
"." default가 "./index.html" 임 
display : 상단 바 제거
</li>
<li>
제거해야 앱처럼 보임
<img src="https://velog.velcdn.com/images/2taesung/post/bac50199-763d-4a74-92a2-d7e0a6ecf8bc/image.png">
</li>
</ul>
이 외에도 수백가지 설정 있음
<pre><code>{
 "version" : "여러분앱의 버전.. 예를 들면 1.12 이런거",
 "short_name" : "설치후 앱런처나 바탕화면에 표시할 짧은 12자 이름",
 "name" : "기본이름",
 "icons" : { 여러가지 사이즈별 아이콘 이미지 경로 },
 "start_url" : "앱아이콘 눌렀을 시 보여줄 메인페이지 경로",
 "display" : "standalone 아니면 fullscreen",
 "background_color" : "앱 처음 실행시 잠깐 뜨는 splashscreen의 배경색",
 "theme_color" : "상단 탭색상 등 원하는 테마색상",
}</code></pre>
2) service-worker 
이 파일이 웹앱을 설치했을 때, 어떤 CSS, JS, HTML, 이미지 파일이 하드에 설치될지 결정.
그럼 이제 다음에 앱을 켤 때마다 Cache Storage에 저장되어 있는 CSS, JS, HTML 파일을 사용하게 됨.(앱처럼 오프라인에서도 사용가능)
근데 설정은 모든 HTML, CSS, JS 파일을 Cache Storage에 저장하도록 기본 셋팅 되어 있음. service-worker를 편집해서 저장 원치 않은 파일들을 걸러낼수 있는 custom 가능.
(공식 튜토리얼) <a href="https://developers.google.com/web/fundamentals/primers/service-workers">https://developers.google.com/web/fundamentals/primers/service-workers</a>
(샘플) <a href="https://googlechrome.github.io/samples/service-worker/basic/">https://googlechrome.github.io/samples/service-worker/basic/</a>
*추가로 오프라인(하드)에 js, css, html 파일이 저장되어 있다고 하면 업데이트를 어떻게 하느냐 언제 하느냐 문제가 될 소지가 있는데 build할 때마다 js,css,html 파일의 이름과 경로가 무작위로 바뀌는데 파일명이 바뀔시 하드에 있는게 아니라 서버에 요청해서 파일들을 새로 받음.
<ol start="4">
<li>PWA 잘 개발 됐는지 확인</li>
</ol>
1) 호스팅해서 올리거나(Github pages, Nelify 등..) 
2) live server
<ul>
<li>build 폴더를 에디터로 오픈하고 거기 있는 index.html 우 클릭해서 live server 띄우기</li>
</ul>
열어서 크롬 개발자도구 키면 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 에서
<pre><code>new WorkboxWebpackPlugin.InjectManifest({
 swSrc,
 dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
 exclude: [/\.map$/, /asset-manifest\.json$/, /LICENSE/], </code></pre>
코드를 찾아서 exclude를 편집 
이게 지금 정규표현식으로 제외하는걸 잡아놓은거.
html 제외하는 예시
<pre><code>new WorkboxWebpackPlugin.GenerateSW({
 clientsClaim: true,
 exclude: [/\.map$/, /asset-manifest\.json$/, /index\.html/],
}) </code></pre>
이거 말고도 "모든 .css로 끝나는 파일" "a라는 글자로 시작하는 파일" 
이런식으로도 가능.
<ul>
<li>
PWA는 구글 앱스토어에 올릴 수 있는 apk 파일로 변환할 수 있는데 PWAbuilder 등을 이용하면 됨.
</li>
<li>
앱을 설치하는데 url 옆에 눌러서 다운을 받아야함. html에서 강제로 해당 안내가 나올 수 있게도 가능.
</li>
</ul></div></div>

2taesung.log

Taesung Lee

리엑트 앱 시작할 때 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에서 강제로 해당 안내가 나올 수 있게도 가능.

React.js PWA

댓글