Vite + React + typescript 기반의 PWA 만들기

PWA 빌드하기

 

PWA를 만든 이유

모바일로 인프런을 이용할 때 매번 [ 크롬 -> 탭을 누르기 -> 인프런 들어가기 -> 강의 누르기 ] 이런 경로를 타다보니 귀찮게 느껴졌는데 마침 인프런 앱이 있었다.

그래서 앱을 다운 받아봤는데 마치 PWA 환경과 비슷하다고 생각이 되어서 찾아봤다.

[ 개발자 환경 -> 애플리케이션 -> 매니페스트 ] 를 보면 짐작은 할 수 있는데 PWA를 사용할 수 있는 조건은 만족하고 있는 것 같았다.

그래서 회사 프로젝트 중 일반 유저들이 사용하는 프로젝트 하나에 PWA를 추가하기로 생각했다.

 

PWA의 장점

PWA는 Progressive Wab App을 말한다.

직접 네이티브로 개발하지 않아도 웹 개발 한 것을 기반으로 앱을 만들 수 있다는 장점을 가지고 있는데 주요 사용 기업으로는 "스타벅스", "트위터", "알리익스프레스" 등이 있다.

 

기본적으로는 웹이므로 SEO가 잘 되어있다면 검색엔진을 통한 유입을 기대할 수 있으며, 마치 앱처럼 홈 화면에 아이콘을 추가해서 웹사이트를 실행하는 것 처럼 느낌을 줄 수 있다.

또한 오프라인에서도 사용할 수 있고, push 알림을 통한 상호작용 또한 가능하다.

PWA 자체에서 제공해주는 이점 때문에 다양한 화면 크기와 디바이스에 자동으로 최적화된 디자인을 제공하므로 어떤 유저던지 좋은 UX를 경험시켜줄 수 있다.

앱 스토에 등록할 필요가 없으므로 앱 스토어의 규정과 수수료에 대한 걱정이 없으며 웹과 같으므로 웹 기술을 이용해서 유지보수 및 업데이트를 할 수 있다.

 

 

PWA를 설정할 때 필요한 구성요소 세 가지!

1. HTTPS

앱을 만든다는 것은 보안에도 큰 신경을 써야한다는 것이다.

PWA는 신뢰할 수 있는 연결 상태에서만 동작하므로 HTTPS로 반드시 만들어줘야하며 보안 연결을 통해서 서비스를 제공해야한다.

반드시 PWA를 위해서 뿐 아니라 라이트하우스(lighthouse) 성능 평가 프로그램에서 인증을 받기 위해서도 https는 의무 사항이다.

HTTPS는 암호화 인증을 거쳐서 보안을 강화한 웹 통신 규약으로 사용자들의 개인정보를 안전하게 보호한다.

 

2. service worker

PWA의 핵심이라고 봐도 무방할만큼 중요하다!

웹 브라우저 안에 있지만 웹 페이지와는 분리되어 백그라운드에서 실행되는 프로그램이다.

네트워크와 관련된 요청처리를 도와주는데 웹 페이지와 분리되어 실행되다보니 이전에는 불가능했던 많은 작업을 수행할 수 있다.

백그라운드를 염두하지 않고 복잡한 작업이 수행가능 하다보니 이 service worker 때문에 캐시되어서 오프라인에서도 사용이 가능하고, 더 긴밀하게 통합되어 앱과 유사한 기능의 Push notification, 백그라운드 동기화 등을 제공한다.

 

3. Manifest

매니페스트(Manifest)란 앱 소개 정보와 기본 설정을 담은 JSON 파일이다.

이 파일은 웹앱의 이름과 소개글을 비롯해 아이콘, 화면 방향, 배경색, 테마색 등을 정의하며 PWA를 만들기 위해서는 반드시 manifest.json이라는 파일이 포함되어있어야 한다.

 

 

PWA 단점

단점도 몇 가지가 있는데 우선 모든 브라우저에서 지원이 되지 않을 수 있다.

즉, 사용자는 최신 브라우저를 사용해야한다는 것이다.

