[React+JS/리액트] PWA 셋팅해서 앱으로 발행하기 (모바일앱인척하기)

구글이 밀고있는 PWA 것이 있다. 

Progressive Web App 이라는 것으로 웹 사이트를 안드로이드나 iOS 모바일 앱처럼 사용할 수 있도록 만드는 웹개발 기술이다. 

모바일 앱처럼 만든 앱은 모바일 앱처럼 스마트폰 홈화면서 설치할 수 있다.

 

웹사이트를 PWA 화 시키는게 뭐가 좋을까?

 

1. 스마트폰, 태블릿 바탕화면에 웹사이트 설치가 가능

 

앱처럼 설치된 웹을 누르면 상단의 url 바가 제거된 크롬 브라우저가 뜬다. 일반 사용자는 이것이 웹인지 앱인지 구별하지 못한다.

 

2. 오프라인에서도 동작할 수 있음

 

service-worker.js 라는 파일과 브라우저의 Cache storage 덕분에 그렇다. 

(자바스크립트로 게임을 만들때 유용할 것 같다)

 

3. 설치 유도 비용이 매우 적음

 

앱 설치를 유도하는 마케팅 비용이 적게 들어 좋다. 

구글플레이 스토어에 방문해서 앱 설치하고 다운받게 하는건 항상 매우 높은 마케팅 비용이 든다. 

근데 PWA 라면 웹사이트 방문자들에게 간단한 팝업을 띄워서 설치유도 할 수 있으니 훨씬 적은 마케팅 비용이 든다. 

그래서 미국에서는 PWA 를 적극 이용하고 있는 쇼핑몰들이 많다고 한다. 

 

 

PWA 만드는 것은 별거 없다. 아무 사이트나 파일 2개만 사이트 로컬경로에 있다면 브라우저가 PWA 로 인식한다. 

(+ HTTPS 사이트여야함)

 

-> mainfest.json, service-worker.js 파일이 있어야함!

 

 

평소에 리액트 프로젝트를 npm build / yarn build 했을 경우 mainfest.json 파일만을 생성해주기 때문에 service-worker.js 까지 자동으로 생성을 원한다면 프로젝트를 만들 때 아래의 명령어를 사용해서 만들면 된다. 

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

 

 

만약 이미 프로젝트를 만들어서 개발을 했다면?

 

1. 다른 폴더에 위 명령어를 이용해 프로젝트를 새로 하나 만들기

2. 기존 프로젝트의 App.js, App.css, index.js 이런 파일들을 새 프로젝트에 복붙하기 (그냥 건드린 파일을 다 복붙하면 됨)

근데 index.js 파일은 바뀐점이 좀 있기 때문에 차이점만 잘 복붙하면 된다. 

3. router, redux 이런 라이브러리를 설치했다면 그것도 새 프로젝트에서 다시 설치하면 된다.

 

 

그리고 index.js 파일의 하단을 보면 이런 부분이 있는데, 

serviceWorkerRegistration.unregister();

 

이렇게 고쳐야 한다. (unregister -> register)

serviceWorkerRegistration.register();

 

 

그럼 이제 yarn build / npm run build 를 해보면, mainfest.json 과 service-worker.js 파일이 build 폴더 안에 자동으로 생성된다.

이제 PWA 발행 끝이다. 

 

 

 

mainfest.json / service-worker.js 파일 살펴보기

 

build 하고 나면 build 폴더 내에 mainfest.json, worker.js 파일들이 들어있다. 

 

mainfest.json -> 웹앱의 아이콘, 이름, 테마색 이런 것을 결정하는 부분

(시간이 난다면 version, scope 항목에 대해서도 찾아보자)

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

 

 

그리고 이 파일은 웹앱에서 사용하는 모든 html 안에 이런식으로 집어 넣어야 하는데,

리액트가 알아서 설치해줬기 때문에 건드릴 필요가 없다.

<link rel="manifest" href="/manifest.webmanifest">

 

 

 

카카오톡 앱 같은 것을 설치할 때 구글플레이 스토어에 가서 설치하면, 카톡 구동에 필요한 이미지, 데이터들이 전부 하드에 설치된다.

그리고 카톡을 켜면 카톡 로고 같은 데이터를 카톡 서버에 요청하는 것이 아니라 하드에 이미 설치되어 있는 것을 그대로 가져와서 쓴다.

 

이걸 가능하게 해주는 것이 service-worker.js 파일이다. 

