✨SEB FE
Progressive Web App (PWA)
vite(typescript)에서 pwa 세팅
📌PWA ?!
이번 프로젝트에서 웹 말고 사용자가 앱으로도 접근할 수 있다면 좋을 것 같다는 의견이 나와서 pwa를 찾아보게 되었습니다.!
Progressive Web App (PWA)는 웹 앱과 네이티브 앱의 장점을 결합한 형태의 웹 앱입니다.
프로젝트가 아직은 시작 단계에 불과해서 초기 세팅 정도 진행을 했습니당..
더 많은 내용은 pwa 관련 mdn web docs 에서 확인할 수 있습니다~
간단하게 과정 정리
1. vite 세팅
아래 명령어를 통해 typescript로 세팅된 react 프로젝트를 얻을 수 있습니다!
npm create vite@latest [프로젝트 명] -- --template react-ts
아래 vite 명령을 통해 바로 Vite를 실행할 수 있습니다
{
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
}
- dev: 개발 서버를 실행합니다. (
vite dev또는vite serve로도 시작이 가능합니다.)- build: 배포용 빌드 작업을 수행합니다.
- preview: 로컬에서 배포용 빌드에 대한 프리뷰 서버를 실행합니다.
2. PWA 세팅
(1). pwa 사용전 모바일에서 보여줄 아이콘을 준비
(아이콘이 없을 시.. 오류가 발생할 수 있습니다.)
-
아이콘 변환 사이트에서 다양한 크기의 아이콘을 준비합니다.
(512x512 크기 이상의 아이콘이 있어야 오류 없음!) -
저는 https://favicon.io/favicon-converter/ 여기서 변환을 진행했습니다~
-
변환된 아이콘, + 이미지 중에서 필요한 것들만 public/icons에 담아 줍니다.
(2). manifest.json 파일 설정
- public 디렉토리에 manifest.json 파일 생성 후, 앱 정보를 작성합니다.
웹앱 매니페스트란 앱에 대한 정보를 담고 JSON 파일이입니다. 배경색은 어떠한 색인지, 앱의 이름은 무엇인지, 홈스크린 화면에 추가할 때 아이콘은 어떤 것인지 등의 정보를 담고 있습니다. 웹앱 매니페스트는 manifest.json 파일명을 대부분 사용합니다.
- short_name : 사용자 홈 화면에서 아이콘 이름으로 사용
- name : 웹앱 설치 배너에 사용
- icons : 홈 화면에 추가할때 사용할 이미지
- start_url : 웹앱 실행시 시작되는 URL 주소
- display : 디스플레이 유형(fullscreen, standalone, browser 중 설정)
- theme_color : 상단 툴바의 색상
- background_color : 스플래시 화면 배경 색상
- orientation : 특정 방향을 강제로 지정(landscape, portrait 중 설정)
저는 테스트여서 간단하게 작성했어용~ 아이콘 크기를 잘 맞춰주시면 될 것 같습니당!! (512x512~~)
{
"name": "webappName",
"short_name": "Name",
"start_url": "",
"display": "standalone",
"background_color": "#FFFFFF",
"theme_color": "#FFFFFF",
"description": "PWA test",
"icons": [
{
"src": "icons/favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "icons/android-chrome-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "icons/android-chrome-512x512.png",
"type": "image/png",
"sizes": "512x512"
},
{
"src": "icons/android-chrome-512x512.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any maskable"
}
]
}
(3) sw.js 파일 설정
service worker에 대해.. 잘 모르지만, 아래와 같이 간단하게 보고 넘어가 봅니다.. ㅠㅁㅠ~
서비스 워커(sw.js) 파일은 웹 페이지와 별도로 브라우저가 백그라운드에서 실행되는 스크립트로, 웹 페이지나 사용자 상호 작용이 필요하지 않은 기능을 제공합니다.
sw.js 파일 설정은 다음과 같이 간단하게.. 틀만 넣었습니다.! (참고블로그 보고..)
- 루트 디렉토리에 sw.js 파일 생성 후, 아래와 같이 Service Worker 설정 코드 작성합니다.
// sw.js
// 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);
});
// 등등 앱에 따라 pwa 기능을 추가하고 sw.js에 작성할 수 있습니다.(4). index.html 파일 수정
- index.html 파일 내부에 메타 정보와 sw.js를 불러오는 스크립트 추가합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- 아이콘 link 설정 -->
<link rel="icon" href="icons/android-chrome-192x192.png" type="image/png" />
<link rel="alternate icon" href="/favicon.ico" type="ico" sizes="16x16" />
<link rel="apple-touch-icon" href="icons/apple-touch-icon.png" sizes="180x180" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="manifest" href="/manifest.json" />
<title>pwa test</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
<!-- pwa sw.js 정보 줄러오는 스크립트 추가 -->
<script>
if ('serviceWorker' in navigator) {
// Register a service worker hosted at the root of the
// site using the default scope.
navigator.serviceWorker
.register('/sw.js')
.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>
이렇게 끝내고 나서 npm run dev를 통해 로컬 서버를 실행하면!?
요롷게 번역 아이콘 옆에 모니터 다운로드 (?) 아이콘이 생깁니다..!
우선은 이정도로 진행을 한 상태이고 정말 세팅만 !.. 끝내서 Lighthouse를 통한 검사는 페이지 작업이 완료되면 진행해 보려고 합니당..!
간단한 세팅정도를 프로젝트 진입전에 진행해 보았어요~~ 뿌듯합니당.! 프로젝트가 끝나고 가능하면 검사까지 완료된 상태와 배포 상태도 업데이트 해보겠습닏낭!!!
아래 글 보고 거의 따라한 수준이랍니다..~ 그래도 새로운 내용을 알게 되어서 좋네요~!! ㅎㅎ 여기서 더 발전하는 글이 올라오길 기대하면서.. 총총...
많은 도움이 되었습니다, 감사합니다.