Develop/React.js

[React] PWA 셋팅해서 앱으로 발행하기(모바일앱인척)

dawonny 2023. 1. 10. 23:47
728x90
반응형

PWA 라는 걸 구글이 밀고 있다.

Progressive Web App 이라는건데 웹사이트를 Android/iOS 모바일 앱처럼 사용할 수 있게 하는 웹개발 기술이다.

내가 만든 웹사이트를 모바일 앱으로 발행해서 쓸 수 있는 법을 알아보자

여기서 모바일 앱으로 발행한다는게, iOS/Android 앱으로 발행하는게 아니라 웹사이트자체를 스마트폰 홈화면에 설치하는 방식이다.

PWA 의 장점

1. 스마트폰이나 태블릿의 홈화면(바탕화면)에 웹사이트를 설치할 수 있다.

앱을 누르면 상단 URL 바가 제거된 크롬 브라우저가 뜬다.

사실 웹이지만 유저가 봤을때는 그냥 앱같다.

 

2. 오프라인에서도 동작이 가능하다.

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

(게임 만들 때 유용할듯하다)

 

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

앱설치를 유도하는데에 보통 비용이 많이 드는데 그에비해서 마케딩 비용이 적을 것이다.

(앱은 앱스토어 들어가게해서 앱설치하게하고... 해야하지만 PWA는 웹사이트 방문자들에게 간단하게 팝업 띄워서 설치유도할 수 있으니까?)

어떤 사이트나 파일 2개가 사이트 로컬경로에 있으면 브라우저가 PWA로 인식한다.

+ 그리고 HTTPS 사이트여야한다

manifest.json 과 service-worker.js 라는 이름의 파일 두 개를 만들면 된다.

 

원래 기본 프로젝트를 npm build 하면 manifest.json 만 생성해준다.

service-worker.js 까지 자동으로 생성되길 원하면 프로젝트 생성시 다음과 같이 입력해서 생성한다.

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

만약 기존 프로젝트가 있었다면?

- App.js App.css index.js 같은 파일들을 새 프로젝트로 복붙한다.(index.js 는 바뀐게 많아서 다른것들 잘 복붙)

- router, redux 같은 라이브러리들 설치했다면 새 프로젝트에서도 다시 설치하기(당연)

- 파일들 중에 index.js 하단에

serviceWorkerRegistration.unregister();

를

serviceWorkerRegistration.register();

로 바꾸기

 

직접 해보자

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

터미널에 프로젝트를 생성해준다.

manifest.json

manifest.json 파일이다.

이 파일에는 웹앱의 아이콘, 이름, 테마색 등을 결정하는 부분이 들어간다.

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

이 파일은 웹앱에서 사용하는 모든 html 안에

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

이런식으로 집어넣어야하는데 이부분은 리액트가 알아서 해주었을거다.

 

index.js

index.js 파일에서 저 부분을 unregister()에서 register() 로 바꾸어주고 난 다음에 빌드를 해주어야한다.

npm run build 를 한다.

그럼 다음과 같이 build 라는 폴더가 생긴다.

그 안에 manifest.json과 service-worker.js 라는 파일이 있다.

 

service-worker.js 란?

보통 앱을 설치하면 스토어에가서 설치한다.

그럼 앱 구동에 필요한 이미지, 데이터들이 전부 하드에 설치된다.

그리고 앱을 켜면 여러 데이터들을 앱 서버에 요청하지 않구 하드에 설치해놓은걸 그대로 가져와 쓴다.

 

이처럼 도와주는 파일이 service-worker 파일이다.

웹앱을 설치했을 때 어떤 css, js, html, img 파일이 하드에 설치될지 결정할 수 있다.

그럼 다음번부터 앱을 켤 때마다 서버에 파일을 요청하지 않고 cache storage 에 저장되어있던 파일을 사용하게 된다.

-> 오프라인에서도 사용이 가능하게 됨!

 

설정은 이미 되어있다.

모든 html css js 파일을 cache storage 에 저장하도록 기본적으로 세팅이 되어있지만

저장해두기 싫거나 자주 변하는 파일들이 있을 수 있다.

이 부분을 수정해보자

 

만약 쌩으로 server-worker 파일을 만들고 싶으면 공식 튜토리얼을 참고

https://developers.google.com/web/fundamentals/primers/service-workers

 

Service worker overview - Chrome Developers

An overview of service workers.

developer.chrome.com

 

build 할 때마다 js css html 파일의 이름과 경로가 무작위로 바뀐다.

따라서 사이트에 필요한 js css html 파일명이 바뀌면 서버에 요청에서 새로 받아옴

-> 서버 배포할때마다 유저는 업데이트된 새로운 파일을 잘 보게 될거다. 이 부분은 걱정말자.

 

build 폴더를 작업영역으로 열어서 index.html 을 live server 로 open 해봤다

다음과 같이 페이지를 확인할 수 있다. 그리고 오른쪽 위에 검색창 쪽에 웹을 설치할 수 있는 버튼이 새롭게 보인다.

개발자 도구로 디버깅하기

개발자 도구에서 Application 탭에 들어가면 PWA 에 관련된 부분을 살펴볼 수 있다.

manifest 메뉴 : manifest.json 관련 내용

service worker 메뉴 : service-worker 파일, 오프라인에서 잘 동작하는지 테스트 가능, 푸시알림을 샘플로 전송해볼 수 있음

cache storage 메뉴 : service-worker 덕분에 하드에 설치된 css js html 파일 확인 가능. 캐시파일 제거 가능.

참고

PWA 는 구글 앱스토어에 올릴 수 있느 apk 파일로 변환이 가능한데

이때 PWAbuilder 등 이용하면 됨.

 

728x90
반응형