1️⃣ PWA란?
- PWA(Progressive Web App)란 웹사이트를 모바일 앱처럼 설치하여 사용할 수 있도록 만든 것을 의미합니다.
- 기존에 모바일 앱처럼 부드럽게 동작하는 웹사이트를, 실제 모바일 앱처럼 활용할 수 있게 하는 개념입니다.
- 예시: flipkart.com 등에서 “설치” 버튼을 누르면, 실제 앱 아이콘처럼 바탕화면에 설치되고 브라우저 상단바가 제거되어 앱과 동일한 UI로 보입니다.
- 실상은 "웹사이트 홈화면에 바로가기 추가" 기능과 유사하지만, 사용자 입장에서는 앱과 동일한 사용성을 제공합니다.
2️⃣ PWA의 주요 장점
- 오프라인 동작
- Service Worker와 브라우저의 Cache Storage 덕분에, 인터넷 연결 없이도 웹사이트가 동작합니다.
- 푸시 알림
- 모바일 앱처럼 푸시 알림 전송이 가능합니다.
- 앱 변환 용이성
- PWA를 기반으로 iOS 및 Android 앱으로 간단하게 변환할 수 있습니다.
- 예시: PWAbuilder – WebView에 사이트를 감싸 앱으로 포장
3️⃣ PWA 구현을 위한 필수 파일
- manifest.json
→ 앱 정보(이름, 테마색상, 아이콘 등)를 담은 파일 - service-worker.js
→ 캐싱 및 오프라인 동작을 위한 파일
직접 작성하기 번거로우므로, 라이브러리 도움을 받아 설정하는 것이 좋습니다.
4️⃣ Vite 프로젝트에서 PWA 설정하기 (Vue3 기준)
4-1. 라이브러리 설치
터미널에서 다음 명령어로 PWA 플러그인을 설치합니다.
npm install vite-plugin-pwa
또는 PWA 설정이 완료된 템플릿 프로젝트를 생성할 수도 있습니다.
npm create @vite-pwa/pwa@latest
4-2. Vite 설정 파일 (vite.config.js)
Vue3 프로젝트의 경우, Vue 플러그인은 @vitejs/plugin-vue를 사용합니다.
아래는 Vue3 + VitePWA 설정 예시입니다.
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
plugins: [
vue(),
VitePWA({
registerType: 'autoUpdate', // 새로운 파일이 있으면 service worker가 자동 업데이트
devOptions: {
enabled: true // 개발 중에도 service worker를 미리 보고 싶을 때 사용
},
workbox: {
globPatterns: ['**/*.{js,css,html,ico,png,svg}'] // 캐싱할 파일들 (빌드시 다이나믹 생성 파일도 포함)
},
includeAssets: ['apple-touch-icon.png'], // public 폴더 내 추가 캐싱 파일
manifest: {
name: '테스트용 Vue3 앱',
short_name: 'MyApp',
description: '설명',
theme_color: '#000000',
icons: [
{
src: 'logo.png',
sizes: '192x192',
type: 'image/png'
},
{
src: 'logo.png',
sizes: '512x512',
type: 'image/png'
}
]
// display: 'standalone' 등 추가 설정 가능 (주소창 제거 효과 등)
}
})
],
})
- 위 설정을 적용하면 라이브러리가 manifest.json과 service-worker.js 파일을 자동 생성합니다.
4-3. 빌드 및 미리보기 확인
npm run build명령어로 빌드하면 dist 폴더가 생성됩니다.- dist 폴더를 열고, 터미널에서 다음 명령어 실행:
또는 에디터의 Live Server 확장 프로그램으로 미리보기합니다.
```bash
npx serve .
```- 개발자 도구의 Application 탭에서 Manifest와 Service Worker 항목을 확인하여 PWA가 올바르게 설정되었는지 검증합니다.
- Offline 체크박스로 오프라인 동작도 테스트해 볼 수 있습니다.
- 개발 중 캐싱 때문에 변경 사항이 반영되지 않을 경우, Cache Storage에서 캐시된 파일을 삭제합니다.
5️⃣ 설치 유도 팝업 (App Install Prompt) 구현 (Vue3 예시)
PWA에서는 사용자가 설치를 원할 때, 설치 유도 팝업을 띄울 수 있습니다.
자동으로 띄워지진 않고, 사용자가 상호작용할 때 실행해야 합니다.
Vue3 <script setup> 사용 예시
<template>
<button @click="triggerInstall">앱 설치하기</button>
</template>
<script setup>
import { ref, onMounted } from 'vue'
// beforeinstallprompt 이벤트를 저장할 ref
const installPromptEvent = ref(null)
// 컴포넌트가 마운트될 때 이벤트 리스너 등록
onMounted(() => {
window.addEventListener("beforeinstallprompt", (e) => {
e.preventDefault() // 기본 동작 차단 (브라우저에서 자동으로 띄우지 않도록)
installPromptEvent.value = e // 이벤트 객체를 저장
})
})
// 버튼 클릭 시, 저장된 이벤트를 이용해 설치 팝업 실행
function triggerInstall() {
if (installPromptEvent.value) {
installPromptEvent.value.prompt() // 설치 팝업 실행
}
}
</script>
- 위 예제는 Vue3의
<script setup>문법을 사용하여, beforeinstallprompt 이벤트를 캡처하고, 사용자가 버튼 클릭 시 설치 유도 팝업을 실행합니다.
참고: 최근 모바일 브라우저 정책 변경으로 인해 일부 환경에서는 설치 팝업이 뜨지 않을 수 있습니다.
6️⃣ 추가 활용 예시 및 참고 자료
- CSS만으로 버튼에 마우스 올리면 배경 어둡게하기: CodePen 예제
- CSS만으로 3D 느낌 리본 모양 만들기: CodePen 예제
- ol 태그의 숫자 스타일링: 예제 보기
- Responsive 데이터 테이블 만드는 여러 방법: CSS-Tricks 예제
