PWA 세팅으로 앱처럼 발행하기

1. pwa 장점.

• 웹사이트 방문 유도이기 때문에 비용이 저렴함.
• 접근성이 좋음.
• 앱에서 쓸 수 있는 푸쉬알림이나 센서 등도 사용가능.

2. 세팅 방법
   1) 프로젝트 생성

• 일단 먼저 PWA가 세팅된 react파일이 있어야함. (미리 세팅 필요)
• 프로젝스 생성 시 명령어는 아래와 같음.

  npx create-react-app 프로젝트명 --template cra-template-pwa

2) 파일 생성 (이미 생성되어있음)

• manifest.json : 앱 설정 파일
• service-worker.js

** 주의) 미리 프로젝트 생성할 때 이렇게 생성해야함.

3) index.jsx부분 변경
이전

serviceWorkerRegistration.unregister();

변경

serviceWorkerRegistration.register();

4) npm run build하면 위의 파일 생성

5) manifest.json / service-worker.js 파일 내용

• manifest.json 파일은 아이콘, 이름, 테마색 등을 결정

• 아래와 같이 구성

  {
  "version" : "여러분앱의 버전.. 예를 들면 1.12 이런거",
  "short_name" : "설치후 앱런처나 바탕화면에 표시할 짧은 12자 이름",
  "name" : "기본이름",
  "icons" : { 여러가지 사이즈별 아이콘 이미지 경로 },
  "start_url" : "앱아이콘 눌렀을 시 보여줄 메인페이지 경로",
  "display" : "standalone 아니면 fullscreen",
  "background_color" : "앱 처음 실행시 잠깐 뜨는 splashscreen의 배경색",
  "theme_color" : "상단 탭색상 등 원하는 테마색상",
  }

• service-worker 파일은 다음에 앱을 켤 때마다 서버에 CSS,JS,HTML 파일을 요청하는게 아니라 Cache Storage에 저장되어있던 CSS,JS,HTML 파일을 사용하게 해줌 (오프라인에서도 사용가능)

• 설정은 이미 되어있음.

• 그냥 쌩으로 service-worker파일을 만들고 싶다면 아래 공부

  (공식 튜토리얼) https://developers.google.com/web/fundamentals/primers/service-workers
  (샘플) https://googlechrome.github.io/samples/service-worker/basic/

• 개발자도구 application항목에서 내용 확인 가능

3. PWA 커스터마이징
   구글의 workbox 덕분에 PWA이용
   따라서 커스터마이징을 하려면 workbox를 알아야함.
   어려우니 간단하게 수정하는 방법 몇가지

• 하드에 설치할 파일 중에 HTML을 제외
  (HTML파일은 자주 변경되기 때문에 하드에 설치하기 싫을 수 있음)

  node_modules/react-scripts/config/webpack.config.js

new WorkboxWebpackPlugin.GenerateSW({
    clientsClaim: true,
    exclude: [/\.map$/, /asset-manifest\.json$/],
}) 

<OR>

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/],
}) 

** PWA는 구글 앱스토어에 올릴 수 있는 apk 파일로 변환할 수도 있음 (PWAbuilder)