Written by Parkdev
on January 26, 2024

[React]PWA를 만들어보자

PWA란?

PWA(Progressive Web App)은 모바일 기기에서 웹엡을 네이티브 앱처럼 사용할 수 있도록 제공하는 웹앱이다.
네이티브 앱과 유사한 사용자 경험을 제공하기 때문에 여러 장점을 가지고있다.

PWA의 장점

설치 마케팅 비용이 적다
- 기본적으로 네이티브 앱은 스토어에 들어가 앱을 검색해 발견하고 이를 다운로드하기까지 마케팅 비용으로 많은 비용이 나간다.
쉽게 설치가 가능하다.
- 전자기기에 익숙하지 않은 사용자들에게도 쉽게 접근하게 만들 수 있다.
html css js만으로 앱을 만들 수 있다.
푸시알림, 센서등을 핸드폰의 대부분의 기능들을 전부 사용할 수 있기때문에 더더욱 네이티브앱과 유사한 사용자 경험을 제공할 수 있다.

React로 PWA앱을 만들어보자

리엑트로 PWA앱을 만들기위해선 처음 프로젝트를 create할때 별도의 옵션으로 만들어야한다.

나중에라도 추가를 하지 못하기때문에 PWA앱을 만들기위해선 항상 새로 만들어야한다.

npx create-react-app {project name} --template cra-template-pwa      

PWA 설정이 정상적으로 되었는지 확인하려면 다음과 같은 파일이 만들어져있는지 확인하면된다.

public/manifest.json // 앱정보가 들어가있는 파일

{
  //앱이름 (사용자에게 노출할)
  "short_name": "React App",
  //앱의 풀네임
  "name": "Create React App Sample",
  // 앱 아이콘
  // 플랫폼마다 요구하는 아이콘 크기가 다르기때문에 사이즈별로 집어 넣어야한다.
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  // 설치된 앱을 눌렀을때 어디로 접근할 것인지
  "start_url": ".", // default: index.html
  "display": "standalone", // 상단바 유무
  "theme_color": "#000000", // 테마색상
  "background_color": "#ffffff" // 배경 색상

이를 설정하면 앱 초기화면 및 앱 아이콘이 동시에 설정된다.

src/service-worker.js
1. src/service-worker에는 해당 서비스를 위한 모든 설정이 담겨져있다.
2. 또한 index.js에 기존에는 보이지 않던 설정이 들어가 있다.

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://cra.link/PWA
serviceWorkerRegistration.unregister()

이를 register() 로 변경하고 build해야 실제 환경에서 service-worker을 사용할 수 있다.

Service-worker이란?

service-worker은 마치 네이티브 앱처럼 오프라인에서도 사이트를 열 수 있도록 도와주는 파일이다.

(build이후) asset-manifest.json
- 오프라인에서도 정상 작동할 수 있도록 화면에 관련된 모든 데이터를 캐싱하기 위한 설정이 담겨져있다.

이후 build된 파일을 배포하여 실행하면 웹 브라우저 안에 Download할 수 있는 버튼이 생긴것을 확인할 수 있다.

이를 강제로 띄워 설치를 유도시킬 수 도있다.

참고

특정 파일들을 캐싱하지 않도록 설정할 수도 있다.

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

...
	new WorkboxWebpackPlugin.InjectManifest({
    ...
    exclude: [/index\.html] // 정규식으로 입력해야하며, 여기에 포함된 파일은 캐싱되지 않는다.
    
})

← → Top