✨ PWA ( progressive web app ) 이란?
PWA는 HTML, CSS, 자바스크립트와 같은 웹 기술들을 사용해 만드는 앱으로
PWA는 푸시 알림이나 오프라인 지원과 같은 네이티브 앱의 특징들을 모두 제공한다.
별도의 앱 개발에 대한 지식없이 내가 만든 프로젝트에서 빠르게 만들 수 있다는 점이 너무 매력적인 것 같다.
PWA의 대표적인 예로 twitter가 있다.
✨ PWA의 조건
- 사용자의 기기에 설치가 가능해야한다.
사용자는 홈 스크린 아이콘을 통해 앱에 접근하며 브라우저 탭이 아닌 독립 실행형 창으로 열려야한다. - 오프라인, 저속도 환경에서도 동작해야한다.
리소스를 캐싱해둘 수 있어야한다. - 백그라운드 동기화가 가능해야한다.
사용자가 앱을 사용하고 있지 않을 때에도 동작하는 무언가가 있어야한다. - 사용자 재참여를 유도할 수 있도록 푸시 알림이 가능해야한다.
- 다양한 Web API를 사용하여 네이티브 앱과 같은 사용성을 갖춰야한다.
사용자 위치, 카메라, 진동, AR, VR 등 사용가능 - HTTPS 프로토콜을 통해 제공할 것 - 보안
✨ PWA으로 전환하기 위한 요구사항
기존에 존재하는 일반 웹을 pwa로 전환하기 위해선 다음과 같은 요구사항이 있다.
1) Web App Manifest JSON 파일
Web App Manifest는 PWA가 사용자의 디바이스에 어떻게 표시되고 동작해야 하는지 브라우저에게 알려주는 JSON 파일로
웹 앱이 PWA가 되려면 설치 가능해야 하고, 설치가 가능하려면 Manifest가 있어야한다.
Manifest 파일에는 앱 설치 시 필요한 정보(이름, 아이콘 등)를 정의할 수 있다.
2) Service Worker
오프라인 기능, 푸시 알림, 백그라운드 동기화 등을 지원한다.
3) 아이콘 이미지 파일
홈에 추가시 아이콘에 들어갈 이미지를 등록해야한다.
4) HTTPS
보안 및 Service Worker의 정상적인 작동을 위해 적용해야한다.
그렇기에 ... localhost 주소론 할 수 없어 배포를 해야 사용 가능한 것 같다..🥲
✨ vite를 이용해 react + PWA 시작하기
1. Vite React 프로젝트 생성
npm create vite@latest my-vite-app --template react
cd my-vite-app
npm install
2. vite-plugin-pwa 설치
npm install vite-plugin-pwa
3. Vite 설정 파일 (vite.config.js 또는 vite.config.ts) 수정
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { VitePWA } from 'vite-plugin-pwa';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
VitePWA({
registerType: 'autoUpdate',
manifest: {
name: 'onDo',
short_name: 'onDo',
description: 'My awesome Vite-powered PWA!',
theme_color: '#ffffff',
icons: [
{
src: "./icons/apple-touch-icon-57x57.png",
sizes: "57x57",
type: "image/png"
},
{
src: "./icons/apple-touch-icon-60x60.png",
sizes: "60x60",
type: "image/png"
},
{
src: "./icons/apple-touch-icon-72x72.png",
sizes: "72x72",
type: "image/png"
},
{
src: "./icons/apple-touch-icon-76x76.png",
sizes: "76x76",
type: "image/png"
},
{
src: "./icons/apple-touch-icon-114x114.png",
sizes: "114x114",
type: "image/png"
},
{
src: "./icons/apple-touch-icon-120x120.png",
sizes: "120x120",
type: "image/png"
},
{
"src": "./icons/apple-touch-icon-144x144.png",
sizes: "144x144",
type: "image/png"
},
{
"src": "./icons/apple-touch-icon-152x152.png",
sizes: "152x152",
type: "image/png"
}
]
}
})
]
});
4. PWA 아이콘 추가하기
public/icons에 사용할 아이콘 추가하기
다양한 크기에 맞는 아이콘 만들어주는 사이트 - https://favicomatic.com/
The ultimate favicon generator - Favic-o-Matic
Check this amazing tool, it creates EVERY kind of favicon you need, including iOS icons, Android icons, Metro tile icon and more! Favic-O-Matic is the FIRST favicon generator to correctly handle transparent favicon from png!
favicomatic.com
5. 서비스 워커 파일 설정
vite-plugin-pwa에서 자동으로 서비스 워커 파일을 생성해주기에 넘어가도 되지만
커스터마이징이 필요할 경우 src/service-worker.js파일을 추가해 직접 설정할 수 있다.
6. 배포하기
pwa가 제대로 설정되어있는지 확인하고 싶다면 프로젝트 실행 후 개발자도구 > lighthouse에 들어가서 확인해보면 된다.
✨ NPX를 이용해 react + PWA 시작하기
1. PWA template 생성하기
"service-worker.ts" 와 "serviceWorkerRegistration.ts" 가 잘 들어가 있는 지 체크하기
// 1. javascript
npx create-react-app pwa-react --template cra-template-pwa
// 2. typescript
npx create-react-app pwa-react --template cra-template-pwa-typescript
2. service worker 등록하기
index.tsx 파일에서 아래의 코드를 추가해줍니다.
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
serviceWorkerRegistration.register();
//unregister()이라고 되어있는 것은 주석처리하기
3. PWA 아이콘 추가하기
3-1) 위에서 한 것과 같이 public/icons에 아이콘을 추가해야한다.
3-2) 하지만 이 방법의 경우 public 폴더에 있는 Index.html에서 복사한 meta tag를 모두 head 안에 넣어줘야한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<meta name="application-name" content=" " />
<!--아이콘-->
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
3-3) 그 다음 public 폴더 안에 있는 manifest.json로 가서 아까 icons에 저장한 것들을 파일의 개수에 맞게 모두 넣어줘야한다.
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "./icons/apple-touch-icon-57x57.png",
"sizes": "57x57",
"type": "image/png"
},
{
"src": "./icons/apple-touch-icon-60x60.png",
"sizes": "60x60",
"type": "image/png"
},
{
"src": "./icons/apple-touch-icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "./icons/apple-touch-icon-76x76.png",
"sizes": "76x76",
"type": "image/png"
},
{
"src": "./icons/apple-touch-icon-114x114.png",
"sizes": "114x114",
"type": "image/png"
},
{
"src": "./icons/apple-touch-icon-120x120.png",
"sizes": "120x120",
"type": "image/png"
},
{
"src": "./icons/apple-touch-icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "./icons/apple-touch-icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
4. 배포하기
위와 같이 제대로 적용이 되었는지 확인하기 위해선 개발자도구를 통해 확인하면 된다.
✨ 나의 작고 귀여운 PWA 적용결과
이전에 배포해놨던 거(개인 프로젝트)에 우리 프로젝트 로고 가져와 슬쩍 적용해보았다...
