React 쇼핑몰(Progressive Web App)

이번 시간에는 Progressive Web App, 줄여서 PWA를 알아보겠습니다.

1. PWA란?

PWA는 웹 개발 기술 중 하나로, 웹 사이트를 안드로이드나 ios 모바일 앱처럼 사용할 수 있도록 만들어주는 기술입니다.

 

그렇다면 PWA를 사용하면 무엇이 좋을까요?

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

- 사용자가 웹사이트를 설치하면 앱처럼 동작하는데, 일반 사용자들은 이것이 앱인지 구분하기 어렵습니다.

 

2) 오프라인에서도 동작할 수 있습니다.

- service-worker.js 파일과 브라우저의 Cache Storage를 통해 가능하며 JS로 게임 등을 개발할 때 유용합니다.

 

3) 설치 유도 비용이 적습니다.

- 플레이 스토어에 앱을 올리는 것을 많은 비용이 들지만, PWA를 이용한 웹사이트 방문자들에게 간단한 팝업을 띄워서 설치 유도할 수 있으므로 마케팅 비용이 적게 듭니다.

 

2. PWA 만드는 방법

1) manifest.json과 service-worker.js 파일 생성

- 아무 사이트나 manifest.json과 service-worker.js 파일만 사이트 로컬 경로에 위치시키면 부라우저가 PWA로 인식합니다.
(HTTPS사이트여야 함)

 

2) 프로젝트 생성 시 CRA 템플릿(pwa-template) 사용

- 프로젝트 생성 시 아래의 명령어를 입력합니다.

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

- 해당 템플릿을 사용하면 자동으로 manifest.json과 service-worker.js 파일을 생성해줍니다.

 

3) 기존 프로젝트에서 PWA 설정 추가하기

- 새 프로젝트를 생성 후 우리가 진행하고 있던 기존 쇼핑몰 프로젝트의 App.js App.css index.js 등의 파일들을 새 프로젝트에 복붙해서 가져옵니다.

- index.js는 변경점이 있기 때문에, 차이가 있는 부분만 복붙합니다.

- router, dedux 등의 설치했던 라이브러리도 다시 설치합니다.

 

4) index.js 파일 수정

- 추가로 index.js 파일 하단의 코드를 수정해줍니다.

serviceWorkerRegistration.unregister(); // 수정 전

// 위 코드를 아래와 같이 수정해줍니다.
serviceWorkerRegistration.register(); // 수정 후

 

5) build 명령 실행하여 PWA 발행

- npm run build / yarn build 명령을 실행하여 PWA를 발행할 수 있습니다.

- 발행 후 build 폴더 내부에 manifest.json과 service-worker.js 파일들이 있을겁니다.

 

6) manifest.json 파일 확인

- manifest.json 파일은 웹앱의 아이콘, 이름, 테마 색상 등을 결정하는 파일입니다. 파일 안에 들어가는 내용들은 대략 아래와 같습니다.

"version": 여러분의 앱의 버전을 나타내는 값입니다. 예를 들어, "1.12"와 같이 표현됩니다.
"short_name": 설치 후 앱 런처나 바탕 화면에 표시할 짧은 12자 이름입니다.
"name": 기본 이름으로 사용되는 값입니다.
"icons": 여러 가지 사이즈의 아이콘 이미지 경로를 포함하는 객체입니다.
"start_url": 앱 아이콘을 클릭했을 때 보여줄 메인 페이지의 경로입니다.
"display": 앱이 standalone 또는 fullscreen으로 나타날지를 결정하는 값입니다.
"background_color": 앱이 처음 실행될 때 잠깐 뜨는 스플래시 화면의 배경색입니다.
"theme_color": 상단 탭 색상 등 원하는 테마 색상을 나타내는 값입니다.

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

manifest.json 파일은 모든 HTML 파일의 head 태그 안에 다음과 같이 추가되어야 하지만 리액트 프로젝트를 사용하는 경우에는 자동으로 처리되므로 별도의 설정은 필요하지 않습니다.

 

7) service.js 파일 확인

- service-worker.js 파일은 웹앱에서 사용하는 HTML, CSS, JS 파일을 캐시에 저장하여 오프라인에서도 사용할 수 있도록 도와줍니다. 이 파일은 서비스 워커라는 브라우저 기술을 활용하여 구현됩니다. 서비스 워커는 웹앱의 성능과 오프라인 기능을 향상시키는 역할을 합니다.

- 보통 리액트 프로젝트에서는 이미 기본적인 설정이 되어 있어 별도의 수정은 필요하지 않습니다. 그러나 필요에 따라 서비스 워커를 커스터마이징하고 싶다면 구글의 공식 튜토리얼이나 크롬 브라우저의 권장 튜토리얼을 참고하면 됩니다.

 

3. PWA 디버깅을 위한 크롬 개발자 도구

build한 프로젝트가 PWA인지 확인하고 싶을 때는, 사이트를 호스팅 받아서 올리거나 VScode 익스텐션 중 live server를 활용해서 build 폴더를 에디터로 오픈하고 index.html을 liver server로 띄우시면 됩니다.

 

크롬 개발자 도구의 'Application' 탭을 사용하면 PWA 디버깅에 유용한 기능들을 제공합니다.

이 탭을 통해 Manifest 메뉴에서는 manifest.json 파일의 내용을 확인하고, Service Workers 메뉴에서는 service-worker 파일의 존재 여부와 오프라인 동작을 테스트 할 수 있습니다. Cache Storage 메뉴에서는 service-worker 덕분에 설치된 CSS,  JS, HTML 파일을 확인하고 제거할 수도 있습니다.

 

4. PWA 커스터마이징

PWA가 발행이 쉬운 이유는 create-react-app을 설치할 때, 구글의 workbox라는 라이브러리가 함께 설치되었기 때문입니다. 또한 PWA 개발을 더욱 커스터마이징 하고 싶을 때에도 workbox 라이브러리를 사용할 수 있습니다. 기본적인 사용 방법은 구글 개발 문서를 참고할 수 있지만 복잡하기 때문에 필요한 부분만 수정하는 방법을 간단히 알아보겠습니다.

 

예를 들어, HTML 파일을 캐싱하지 않고 싶다면 webpack.config.js 파일을 수정하면 됩니다. 해당 파일에서 exclude 항목을 설정하여 캐싱하지 않을 파일을 정규식으로 지정할 수 있습니다. 이를 통해 index.html 파일 등을 캐싱 목록에서 제외할 수 있습니다.

// exlude 항목의 정규식과 일치하는 파일명의 파일을 캐싱하지 않습니다.
new WorkboxWebpackPlugin.InjectManifest({
    swSrc,
    dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
    exclude: [/\.map$/, /asset-manifest\.json$/, /LICENSE/], 
})