그리고 네이티브 앱에 비해서 기능이 제한적이라는 문제도 있다.

웹 개발로 한 것을 앱으로 만든 것이므로 네이티브 앱에서 제공하는 모든 기능을 PWA를 통해 제공할 수 는 없다.

 

---

Vite + React + typescript에 PWA 도입하기

찾아보니 PWA Vite Plugin 이라고 해서 사용할 수 있는 라이브러리가 있었다.

Vite PWA에 들어가서 Getting Started 부터 차근히 진행하면 된다.

(** vite를 이용해서 React를 설치했다는 것을 가정하고 진행하겠다)

 

1. Vite전용 PWA 라이브러리 설치

 

홈페이지에 나온 그대로 설치를 한다.

 

2. PWA 제너레이터 라이브러리 설치

이를 통해 Manifest, service worker, app icon 등 PWA 관련 종속성을 설치한다.

yarn add -D @vite-pwa/assets-generator

 

3. vite.config.ts 에서 환경설정 수정

위와 같이 홈페이지에 나온대로 먼저 설정을 해준다.

그리고 VitePWA 내부 사항을 바꿔야하는데 아래는 내가 만든 예시이다.

import react from '@vitejs/plugin-react';
import path from 'path';
import { defineConfig } from 'vite';
import { VitePWA } from 'vite-plugin-pwa';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
      manifest: {
        name: '프로젝트명', // 설치 배너에 표시되는 이름
        short_name: '프로젝트명', // 아이콘 아래에 표시될 이름
        description: '프로젝트 설명',
        theme_color: '#ffffff',
        lang: 'ko',
        icons: [
         name: 'WIM-I',
        short_name: 'WIM-I',
        description: 'WIM-I 해석 상담 보고서를 위한 검사 어플리케이션',
        background_color: '#ffffff',
        theme_color: '#008649',
        prefer_related_applications: true,
        lang: 'ko',
        display: 'standalone',
        icons: [
          {
            src: 'pwa-64x64.png',
            sizes: '64x64',
            type: 'image/png'
          },
          {
            src: 'pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: 'pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png',
            purpose: 'any'
          },
          {
            src: 'maskable-icon-512x512.png',
            sizes: '512x512',
            type: 'image/png',
            purpose: 'maskable'
          }
        ]
        ]
      }
    })
  ],
  base: '/wim-i',
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  server: {
    port: 3000
  }
});

 

이 외에도 display, start_url, browser, fullscreen 등이 있다.

 

4. svg 파일 추가하기

일반적인 방법으로 PWA를 만들게 되면 다양한 이미지 유형을 작성해서 넣어야하는데, 우리가 사용하는 PWA 라이브러리에서는 단일의 SVG 파일을 assets로 사용할 것을 강력히 권고한다.

public 폴더 아래에 [파일명].svg를 만든다.

 

 

5. script 실행

"script" : {
	...,
	"pwa": "pwa-assets-generator --preset minimal public/logo.svg"
}

 

이렇게 스크립트를 만들고 실행을 해보면 public 폴더에 여러가지 이미지 파일들이 생기는 것을 볼 수 있다.

 

 

6. index.html의 head 태그 내에 삽입

// index.html

...
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" sizes="180x180" />

 

 

7. 실행

나의 경우 yarn을 사용하고 있으므로 아래와 같이 실행시켜보자.

yarn build
yarn preview

 

이렇게 했을 때 아래와 같이 다운로드가 가능해지면 성공이다.

---

 

 

PWA는 웹과 앱의 장점을 결합한 기술이다. 이를 통해 웹에 익숙한 유저가 모바일에서도 비슷한 UI구성을 사용할 수 있으니 UX를 향상시키는데 큰 역할을 할 수 있을 것이다.

UX는 높이면서 앱 스토어에 등록할 필요가 없으니 개발자들이 쉽게 배포할 수 있다는 장점도 있다.

하지만 언급한 것처럼 단점도 있으니 상황을 충분히 고려해서 만들어 본다면 도움이 될 것이다.