PWA 설치 및 구현 가이드: 6가지 장점과 3가지 단점 총정리

{
   "name": "사이트 전체 이름",
   "short_name": "짧은 이름",
   "description": "사이트 설명",
   "start_url": "/",
   "display": "standalone",
   "background_color": "#ffffff",
   "theme_color": "#색상코드",
   "icons": [
       {
           "src": "/images/icon-192x192.png",
           "sizes": "192x192",
           "type": "image/png",
           "purpose": "any maskable"
       },
       {
           "src": "/images/icon-512x512.png",
           "sizes": "512x512",
           "type": "image/png",
           "purpose": "any maskable"
       }
   ]
}

// 캐시 이름과 버전 정의
const CACHE_NAME = '사이트이름-v1';
// 캐시할 파일 목록
const urlsToCache = [
 '/',
 '/index.html',
 '/css/main.css',
 '/js/main.js',
 '/images/icon-192x192.png',
 '/images/icon-512x512.png',
 // 필요한 리소스 추가
];
// 설치 이벤트
self.addEventListener('install', (event) => {
 event.waitUntil(
   caches.open(CACHE_NAME)
     .then((cache) => {
       console.log('캐시에 리소스 저장 중');
       return cache.addAll(urlsToCache);
     })
 );
});
// 활성화 이벤트
self.addEventListener('activate', (event) => {
 event.waitUntil(
   caches.keys().then((cacheNames) => {
     return Promise.all(
       cacheNames.map((cacheName) => {
         if (cacheName !== CACHE_NAME) {
           console.log('이전 캐시 삭제:', cacheName);
           return caches.delete(cacheName);
         }
       })
     );
   })
 );
});
// 네트워크 요청 처리
self.addEventListener('fetch', (event) => {
 event.respondWith(
   fetch(event.request)
     .then((response) => {
       // 유효한 응답인 경우에만 캐시에 저장
       if (response && response.status === 200) {
         const responseToCache = response.clone();
         caches.open(CACHE_NAME)
           .then((cache) => {
             cache.put(event.request, responseToCache);
           });
       }
       return response;
     })
     .catch(() => {
       // 네트워크 요청 실패시 캐시된 응답 반환
       return caches.match(event.request);
     })
 );
});

<!-- PWA 메타 태그 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#색상코드">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="사이트 설명">
<!-- 매니페스트 링크 -->
<link rel="manifest" href="/manifest.json">
<!-- 아이콘 설정 -->
<link rel="icon" href="/images/icon-192x192.png">
<link rel="apple-touch-icon" href="/images/icon-192x192.png">

<script>
 // 서비스 워커 등록
 if ('serviceWorker' in navigator) {
   window.addEventListener('load', () => {
     navigator.serviceWorker.register('/service-worker.js')
       .then(registration => {
         console.log('서비스 워커 등록 성공:', registration.scope);
       })
       .catch(error => {
         console.error('서비스 워커 등록 실패:', error);
       });
   });
 }
 // PWA 설치 관련 처리
 let deferredPrompt;
 const PWA_INSTALLED_KEY = '사이트이름_pwa_installed';
 const isInstalled = localStorage.getItem(PWA_INSTALLED_KEY) === 'true';
 // 설치 완료 이벤트
 window.addEventListener('appinstalled', (evt) => {
   localStorage.setItem(PWA_INSTALLED_KEY, 'true');
   console.log('앱이 성공적으로 설치되었습니다!');
 });
 // 설치 프롬프트 캡처
 window.addEventListener('beforeinstallprompt', (event) => {
   // 이미 설치된 경우 프롬프트 방지
   if (isInstalled) {
     event.preventDefault();
     return false;
   }
   
   // 프롬프트 이벤트 저장
   deferredPrompt = event;
   console.log('설치 프롬프트가 준비되었습니다');
 });
</script>

<button id="installPWA" class="btn btn-primary">앱 설치하기</button>
<script>
 const installButton = document.getElementById('installPWA');
 
 // 설치 버튼 초기 상태 설정 (기본적으로 숨김)
 installButton.style.display = 'none';
 
 // 설치 프롬프트가 있을 때 버튼 표시
 window.addEventListener('beforeinstallprompt', (e) => {
   e.preventDefault();
   deferredPrompt = e;
   installButton.style.display = 'block';
 });
 
 // 설치 버튼 클릭 이벤트
 installButton.addEventListener('click', async () => {
   if (!deferredPrompt) {
     return;
   }
   
   deferredPrompt.prompt();
   const { outcome } = await deferredPrompt.userChoice;
   
   if (outcome === 'accepted') {
     localStorage.setItem(PWA_INSTALLED_KEY, 'true');
     installButton.style.display = 'none';
   }
   
   deferredPrompt = null;
 });
</script>