Written by Nostrss
on March 04, 2023

React PWA 만들기(1)

PWA란?

Progressive Web Apps의 약자이다.
html,css,javascript와 같은 웹기술로 만드는 App이라고 생각하면 된다. 마치 Web과 App의 경계사이에 있는 느낌이다.
바탕화면에 웹페이지를 즐겨찾기 해둔 것처럼 간단해 보이기도 하고, Web을 패키징한 하이브리드 앱처럼 보이기도 한다.
구글,MS에서는 PWA 사용과 보급에 적극적이지만 Apple은 이에 소극적이라고 한다.

Register Store(?)

직접 해보지는 않았지만 이렇게 생성한 App을 이론적(?)으로 구글플레이 스토어와 애플 앱 스토어에 등록 할 수 있다고 한다.
검색을 해보니 구글은 사례가 많이 보였는데, 애플의 앱 스토어의 경우에는 찾을 수가 없었다. 애플은 심사통과가 되지 않을 수도 있을 것 같다.

reference

PWA-builder

Getting started with Progressive Web Apps

PWA 예시

스타벅스 홈페이지가 PWA가 적용이 되어있다.

Starbucks 바로가기

위의 링크를 타고 접속하면 주소창 우측에 다운로드 버튼이 있는데, 클릭하면 PWA가 다운로드 된다. 다운로드 된 PWA를 실행시키면 브라우저에서 실행되는 것이 아니라 마치 APP을 실행시킨듯한 화면이 나타난다.

스타벅스-pwa

REACT에 PWA 적용하기

1.React Set up

npx create-react-app pwa

2.Install gh-pages and package.json setting

git-hub pages에 배포해서 보기 위하여 gh-pages를 설치하여 간단히 배포를 위한 세팅을 했다.

npm i gh-pages

package.json에 배포 script 추가

//package.json
...
"homepage": "http://nostrss.github.io/pwa", //추가
...
"predeploy": "npm run build", //추가
"deploy": "cp build/index.html build/404.html && gh-pages -d build" //추가

3.Add service-worker

아래 2개의 파일을 root 위치에 작성하여 추가해줬다.

service-worker.js(소스코드)
serviceWorkerRegistration.js(소스코드)

그리고 index.js파일에 service-worker를 등록해주는 코드를 추가해줬다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// 아래 코드 추가
import * as serviceWorkerRegistration from './serviceWorkerRegistration';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// 아래 코드 추가
serviceWorkerRegistration.register();

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();