React로 PWA를 만들어보자

이지원·2024년 8월 6일

React pwa

PWA란?

Progressive Web Apps의 줄임말로,웹사이트를 통해서 모바일 기기에서 네이티브앱과 같은 사용자 경험을 제공하는 웹 앱이다.

즉 웹사이트를 개발하면 웹 사이트를 통해서도 사이트를 볼 수 있고,구글 플레이스토어, 앱스토어와 같은 곳에서도 어플을 설치하여 사용 할 수 있다.

환경과 설정

일단 환경은
React,Typescript,Vite를 이용한 환경에서 시작한다.

아이콘 설정

핸드폰 어플로 만들어지게 될 아이콘을 설정해야하는데
어플로 만들어지게 되다보니 다양한 사이즈의 아이콘이 필요하다.
만약 최소 조건의 사이즈를 충족시키지 않는다면 빌드할때 에러가 발생한다.

이렇게 4가지의 사이즈만 적용했는데 최소 조건을 통과하였다.

Menifest설정

PWA를 통해서 어플을 만들려면 안드로이드 어플처럼 앱에 관한 정보를 적어줘야한다.

{
  "name": "pwa",
  "short_name": "pwa",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#ffffff",
  "icons": [
    {
      "src": "icons/70x70.png",
      "sizes": "70x70",
      "type": "image/png"
    },
    {
      "src": "icons/144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },

    {
      "src": "icons/310x310.png",
      "sizes": "310x310",
      "type": "image/png"
    },
    {
      "src": "icons/512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Service Worker설정

웹앱으로 만들어진 우리의 어플을 오프라인에서 설정하는 코드이다.
웹사이트는 오프라인에서 작동하지 않지만 어플은 오프라인일경우 작동하거나
처리해줘야하는 부분이 있기 때문에 필요한 코드로 생각된다.
sw.ts로 루트 경로에 만들어준다.

// install event
self.addEventListener("install", (e) => {
  console.log("[Service Worker] installed");
});

// activate event
self.addEventListener("activate", (e) => {
  console.log("[Service Worker] actived", e);
});

// fetch event
self.addEventListener("fetch", (e) => {
  console.log("[Service Worker] fetched resource " + e.request.url);
});

index.html 설정

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="manifest" href="/manifest.json" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    <script>
      if ("serviceWorker" in navigator) {
        // Register a service worker hosted at the root of the
        // site using the default scope.
        navigator.serviceWorker
          .register("/sw.ts")
          .then((registration) => {
            console.log("Service worker registration succeeded:", registration);
          })
          .catch((err) => {
            console.log("Service worker registration failed:", error);
          });
      } else {
        console.log("Service workers are not supported.");
      }
    </script>
  </body>
</html>