React를 사용해서 만든 서비스를 어플로 다운 받을 수 있다고? ( PWA로 프로젝트 하기 )

React + Vite + PWA로 프로젝트 생성하기

vite-pwa-plugin 설치

Vite PWA

Vite Plugin PWA

 

React와 Vite그리고 PWA를 사용해 프로젝트를 시작하기 위해서

vite-pwa 템플릿을 사용해서 react개발환경을 세팅해준다.

npm으로 vite-pwa 플러그인을 설치하면 아래와 같은 질문과 함께 설정을 도와준다.

 

PWA로 프로젝트를 생성하기 위해서는 다양한 설정파일들이 필요하다.

나는 기본 세팅으로 프로젝트를 생성했다.

npm create @vite-pwa/pwa@latest

 

Select a strategy :
generateSW injectManifest 서비스 워커를 생성하고 관리하는 방식 선택

generateSW	injectManifest
서비스 워커 파일을 자동 생성 필요한 캐시 로직과 파일목록을 Vite가 생성함	개발자가 직접 서비스 워커를 작성 복잡한 PWA기능을 구현할 때, 세부적으로 서비서 워커 동작을 제어할 수 있음

Select a behavior :
prompt for update auto update PWA의 업데이트 방식 설정

prompt for update	auto update
- 사용자에게 업데이트 요청 알림 띄워줌 - 사용자가 수동으로 업데이트 진행할 수 있도록 하여 새 버전 알림을 전달할 수 있다	- 새 버전이 배포되면 자동으로 업데이트 실행 - 서비스를 항상 최신 버전으로 유지할 수 있다

 

vite - pwa 템플릿 설치

npm create @vite-pwa/pwa@latest 

√ Project name: ... vite-project
√ Select a framework: » React
√ Select a variant: » TypeScript
√ PWA Name: ... vite-project
√ PWA Short Name: ... vite-project
√ PWA Description: ... 설치 테스트를 위한 프로젝트 example
√ Theme color: ... #ffffff
**√ Select a strategy: » generateSW
√ Select a behavior: » Prompt for update**
√ Enable periodic SW updates? ... no / yes
√ Show offline ready prompt? ... no / yes
√ Generate PWA Assets Icons on the fly? ... no / yes

// node-modules 마저 설치, 기본 로컬 테스트
npm run install
npm run dev

 

 

package.json에 설치된 내용

// PWA 관련 플러그인 설치 
"@vite-pwa/assets-generator": "^0.2.4", // PWA에 필요한 아이콘을 생성
"vite-plugin-pwa": "^0.20.0",
"workbox-core": "^7.1.0",         // workbox라이브러리가 서비스 워커 파일 자동 생성해줌
"workbox-window": "^7.1.0"        //

https://vite-pwa-org.netlify.app/assets-generator/
( vite-pwa 설정시 generateSW를 선택하면 자동으로 generator가 생성되기는 하지만 링크 걸어둠 )

 

 

실제로 프로젝트 다운받으려는 것을 보려면 빌드 후 미리보기를 해줘야 한다.

프리뷰까지 마쳤으면 해당 링크를 타고 들어가면 된다.

web에 화면이 뜨면서 url바에 install 아이콘이 생성되며 클릭하면 앱이 설치가 되고,

화면에 아이콘이 추가가 된다!!!! 제어판의 프로그램 삭제에서 삭제 가능하다 ㅋㅋㅋ

npm run build 
npm run preview

 

 

설치 아이콘 모습! 

PWA로 프로젝트를 설치할 수 있다

 

설치하고 난 뒤의 바탕화면에 아이콘이 생성된다

앱 삭제

제어판 > 프로그램 추가삭제 > 앱 삭제!!! 가능하다

앱 삭제도 가능하다

 

 

추가사항!!! 기존 PWA가 실행될때….;;

pwa프로젝트를 여러개 생성했을 경우에,
이전 프로젝트의 서비스워커가 연결되어 새로 작성한 서비스 워커와 충돌하는 경우가 있으므로
아래 내용을 체크해 본 뒤 테스트 해야한다

• 두 프로젝트가 동일한 포트를 사용하거나
• 동일한 브라우저에 동일한 서비스 워커 파일명이 등록되어 있는 경우

 

동일한 서비스 워커 등록

vite.config.ts에서 서비스워커 이름 변경

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      filename: 'custom-service-worker.js', // 서비스 워커 파일명 변경
    }),
  ],
});

 

 

브라우저에서 기존 서비스워커 제거

• 개발자도구 > Application > Service Worker 기존 서비스워커를 unregister 등록해제
• clear storage 캐시 지우기

 

동일한 포트에서 실행

두 프로젝트가 동일한 로컬 서버 포트에서 실행되었다면,
브라우저가 첫번째 프로젝트로 연결될 수 있다. 이 경우 개발 서버 포트를 변경해주면 된다.

 

vite.config.ts의 개발 서버 포트 변경

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5174, // 기본값(5173)과 다른 포트 지정
  },
});

 

빌드 후 미리보기 포트 변경 npm run preview 실행 시 사용하는 포트를 명시적으로 변경

npm run preview -- --port=5000

 

 

하나의 브라우저에서 여러 개의 PWA를 실행하게 되는 경우에는

아래와 같은 상황을 체크해 프로젝트를 실행하는 것이 좋다.

• 서비스 워커 파일명을 프로젝트별로 다르게 설정.
• 브라우저에서 기존 서비스 워커 등록 해제 및 캐시 제거.
• 각 프로젝트가 다른 포트를 사용하도록 설정.
• 정확한 디렉토리에서 명령 실행.