이 파일에 설정을 잘 해주면 웹앱을 설치했을 때 어떤 CSS, HTML, JS 이미지 파일이 하드에 설치될지 결정할 수 있다. 

 

그럼 이제 앱을 켤 때마다 서버에 CSS, HTML, JS 파일을 요청하는 것이 아니라 Cache Storage 에 저장되어 있던 CSS, HTML, JS 파일을 사용하게 된다.  (오프라인 사용이 가능해지는 것!)

 

원래 웹은 보통 모든 내용을 서버에서 가져오기 때문에 인터넷 연결이 끊기면 이런 공룡이 보인다. (오프라인에서 사용 못함!)

 

 

만약 그냥 쌩으로 service-worker.js 를 만들고 싶다면, 구글 공식 튜토리얼이나 크롬 브라우저 권장 튜토리얼을 참고하면 된다. 

service worker 제작에 필요한 문법이 따로 있고 그걸 학습해야 된다. 

 

- 공식 튜토리얼

https://developer.chrome.com/docs/workbox/service-worker-overview?hl=ko

서비스 워커 개요  |  Workbox  |  Chrome for Developers

 

- 샘플

https://googlechrome.github.io/samples/service-worker/basic/

Basic Service Worker Sample

 

 

홈페이지 업데이트할 때마다 유저들이 올드 JS 파일을 사용하지 않을까 걱정이 된다면, 걱정하지 않아도 된다. 

그리고 build 할 때마다 JS, CSS, HTML 파일의 이름과 경로가 무작위로 바뀐다. 

사이트에 필요한 JS, CSS, HTML 파일명이 바뀌면 하드에 있는게 아니라 서버에 요청해서 새로 받아오기 때문에 파일을 서버에 올려 배포할 때마다 유저는 새로운 파일을 보게 된다. 

 

 

개발자도구로 PWA 디버깅하기

 

내가 build 했던 프로젝트가 PWA 인지 아닌지 살펴보고 싶다면 일단 사이트를 호스팅 받아 올리거나 github pages 이런 데 올려봐도 된다.

 

VScode 익스텐션중에 live server 을 설치하고 

1. build 폴더를 에디터로 오픈하고

2. 거기 있는 index.html live server 로 띄우기를 누르면 된다

 

이제 사이트에서 개발자 도구를 키고 Application 탭에 들어간다. 여기서 PWA 와 관련된 모든 것을 살펴볼 수 있다. 

(내 사이트가 없다면 flipkart.com 이런 PWA 사이트에 들어가서 따라해보면 된다)

 

Mainfest 메뉴 -> mainfest.json 내용들 확인가능

Service Worker 메뉴 -> service-worker 파일이 잘 있는지, 오프라인에선 잘 동작하는지 테스트 가능하고 푸시알림 기능을 개발해놨다면 푸시알림도 샘플로 전송해볼 수 있다. 

 

 

 

나의 PWA 커스터마이징하기

 

지금 PWA 발행이 쉽고 간단한 이유는 구글의 workbox 라는 라이브러리 덕분이다. 

이게 create-react-app 설치할 때 함께 설치되었기 때문이다. 그래서 PWA 발행 방식 같은 것을 커스터마이징 하고 싶다면 workbox 사용법을 익혀야 하는데, 구글 직원들이 써놓은 개발문서는 매우 불친절하고 어렵다.

 

간단하게 커스터마이징 방법 하나를 알아보자.

 

만약 하드에 설치할 파일 중 어떤 파일을 제외하고 싶다면?

 

프로젝트 폴더 내의 node_modules/react-scripts/config/webpack.config.js 파일을 찾는다. 

파일의 하단에는 아래와 같은 코드가 있다. 

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

// 신버전
new WorkboxWebpackPlugin.InjectManifest({
    swSrc,
    dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
    exclude: [/\.map$/, /asset-manifest\.json$/, /LICENSE/],

 

여기에 exclude 라는 항목이 어떤 파일을 캐싱하지 않을건지를 결정하는 부분인데, 이 곳에 정규식으로 캐싱하지 않을 파일을 써주면 된다.

이거 말고도 "모든 .css로 끝나는 파일" "a 라는 글자로 시작하는 파일" 이런 식으로 다양하게 정규식 작성이 가능)

 

아무튼 위처럼 코드를 추가하면 build 할 때 캐싱을 원하지 않는 파일을 캐싱 목록에서 제외해주게 된다. 

 

※ 참고

참고로 PWA 는 구글 앱스토에 올릴 수 있는 apk 파일로 변환할 수도 있는데, PWAbuilder 등을 이용하면 된다.